目录:
- Autolayout的演变简介
- 什么是Autolayout
- Autoresizing介绍
- Autolayout的警告和错误
- 过程介绍
一、Autolayout的演变简介
在以前的iOS程序中,是如何设置布局UI界面的?
MagicNumber -> autoresizingMask -> autolayout
iphone1-iphone3gs时代 window的size固定为(320,480) 我们只需要简单计算一下相对位置就好了
iphone4-iphone4s时代 苹果推出了retina屏 但是给了码农们非常大的福利:window的size不变
iPad这时AutoresizingMask派上了用场(为什么不用Autolayout? 因为还要支持ios5)
iphone6+时代 window的width也发生了变化(相对5和5s的屏幕比例没有变化) 终于是时候抛弃AutoresizingMask改用Autolayout了(1.不用支持ios5了 2. 相对于屏幕适配的多样性来说autoresizingMask也已经过时了)
直到iphone6发布之后 我知道使用Autolayout势在必行了
二、什么是Autolayout
- Autolayout是一种“自动布局”技术,专门用来布局UI界面的
- Autolayout自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广
- 自iOS 7(Xcode 5)开始,Autolayout的开发效率得到很大的提升
- 苹果官方也推荐开发者尽量使用Autolayout来布局UI界面 Autolayout能很轻松地解决屏幕适配的问题
三、Autoresizing介绍
- 在Autolayout之前,有Autoresizing可以作屏幕适配,但局限性较大,有些任务根本无法完成(勾选掉autolayout,可以进行autoresizing的实验)
- 相比之下,Autolayout的功能比Autoresizing强大很多
- Autolayout的2个核心概念
- 参照
- 约束
四、Autolayout的警告和错误
警告
控件的frame不匹配所添加的约束, 比如 比如约束控件的宽度为100, 而控件现在的宽度是110
错误
缺乏必要的约束, 比如 只约束了宽度和高度, 没有约束具体的位置 两个约束冲突, 比如 1个约束控件的宽度为100, 1个约束控件的宽度为110
五、过程介绍
1.勾选autolayout,去掉sizeClass,不然容易弄混
2.假设现在我要将一个视图放到左上角
步骤:
1.storyboard中拖一个视图
2.点击如图1第3个按钮按钮,弹出如下界面如图2
如图1:
如图2:
3.去掉constrain to margins:这个的功能会让你的左边-16,防止万一屏幕很大,让你的视图往中间靠,不然后面可能会留很大的空白,但现在我是要让他x,y都是0,所以去掉
4.选中左右两个红色的虚线,然后填充它距离左边和上边的位置。
5.勾选width,height,并填充数值,然后添加约束。
6.如果报警告,直接点击警告让系统帮我们修改
注意:
1.如果你只添加了坐标,没有添加长和宽的约束,系统会报错,因为一个视图的位置需要这四个来固定。
改错:继续添加长宽约束,注意不要在添加坐标,会发生冲突。因为autolayout它既可以相对父视图,也可以相对子视图。