iOS 上的 FlexBox 布局

最新推荐文章于 2024-08-25 07:16:12 发布

次世代群901739356

最新推荐文章于 2024-08-25 07:16:12 发布

阅读量429

点赞数

CC 4.0 BY-SA版权

分类专栏：大数据入门到精通文章标签： ios 响应式设计程序员

本文链接：https://blog.youkuaiyun.com/qq_39658251/article/details/80105126

本文介绍了iOS上FlexBox布局的原理和优势，包括Auto Layout与FlexBox的性能对比，FlexBox的基础概念和组成，如Flex Container、Flex Direction等。通过Yoga库展示了FlexBox在iOS中的实现，提供了各种布局示例，如居中显示、嵌套布局等，强调了FlexBox在响应式设计中的价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么要了解 FlexBox?

最近时不时的听到关于 FlexBox 的声音，除了在 Weex 以及 React Native 两个著名的跨平台项目里有用到 FlexBox 外，AsyncDisplayKit 也同样引入了 FlexBox 。

先说说 iOS 本身提供给我们 2 种布局方式:

Frame,直接设置横纵坐标，并指定宽高。
Auto Layout，通过设置相对位置的约束进行布局。

Frame 没什么太多可说的了，直接制定坐标和大小，设置绝对值。

Auto Layout 本身用意是好的，试图让我们从 Frame 中解放出来，摆脱关于坐标和大小的刻板思考方式。转而利用 UI 之间的相对位置关系，设置对应约束进行布局。

但是 Auto Layout 好心并未做成好事，它的语法又臭又长! 至今学习 iOS 两年，我使用到原生 Auto Layout 语法的时候屈指可数。只能靠 Masonry 这样的第三方库来使用它。

Auto Layout 的原理

说完了 Auto Layout 的使用，再来看看它工作原理。

实际上，我们设置 Auto Layout 的约束，就构成一系列的条件,成为一个方程。然后解出 Frame 的坐标和大小。

例如，我们设置一个名为 A 的 UI :

A.center = super.center
A.width  = 40
A.height = 40

则:A.frame = (super.center.x-40/2,super.center.y-40/2,40,40)

再设置一个 B:

B.width  =  A.width
B.height =  A.height
B.top    =  A.bottom + 50
B.left   =  A.left

则:B.frame = ( A.x , A.y + A.height + 50 , A.width , A.height )

如图：

Cassowary

Auto Layout 内部有专门用来处理约束关系的算法，我一直以为是苹果自家研发的，查阅资料才发现是来自一个叫 Cassowary 的算法。

Cassowary是个解析工具包，能够有效解析线性等式系统和线性不等式系统，用户的界面中总是会出现不等关系和相等关系，Cassowary开发了一种规则系统可以通过约束来描述视图间关系。约束就是规则，能够表示出一个视图相对于另一个视图的位置。

戴铭 <深入剖析Auto Layout，分析iOS各版本新增特性>

有兴趣的可以进一步了解该算法的实现。