iOS:Autolayout自动布局实例
Autolayout自动布局实例即可以用故事板布局,也可以用纯代码创建,各有各的优点;用故事板布局,比较方便,而且直观,可以很直白的看到视图布局后的变化;采用代码布局,虽然代码比较多,有些麻烦,但是可以很好的进行控制,设置自己所要的布局。下面我就对这两种布局做一下演示。
练习1:
在控制器view底部添加2个view,1个蓝色,1个红色
2个view宽度、高度永远相等
p距离父控件左边、右边、下边间距和2个view之间的间距相等
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021164457380-2058819891.png)
采用故事板布局如下:
1.打开故事板,拖入两个视图UIView控件,名称一个为view1设置为蓝色,一个为view2设置为红色。两者大小合适即可
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170026880-1539069264.png)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170042802-1971113639.png)
2.任意选中一个视图,我选择view1后,然后点击故事板右下角布局选项,如下所示
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170147802-1331377430.png)
3.设置view1的左边和下边离父视图view边距离为20,并点击添加2项约束后截图
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170200442-1690236494.png)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170209645-232805902.png)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170323708-2015666522.png)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170536411-865892823.png)
4.同样对view2的右边和下边离父视图view边距离为20,并点击添加2项约束
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170413411-1097100491.png)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170423833-39548581.png)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170440224-18743620.png)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170603911-1980402479.png)
5.再选择view1,设置它的高为200
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170645552-466160975.png)
6.选中view1和view2后,选择它们等高等宽
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170724208-1644477262.png)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170841333-2021431107.png)
7.同样选中view1和view2后,给他们添加对齐方式
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170757177-305843073.png)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021170943552-1723038059.png)
8.选择对齐方式那一项,可以看到目前两个视图之间的关系
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021171006255-972785091.png)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021171230489-1277114485.png)
9.重新设置两者之间的关系,即view1的尾边=view2的头边-20
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021171529692-1699686564.png)
10.此时可以看到控件文件中,之前的红色错误箭头没有了,但是出现一个黄色警告箭头标识,选中它出现一个窗口,有两个黄点,需要你更新frame
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021171546567-688969407.png)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021171600786-1132623268.png)
11.依次选择黄点,按照它的提示点击Fix Mispalcement,进行Update Frame,直到没有黄点,此时两个视图布局成功
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021171800130-1452525881.png)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021171811177-1333742348.png)
演示结果:(不支持竖屏)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021172518224-1614826562.png)
Portrait 不支持Upside Down (如果支持,应该前面一样)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021172149755-416364629.png)
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021172159567-831576986.png)
Landscape Left 和 Landscape Right
![](https://images2015.cnblogs.com/blog/791499/201510/791499-20151021172215614-1301353282.png)
采用纯代码添加约束进行布局如下:
//在ViewController.m文件中,除了声明属性,其余所有的代码都在-(void)viewDidLoad{.....}中进行
1.声明两个视图属性
#import "ViewController.h" @interface ViewController () @property (strong,nonatomic)UIView *view1; @property (strong,nonatomic)UIView *view2; @end
2.创建两个视图
//创建view1 self.view1 = [[UIView alloc]init]; self.view1.backgroundColor = [UIColor redColor]; self.view1.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:self.view1]; //创建view2 self.view2 = [[UIView alloc]init]; self.view2.backgroundColor = [UIColor yellowColor]; self.view2.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:self.view2];
3.创建view1和父视图的x坐标之间的约束
//view1的x坐标和父视图的x坐标的关系 NSLayoutConstraint *LCLfet = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeading multiplier:1.0 constant:20];
4.创建view1和父视图的y坐标之间的约束
//view1的y坐标和父视图的y坐标的关系 NSLayoutConstraint *LCBottom = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20];
5.创建view1和view2等宽这个约束
//view1和view2等宽 NSLayoutConstraint *lcEqualWitdth = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view2 attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0];
6.创建view1和view2等高这一个约束
//view1和view2等高 NSLayoutConstraint *lcEqualHeight = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.view1 attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];
7.创建view2和父视图的x坐标之间的约束
//view2的x坐标和父视图的x坐标的关系 NSLayoutConstraint *LCRight = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:-20];
8.创建view2和父视图的y坐标之间的约束
//view2的y坐标和父视图的y坐标的关系 NSLayoutConstraint *LCBottom2 = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-20];
9.创建view1和view2之间水平间距这一个约束
//view1和view2的水平间距 NSLayoutConstraint *lcGap = [NSLayoutConstraint constraintWithItem:self.view2 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:self.view1 attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:20];
10.将前面创建的所有约束添加到父视图中
//在父视图中添加约束 [self.view addConstraints:@[LCLfet,LCBottom,LCRight,LCBottom2,lcEqualHeight,lcEqualWitdth,lcGap]];
11.创建view1自己的固定高度这一个约束
//view1固定的高度 NSLayoutConstraint *lcFixedHeight = [NSLayoutConstraint constraintWithItem:self.view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:200];
12.将view1的高度这个约束添加到自己的视图中
//在view1上添加约束 [self.view1 addConstraint:lcFixedHeight];
演示结果和上面一样,就不截图了.................
练习二:
需求:view1使得它与上方的距离20,左方、右方的距离各为20,高50,view2在view1下方距离20,右边距离父视图20(与view1右对齐),view2的宽度是view1的一半。
实现:
(1)先固定view1,设定左右上的约束并设定高为50.
(2)这个需求的重点是设置view2,首先与view1上方距离20,右边与view1对齐,那么宽度的设置体现了Autolayout的精华
所在。
方案一:先设置view2与view1等宽,之后双击view2的等宽的线,将multiplier的值设为0.5。
![](https://images2015.cnblogs.com/blog/791499/201601/791499-20160127173818457-67997880.png)
方案二:
1)设置view2的居中对齐
1)设置view2的居中对齐
![](https://images2015.cnblogs.com/blog/791499/201601/791499-20160127173943770-2077159790.png)
2)修改SecondItem中的属性为Leading,这样我们就实现了需求中所要的效果
![](https://images2015.cnblogs.com/blog/791499/201601/791499-20160127174033192-315684884.png)
AutoLayout核心公式
第一个Item的属性
=(<=
/>=
)第二个Item的属性
*Multiplier
+Constant
这就是Autolayout的精华所在.
属性说明:
- Leading Edges:左对齐
- Trailing Edges:右对齐
- Top Edges:上对齐
- Bottom Edges:下对齐
- Horizontal Centers:水平中心对齐
- Vertical Centers:竖向中心对齐
- Baselines:基线对齐
- Horizontal Center in Container:对齐容器中的水平中心
- Vertical Center in Container:对齐容器中的竖向中心
警告与报错
警告
:一般是黄色的,一般是由于我们当前所设的约束与当前视图的位置不符。报错
:红色的警告一般是由于约束错误造成的,这种警告工程中一定要消除。
总结
- Autoresizing:
已经是比较过时的设置适配方法了,而且有很大的缺陷,只能设置父子控件之间的约束,不能设置兄弟控件之间的约束。所以在这里我们最好不要再开发中应用。 - AutoLayout:
最流行的适配方式,苹果积极推荐,非常强大好用的适配方法。对提升开发中的效率有很大的帮助。
程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!