【理解】Auto Layout自动布局（一）

- 日理万妓 2022-08-20 11:28 4阅读 0赞

Auto Layout是在WWDC2012上被引入到iOS中的，从iOS6.0以后就开始支持，但是大多数的开发者还是习惯使用传统的UI布局方式，虽然有一大部分开发者早已使用了Auto Layout，这其中大多数的开发者是在拖拽IB文件或者是使用StoryBoard时才会选择用Auto Layout的布局方式。

Auto Layout是一种基于约束的、描述性的布局系统。也就是使用约束条件来描述布局，View的Frame会根据这些描述来进行计算。

在iOS6.0以后加入了一个新类：NSLayoutConstraint。我们可以使用可视化格式化语言Visual Format Language(稍后的文章中会介绍)的方式创建约束(还有一种创建的方式，后面的文章会介绍)。如下这个方法：

**\[cpp\]**  [view plain][]  [copy][view plain]

1.  \+ (NSArray \*)constraintsWithVisualFormat:(NSString \*)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary \*)metrics views:(NSDictionary \*)views;

我们可以用这个方法实现如下效果的布局：

![SouthEast][]

实现的代码如下，注释是凭自己的理解写的，有什么不妥之处请评论指出。

**\[cpp\]**  [view plain][]  [copy][view plain]

1.  **if**(floor(NSFoundationVersionNumber) > NSFoundationVersionNumber\_iOS\_6\_1)  
2.      \{  
3.          self.edgesForExtendedLayout = UIRectEdgeNone;  
4.      \}  
5.        
6.      //自动布局  
7.      //正常的创建按钮，但不用设置按钮的Frame属性  
8.      UIButton \* leftButton = \[UIButton buttonWithType:UIButtonTypeSystem\];  
9.      leftButton.layer.borderWidth = 2.0;  
10.     leftButton.layer.borderColor = \[UIColor blackColor\].CGColor;  
11.     \[leftButton setTitle:@"左" forState:UIControlStateNormal\];  
12.     \[self.view addSubview:leftButton\];  
13.       
14.     UIButton \* rightButton = \[UIButton buttonWithType:UIButtonTypeSystem\];  
15.     rightButton.layer.borderWidth = 2.0;  
16.     rightButton.layer.borderColor = \[UIColor blackColor\].CGColor;  
17.     \[rightButton setTitle:@"右" forState:UIControlStateNormal\];  
18.     \[self.view addSubview:rightButton\];  
19.       
20.     //将自适应向布局约束的转化关掉(根据情况有时需要有时不需要)  
21.     \[leftButton setTranslatesAutoresizingMaskIntoConstraints:NO\];  
22.     \[rightButton setTranslatesAutoresizingMaskIntoConstraints:NO\];  
23.       
24.     //创建一个存放约束的数组  
25.     NSMutableArray \* tempConstraints = \[NSMutableArray array\];  
26.       
27.     /\* 
28.      创建水平方向的约束:在水平方向,leftButton距离父视图左侧的距离为80，leftButton宽度为60,rightButton和leftButton之间的距离为30，rightButton宽60 
29.      \*/  
30.     \[tempConstraints addObjectsFromArray:\[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-80-\[leftButton(==60)\]-30-\[rightButton(==60)\]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(leftButton,rightButton)\]\];  
31.       
32.     /\* 
33.      创建竖直方向的约束:在竖直方向上,leftButton距离父视图顶部30，leftButton高度30 
34.      \*/  
35.     \[tempConstraints addObjectsFromArray:\[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-\[leftButton(==30)\]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(leftButton)\]\];  
36.     /\* 
37.      竖直方向的约束:在竖直方向上，rightButton距离其父视图顶部30，高度与leftButton的高度相同 
38.      \*/  
39.     \[tempConstraints addObjectsFromArray:\[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-\[rightButton(==leftButton)\]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(rightButton,leftButton)\]\];  
40.       
41.     //给视图添加约束  
42.     \[self.view addConstraints:tempConstraints\];

这里 需要注意的问题 是，当我们将一个创建好的约束添加到View上时，添加的目标View要遵循以下的规则:

*  对于两个同层级View之间的约束关系，添加到他们的父View上。
 *  对于两个不同层级View之间的约束关系，添加到他们最近的共同的父View上
 *  对于有层次关系的两个View之间的约束关系，添加到层次较高的父View上

[view plain]: http://blog.csdn.net/dongbaojun_ios/article/details/12566529#
[SouthEast]: /images/20220731/fc3369bdcf3e4f46b6a70cec8022fad0.png