close
当前位置: 物联网在线 > 技术文库 > ios >

由FlexBox算法强力驱动的Weex布局引擎

由FlexBox算法强力驱动的Weex布局引擎

前言

这篇文章将会详细的分析Weex是如何高性能的布局原生界面的,之后还会与现有的布局方法进行对比,看看Weex的布局性能究竟如何。

目录

1.Weex布局算法

2.Weex布局算法性能分析

3.Weex是如何布局原生界面的

一. Weex布局算法

打开Weex的源码的Layout文件夹,就会看到两个c的文件,这两个文件就是今天要谈的Weex的布局引擎。

Layout.h和Layout.c最开始是来自于React-Native里面的代码。也就是说Weex和React-Native的布局引擎都是同一套代码。

当前React-Native的代码里面已经没有这两个文件了,而是换成了Yoga。

由FlexBox算法强力驱动的Weex布局引擎

Yoga本是Facebook在React Native里引入的一种跨平台的基于CSS的布局引擎,它实现了Flexbox规范,完全遵守W3C的规范。随着该系统不断完善,Facebook对其进行重新发布,于是就成了现在的Yoga。

那么Flexbox是什么呢?

由FlexBox算法强力驱动的Weex布局引擎

熟悉前端的同学一定很熟悉这个概念。2009年,W3C提出了一种新的方案——Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了几乎所有浏览器的支持,目前的前端主要是使用Html / CSS / JS实现,其中CSS用于前端的布局。任何一个Html的容器可以通过css指定为Flex布局,一旦一个容器被指定为Flex布局,其子元素就可以按照FlexBox的语法进行布局。

关于FlexBox的基本定义,更加详细的文档说明,感兴趣的同学可以去阅读一下W3C的官方文档,那里会有很详细的说明。 

Weex中的Layout文件是Yoga的前身,是Yoga正式发布之前的版本。底层代码使用C语言代码,所以性能也不是问题。接下来就仔细分析Layout文件是如何实现FlexBox的。

由FlexBox算法强力驱动的Weex布局引擎

故以下源码分析都基于v0.10.0这个版本。

(一)FlexBox中的基本数据结构

Flexbox布局(Flexible Box)设计之初的目的是为了能更加高效的分配子视图的布局情况,包括动态的改变宽度,高度,以及排列顺序。Flexbox可以更加方便的兼容各个大小不同的屏幕,比如拉伸和压缩子视图。

在FlexBox的世界里,存在着主轴和侧轴的概念。

由FlexBox算法强力驱动的Weex布局引擎

大多数情况,子视图都是沿着主轴(main axis),从主轴起点(main-start)到主轴终点(main-end)排列。但是这里需要注意的一点是,主轴和侧轴虽然永远是垂直的关系,但是谁是水平,谁是竖直,并没有确定,有可能会有如下的情况:

由FlexBox算法强力驱动的Weex布局引擎

在上图这种水平是侧轴的情况下,子视图是沿着侧轴(cross axis),从侧轴起点(cross-start)到侧轴终点(cross-end)排列的。

主轴(main axis):父视图的主轴,子视图主要沿着这条轴进行排列布局。

主轴起点(main-start)和主轴终点(main-end):子视图在父视图里面布局的方向是从主轴起点(main-start)向主轴终点(main-start)的方向。

主轴尺寸(main size):子视图在主轴方向的宽度或高度就是主轴的尺寸。子视图主要的大小属性要么是宽度,要么是高度属性,由哪一个对着主轴方向决定。

侧轴(cross axis):垂直于主轴称为侧轴。它的方向主要取决于主轴方向。

侧轴起点(cross-start)和侧轴终点(cross-end):子视图行的配置从容器的侧轴起点边开始,往侧轴终点边结束。

侧轴尺寸(cross size):子视图的在侧轴方向的宽度或高度就是项目的侧轴长度,伸缩项目的侧轴长度属性是「width」或「height」属性,由哪一个对着侧轴方向决定。

接下来看看Layout是怎么定义FlexBox里面的元素的。

typedef enum { CSS_DIRECTION_INHERIT = 0, CSS_DIRECTION_LTR, CSS_DIRECTION_RTL } css_direction_t;

这个方向是定义的上下文的整体布局的方向,INHERIT是继承,LTR是Left To Right,从左到右布局。RTL是Right To Left,从右到左布局。下面分析如果不做特殊说明,都是LTR从左向右布局。如果是RTL就是LTR反向。

typedef enum { CSS_FLEX_DIRECTION_COLUMN = 0, CSS_FLEX_DIRECTION_COLUMN_REVERSE, CSS_FLEX_DIRECTION_ROW, CSS_FLEX_DIRECTION_ROW_REVERSE } css_flex_direction_t;

这里定义的是Flex的方向。

由FlexBox算法强力驱动的Weex布局引擎

上图是COLUMN。布局的走向是从上往下。

由FlexBox算法强力驱动的Weex布局引擎

上图是COLUMN_REVERSE。布局的走向是从下往上。

由FlexBox算法强力驱动的Weex布局引擎

上图是ROW。布局的走向是从左往右。

由FlexBox算法强力驱动的Weex布局引擎

上图是ROW_REVERSE。布局的走向是从右往左。


(责任编辑:ioter)

用户喜欢...

自主汽车传感器:处理器算法如何获得输入

尽管鉴于最近特斯拉级别S的死亡,有关自主汽车消亡的非技术性媒体报道,我想在本文中介绍传感器电子设备,结合更好和更精细的软件算法,最终将实现在未来十年内,一辆安全,完全自主...


主流机器学习算法简介与其优缺点分析

机器学习算法的分类是棘手的,有几种合理的分类,他们可以分为生成/识别,参数/非参数,监督/无监督等。 例如,Scikit-Learn的文档页面通过学习机制对算法进行分组。这产生类别如:1,广...


成为一名机器学习算法工程师,需要具备哪些技能?

成为一名合格的开发工程师不是一件简单的事情,需要掌握从开发到调试到优化等一系列能力,这些能力中的每一项掌握起来都需要足够的努力和经验。而要成为一名合格的机器学习算法工程...


机器学习算法选用指南

在从事数据科学工作的时候,经常会遇到为具体问题选择最合适算法的问题。虽然有很多有关机器学习算法的文章详细介绍了相关的算法,但要做出最合适的选择依然非常困难。 在这篇文章...


嵌入式工程师必须知道的八大加密算法

伴随着人工智能、物联网时代的到来,数据应用变得频繁起来,数据安全应该如何保护?软件加密算法都有哪些,这些算法在哪些方面得到了应用?慢慢读下去,你会发现围绕在我们身边的“...


走进英特尔中国研究院 感受科技的性感与温度

“英特尔中国研究院开放日”在北京举行。此次活动展出了一系列最具前瞻性的研究项目和成果,充分彰显了英特尔...


英特尔举行中国研究院开放日,揭秘数据时代的科技引擎

“英特尔中国研究院开放日”今天在北京举行,英特尔中国研究院院长宋继强率领团队集体亮相,共同分享了英特尔...


神经网络算法的优势与应用

人工神经网络(ANN)以大脑处理机制作为基础,开发用于建立复杂模式和预测问题的算法。 首先了解大脑如何处理信息: 在大脑中,有数亿个神经元细胞,以电信号的形式处理信息。外部信...


机器学习特征选择常用算法

1. 综述 (1) 什么是特征选择 特征选择 ( Feature Selection )也称特征子集选择( Feature Subset Selection , FSS ) ,或属性选择( Attribute Selection ) ,是指从全部特征中选取一个特征子集,使构造出来的模型更...


Xilinx平方根IP核的用法- 整形平方根算法

以下是算整形平方根的IP核,如果计算浮点数,可以用浮点数的平方根IP核。 标注1:数据省略格式: 第一种:Truncate:直接取整 第二种:Round Pos Inf:四舍五入,+0.5之后四舍五入,在负数时和...