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采用了图片进行展现的方法解决这个问题。