Weex-iOS源碼-CSS Layout 分析

前言

這篇文章主要是對Weex iOS端源碼中的佈局原理進行分析，並根據原理寫了一個Demo,歡迎你們進行交流溝通。

Layout 介紹

Layout是FaceBook開源的一個跨端CSS佈局引擎。 Weex 引入了Layout 在原來的基礎上進行命名空間上的調整， Layout在Weex中主要是做爲一個CSS參數的容器，對CSS的參數的管理。

Layout源碼

Layout源碼由C語言編寫，主要包含能夠存儲CSS參數的結構體、枚舉，以及一些相關的C函數。 一、結構體、枚舉 Layout.h文件中聲明瞭對應於CSS屬性的一些結構體和枚舉體 如：

css_style_t
css_layout_t
css_node_t
css_direction_t
css_flex_direction_t
css_justify_t
css_align_t
css_position_type_t
css_wrap_type_t
css_position_t
···
複製代碼

對CSS有了解的夥伴能夠看出，這些結構體的命名上和CSS的屬性是相對應的 其中比較核心的一個數據結構體是css_node_t，裏面包含了CSS佈局須要的大部分參數：

二、C函數 layout中實現了一些管理css_node_t等結構體的生命週期的C函數：

css_node_t *new_css_node(void);
void init_css_node(css_node_t *node);
void free_css_node(css_node_t *node);
void layoutNode(css_node_t *node, float maxWidth, float maxHeight, css_direction_t parentDirection);
void resetNodeLayout(css_node_t *node);
複製代碼

這些函數包括了初始化、析構、重置等功能。

Weex佈局原理

大概流程：

1、經過JS載入數據

Weex經過JSContext讓APP與JS進行交互，相關載入的數據經過JSValue進行載入。 JSValue數據結構大體以下:

{
        attr = {
            data-v-e9c9dede = ;
        };
        style = {
            bottom = 48wx;
            position = absolute;
            width = 0;
            left = 0;
            top = 0;
            opacity = 0;
            backgroundColor = rgba(0,0,0,0.5);
        };
        type = div;
        event = (
                 click
                 );
        ref = 558;
    }
複製代碼

經過JS獲取JSValue:

2、轉換成iOS原生可用的佈局數據 存進css_node_t

在獲取JSValue以後經過toDictionary方法轉化成原生直接可用的NSDictionary格式的數據。 再將NSDictionary數據轉換到css_node_t中 Weex中封裝了一些宏用於轉換，如：

WX_STYLE_FILL_CSS_NODE
WX_STYLE_FILL_CSS_NODE_PIXEL
WX_STYLE_FILL_CSS_NODE_ALL_DIRECTION
複製代碼

這些宏主要是獲取NSDictionary中各個key的value(即CSS屬性的數據)計算成原生布局可用的數據,存入css_node_t 中對應的成員裏。 Weex提供了一些方法將CSS屬性的數據計算轉換成佈局可用的數據: 例如數值轉換：

Weex中，CSS的width,height等屬性單位有wx和px. + (CGFloat)CGFloat:(id)value方法就是將其轉換成原生布局能夠用的數值。

3、進行佈局

須要佈局時，從css_node_t取出數據，對View進行佈局。 如：

從 css_node_t中取出數據，計算出frame（即View的位置和大小），進行佈局

其餘細節

佈局數值的精確度

在layout中實現了一個比較函數eq:

static bool eq(float a, float b) {
  if (isUndefined(a)) {
    return isUndefined(b);
  }
  return fabs(a - b) < 0.0001;
}
複製代碼

從中能夠看出，因此在weex中佈局相關數值的精確度誤差最低爲0.0001，如0.00011和0.00019在weex佈局中視爲同樣。

標籤採用繪製成圖片的形式展現

從源碼能夠看出， (對應weex源碼中的WXTextComponent)用了繪製成圖片的形式展現：

這也是致使weex頁面內存開銷比原生大不少的主要緣由之一。 我我的認爲用圖片來展現的緣由是： 經過CSS佈局面對不一樣尺寸屏幕時以及各類佈局方案下，各個組件會有各類各樣的拉伸場景，UILabe中文字的大小font須要隨着拉伸進行變化，經過計算來讓font適應各類拉伸場景須要考慮的場景太多太複雜。 所以weex採用了圖片進行展現的方法解決這個問題。