10 分钟学会 iOS 流式布局

相关链接:

关于 iOS 自适应流式布局

我们知道, 最初的 iOS 布局是静态绝对定位布局, 开发者在开发应用的时候, 必须提前知道用户界面的每一个元素(控件)如按钮, 输入框等的大小和位置. 静态绝对定位布局具有性能高的优势, 但对开发者不友好, 因为有些东西是没法提前知道的, 而且在运行时是动态变化的. 而且, 静态绝对定位布局有一个致命的缺陷, 那便是无法适配多种屏幕大小.

为解决屏幕适配的问题, 实现自适应(Adaptive)布局, 苹果开发出了基于约束布局的所谓"自动布局". 所谓约束布局, 简单说就是设定每一个控件相对其它控件或者屏幕的距离, 当然还有居中等其它约束.

但是, iOS 的约束布局非常难用. 首先, 约束布局是一种相对布局, 需要预先知道相邻的控件, 这又是一个静态条件, 有时是需要动态获取的. 其次, 苹果开发的约束布局语法极其拖沓冗余, 废话太多, 常常需要10句话来表达两个字的意思.

CocoaUI 所使用的流式布局, 其原理便是 Web 开发中最常见的布局方式. 而且, CocoaUI 使用的布局语法, 就是 HTML 和 CSS 属性, 极其简洁高效.

概括来说, CocoaUI 的 iOS 自适应流式布局具有这些优点:

float: left or right

iOS 流式布局

我们要将两个 View(视图) 摆放到目标区域, 但我们不需要指定它们的坐标, 只需要给 View1 指定 float: left, 然后给 View2 指定 float: right. 无论目标区域如何扩大或者缩小, 这两个 View 都会分别靠在左边和右边.

float: center

iOS 流式布局

将 View2 摆在水平居中的位置.

当空间放不下时

iOS 流式布局

View1 摆放在左边, View2 摆放在右边. 当我们想摆放 View3 时, 会发现 View1 和 View2 之间的空间不足以放下 View3, 所以, View3 会被堆叠在 View1 的上面(屏幕方向下方).

clear: left - 我不接受我的左边有其它控件

iOS 流式布局

给 View2 指定 clear: left, 它将会堆叠在 View1 的上面, 即使 View1 右边的空间足够, 因为, 它不能容忍任何控件摆放在它的左边.

clear: right - 我右边的空间已经被我占用了, 其它控件不能使用

iOS 流式布局

假设我们给 View1 指定 clear: right, 这样, 在摆放 View2 时, View1 右边的空间就不能使用了.

百分比宽度

iOS 流式布局

当给视图指定百分比宽度时, 这个百分比不是相对于父视图的宽度, 而是当前所要摆放的那个空间的宽度.

当你想实现 n 列布局时, 用下面的公式给各个列视图指定宽度:

盒模型

iOS 流式布局

CocoaUI 的盒模型包括: margin, border, padding, inner. 这些属性在上图中描述.