初识iOS autolayout 和 contrains

什么是constrains(约束)?

个人理解约束就如同css对html元素的作用，约束在iOS中其实就是限制每一个UI元素之间的相对位置和大小关系。苹果官方文档这样描述：The layout of your view hierarchy is defined as a series of linear equations. Each constraint represents a single equation. Your goal is to declare a series of equations that has one and only one possible solution.
也就是说，约束就是一个或多线性方程组，你的目的就是声明这些方程组使得有且只有一个可能的解（O__O "…）。

引用一张apple官方的图:

约束方程

上图中约束方程表示RedView的前置边缘（leading edge）必须距离BlueView的后置边缘（trailling edge)8个单位。

大多数约束定义了两个元素间的几何关系，但是约束也可以定义单个元素的两个不同属性之间的关系，比如说设置一个元素的宽高比（aspect ratio）。你也可以为元素的某些属性定义一些常量，比如说宽度，当使用常量时，第二个元素（item）可以置空，第二个属性(attriburte)可以设为Not An Attribute,因子（multiplier）可以设为0.0。

约束中的属性(attributes)

在自动布局中，属性就是可以被约束的一些特性，总的来说，包括了4个边缘区(edges)（leading, trailling, top, bottom）,还有height,width,vertical 和 horizontal centers(垂直和水平中心轴)。对于一些文本元素还有一个或多个的baseline属性,如下图所示:

自动布局属性

完整的布局属性可以到官方文档查看NSLayoutAttribute。

约束伪代码示例

// Setting a constant height
View.height = 0.0 * NotAnAttribute + 40.0
 
// Setting a fixed distance between two buttons
Button_2.leading = 1.0 * Button_1.trailing + 8.0
 
// Aligning the leading edge of two buttons
Button_1.leading = 1.0 * Button_2.leading + 0.0
 
// Give two buttons the same width
Button_1.width = 1.0 * Button_2.width + 0.0
 
// Center a view in its superview
View.centerX = 1.0 * Superview.centerX + 0.0
View.centerY = 1.0 * Superview.centerY + 0.0
 
// Give a view a constant aspect ratio
View.height = 2.0 * View.width + 0.0

注意，约束方程中的 "=" 表示相等关系(equality)，而不是赋值关系(assignment)

也就是说，不是把右侧的值赋值给左边，而是会计算出满足两侧相等条件的属性值。

Button_2.leading = 1.0 * Button_1.trailing + 8.0

Button_1.trailing = 1.0 * Button_2.leading - 8.0
// 两个约束是完全等价的。

TODO: 下一步要分享怎么创建明确的（Nonambiguous）、可解的(Satisfiable)的布局约束,以及Masonry的使用。

最后编辑于：2018.12.04 10:00:54