随着iPhone6与iOS8的临近,适配的问题讲更加复杂,最近学习了一下Auto
Layout的使用,与大家分享。
什么是Auto Layout?
Auto Layout是iOS6发布后引入的一个全新的布局特性,其目的是弥补以往Autoresizing在布局方面的不足之处,以及未来面对更多尺寸适配时界面布局可以更好的适应。
为什么要用Auto Layout?
Autolayout能解决不同屏幕(iPhone4,iPhone5,iPad...)之间的适配问题。
在iPhone4时代开发者只需要适配一种屏幕尺寸,相比与Android阵营的相对布局,iOS开发者们最长用的做法是使用绝对布局,坐标和大小只要写死就ok了。随后iPhone5出了,对于两种屏幕尺寸,就需要考虑一个新的问题,屏幕适配。苹果其实很早就考虑到了这一点Autoresizing技术,诚然Autoresizing有所不足,苹果在iOS6发布后引入了Autolayout特性,适应更广泛场景下的布局需求。当然了iPhone5由于和iPhone4在屏幕宽度上一致,即便不用上这些技术适配起来也不麻烦(笔者再之前也只用到了Autoresizing),不过在iPhone6即将推出,即将面临更复杂的屏幕适配时,Auto
Layout能帮助我们很好地解决这个问题,此外也能解决横屏竖屏切换,iPad的适配问题。
如何使用Auto Layout?
Auto Layout的基本概念
Auto Layout的核心是约束(constraint),通过对view的约束(view的大小,view与view之间的关系)使得view能够自己计算出尺寸和坐标。
Visual Format Language,在AutoLayout中使用的形象描述约束的一种语言规则。
Auto Layout的使用还是比较复杂的,一开始用可能会感觉云里雾里的,用的多了习惯VFL的写法之后就会感觉到它的方便了。
Auto Layout的基础理论:
al的核心出发点是:
1.view具有自我计算尺寸,布局的能力。通过它自身的内容,能够得到尺寸。
2.view的布局位置,确定于它与superview及其他view的关系。
3.与传统的autoresizingmask自适应相比,al更精确,能绝对的确定view的布局。
4.view不一定需要一个初始的rect。al中,view如果有足够的constraint,便可以确定自己的尺寸和位置,并且知道自己和其他view的关系。即,想确定view的布局,就给它(们)添加constraint。
Visual Format Language (应该不算语言)
Apple的工程师很有爱,发明了这种哭笑不得的象形文字。感觉它就是种解析方式。
使用 Visual Format Language
定义水平和垂直约束,Visual Format Language
可视格式语言,用来描述约束条件,这种语言是对视觉描述的一种抽象,大概过程看起来是这样的:
[NSLayoutConstraint constraintsWithVisualFormat:
options:metrics:
views:
];
constraintsWithVisualFormat:参数为NSString型,指定Contsraint的属性,是垂直方向的限定还是水平方向的限定,参数定义一般如下:
V:|-(>=XXX) :表示垂直方向上相对于SuperView大于、等于、小于某个距离
若是要定义水平方向,则将V:改成H:即可
在接着后面-[]中括号里面对当前的View/控件 的高度/宽度进行设定;
options:字典类型的值;这里的值一般在系统定义的一个enum里面选取
metrics:nil;一般为nil ,参数类型为NSDictionary,从外部传入 //衡量标准
views:就是上面所加入到NSDictionary中的绑定的View
在这里要注意的是 AddConstraints 和 AddConstraint 之间的区别,一个添加的参数是NSArray,一个是NSLayoutConstraint
使用规则
| : 表示父视图
- :表示距离
V: :表示垂直
H: :表示水平
>= :表示视图间距、宽度和高度必须大于或等于某个值
<= :表示视图间距、宽度和高度必须小宇或等于某个值
== :表示视图间距、宽度或者高度必须等于某个值
@ :>=、<=、== 限制 最大为
1000
1.|-[view]-|: 视图处在父视图的左右边缘内
2.|-[view] : 视图处在父视图的左边缘
3.|[view] : 视图和父视图左边对齐
4.-[view]- : 设置视图的宽度高度
5.|-30.0-[view]-30.0-|: 表示离父视图 左右间距 30
6.[view(200.0)] : 表示视图宽度为 200.0
7.|-[view(view1)]-[view1]-|:表示视图宽度一样,并且在父视图左右边缘内
8. V:[view(50.0)] : 视图高度为 50
9:V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示离父视图的距离
为Padding,这两个视图间距必须大于或等于0并且距离底部父视图为 padding。
10: [wideView(>[email protected])] :视图的宽度为至少为60 不能超过 700
,最大为1000
11: 如果没有声明方向默认为水平 H: