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)

用户喜欢...

Python 的数学仙境之旅

作者:Aceyclee 数学中有很多有趣的东西都可以用代码来显示,这是一个 Python 集合,用代码把数学算法渲染成一幅幅美...


基于深度学习的无人机识别算法研究

摘 要: 无人机的广泛运用,在给人们带来便利的同时,也引发了不良影响。比如,无人机飞入禁飞区引发安全问题,由于不正当的使用侵犯公民的隐私等,因此需要构建一个无人机警察系统...


机器学习实战之第一章 机器学习基础

作者:片刻 1988 机器学习 概述 机器学习就是把无序的数据转换成有用的信息。 获取海量的数据 从海量数据中获取有...


机器学习算法的基本知识(使用Python和R代码)

本篇文章是原文的译文,然后自己对其中做了一些修改和添加内容(随机森林和降维算法)。文章简洁地介绍了机器学习的主要算法和一些伪代码,对于初学者有很大帮助,是一篇不错的总结...


机器学习算法与Python实践之(一)k近邻(KNN)

    机器学习算法与python实践这个系列主要是参考《机器学习实战》这本书。因为自己想学习Python,然后也想对一些机器学习算法加深下了解,所以就想通过Python来实现几个比较常用的机器...


揭秘10个大数据神话

如果数据有一点点就不错了,那么数据是海量的话就一定棒极了,对不对?这就好比说, 如果一个炎日夏日里的微风让...


关于人工智能的优缺点 这里有需要知道的10个事实

1.人工智能正在为你的工作而来。为了保护你的职业,最好去做那些机器不擅长的工作——比如说涉及到人、不可预测...


十大必须掌握的机器学习算法,你都知道了吗?

通过本篇文章可以对ML的常用算法有个常识性的认识,没有代码,没有复杂的理论推导,就是图解一下,知道这些算法是什么,它们是怎么应用的,例子主要是分类问题。 每个算法都看了好几...


大数据与AI的融合,对于人类来说究竟是促进发展,还是加速灭亡?

作者:福尔摩望 AI和大数据都是目前最热门的技术,如果这两者结合在一起,会发生什么呢? 研究人员正在寻找通过与...


CoCoA:大规模机器学习的分布式优化通用框架

去年,Michael I. Jordan 实验室发表论文《CoCoA: A General Framework for Communication-Effici...