AutoLayout在iOS6和Xcode5中的应用

做过Android应该都知道相对布局这个概念，一个控件以另一个控件为参照进行布局，那么即使屏幕变化，布局也会随着进行微调，以达到良好的视觉效果并且保持了代码的可拓展性。

随着iPhone5 的面世，iPhone的屏幕比例也失调了。今年的WWDC就有了iOS的新特性auto layout，当然这个自己也还在学习当中。这里就把自己这几天的收获记录下…..

首先讲讲auto Layout在xib中的应用，这里有两篇raywenderlich网站的帖子讲的非常好，讲得很透彻，本人跟着步骤一步一步做下来已经大概明白auto layout 的一个思路了，很有启发性，建议大家先看，如果有xcode 4.5的话，最好跟着练一下。

part1
part2

再者，本人的习惯，UI基本都是用代码敲出来的。然而，自动布局用到纯代码上，就没有原来那么方便，但是逻辑上还是很好理解的。苹果的文档是一定要看的。其实自动布局，在Mac上去年就已经开始用了，官方有3个Demo，虽然是os x的代码，但是原理是一样的，可以好好研究。

个人觉得，之前界面思路是固定的，因为屏幕的比例是固定的，每个UI都可以有自己确定的坐标和大小，虽然之前的也有autoresizing但是还是有局限性的，然后对于横竖的UI布局，要么另匹配代码，要么就是另用一个xib，毕竟也不是很方便。

自动布局就很好的解决了上述问题。

好了下面我们来看下自动布局，


如图，我们之前布局一个button的话，肯定先指定的它的frame。有经验的程序员，会尽量不把代码写死，可能会参照屏幕的frame或是当前界面的frame，按照一定比例取frame值。所以一个button，在坐标系中，坐标确定了，位置也就确定。因为前5代iPhone屏幕比例是一样的，所以这也不会带来问题。但是iPhone5出来了，需要做些调整了。auto layout去布局的时候，首先我们要选择一个参照对象，根据参照对象设置参照值，根据参照对象和参照值就可以知道自己的位置了。就如上图的button，我们知道，button距离屏幕的左边缘的间距和上边缘的间距就可以的确定button的位置了，autolayout还有一个独特的地方，就是UI可以根据字体大小和字数自动计算大小，当然你也可以自己指定大小。这样button在屏幕的相对位置就不变了，不管是横屏还是竖屏。

当然这里优势还并不明显，那么当有两个button时呢？我们在看下下图。这里第二button以第一button为参照，进行布局。以此类推。
  


但是我为什么要用自动布局呢？看下下面这个图。


以你的经验，代码量会是多少？或是是不是要再加一个xib？
我们知道，如果界面整体的布局是确定的，就如图所示，那么很适合进行自动布局，因为相对位置确定了，相对关系确定了，尺寸和位置系统会自动给我们计算出来，所以这里只要一套代码或是一个xib就可以很好的适用任何一个屏幕（可能有点绝对）。

其实,auto layout 的关键就是关系的确定，要十分确定，如果是个模棱两可的关系，很多时候系统是会迷糊会报错，即使有时候绘制出来了，也会丢给你一大堆它不确定的警告。所以构建的时候要想好布局，选好合适的参照对象，最后保证语法没有错误，那么一个效果良好的布局会就实现了。

这里再给大家介绍下语法，这个呢apple文档里有，我这里算是摘抄下


所以这些语法，一但熟悉了逻辑还是比较清晰的。

最后奉上一小片段代码，帮助理解下纯代码的写法,请用xcode 4.5打开。

AutoLayout.zip (31 K)

Xcode5 xib设置autolayout方式:

列表1:

(选择两个view时可设置)

左边对齐, 

右边对齐, 

顶部对齐, 

底部对齐, 

x轴中心对齐, 

y轴中心对齐, 

文本底标线对齐, 

 

(单选择一个view时可设置)

对于父view的x轴中心对齐, 

对于父view的y轴中心对齐, 

 

(选择框)

添加完约束后不进行任何操作,

在添加约束后重新摆放约束涉及到的view,

在添加约束后重新摆放所有这个容器内的view

 

确定按钮, 选择完上面的项目后点击添加约束

  

上面的十字是"与最近的邻居的约束", 填上数字, 单击虚线变成实线就是要添加这个约束.

这里的"邻居"是将一个包含子view的父view看做一个装了一堆积木的盒子, 积木相对于盒子的边框和其他的积木都作为"邻居"

 

(定义的宽高数据约束)

宽度指定,

高度指定,

 

(定义多个view之间的宽高约束)

宽度相同,

高度相同,

 

(列表, 多个view之间的对齐约束, 等同于前一菜单的内容)

 

(列表, frame更新方式, 等同于前一菜单)

(确定按钮, 设置约束后点击添加)

 

(上半部分菜单的操作对象是当前选中的view, 下半部分的操作对象是选中view内的view)

刷新frame(使用当前已经设置的所有约束),

刷新约束(根据当前的约束和frame, 更新约束的constant值),

添加缺失的约束(自动添加系统认为你应该添加却忘记添加的约束, 测试中经常搞出冲突)

重置为系统建议的约束(清理系统认为重复/冲突的约束, 测试中经常搞出问题)

清理所有约束(删除对象上绑定的所有约束)

 

(在添加约束的时候, 刷新哪些视图)

同级view和父view

子view

 

问题:

 

约束和约束之间会冲突, 无论是xib和xib, xib和代码, 代码和代码.

约束的冲突一般在特定情况下才会报, 比如竖屏没问题但是横屏出现冲突, 也可能xib拖错上来就冲突之类.

约束冲突系统自动会解决, 通常依靠的是权级, 但是由于一般情况使用无法确定某一约束应该处于什么权级, 所以很难设置正确的权级以应对冲突.

约束的冲突, 在系统自动解决时可能相同情况出现不同的处理, 导致某些不能每次都重现的问题.

约束冲突, debug连调时会出现错误log, 可以根据log查找解决冲突.

约束冲突, 在ios6上未见crash, 在ios7上偶发crash.

 

xib和代码的取舍:

 

autolayout现在已经不是"用不用"的问题, 而是"怎么用"的问题, 底层框架貌似已经完全删除了autoresizemask, 而是自动将autoresizemask转换为auto layout 也 就是说, 这种情况下可以使用原来的autoresizemask, 但是系统还是将他们拿来当autolayout使的, 使用过程中自动转换的constraint同样会遭遇冲突, 冲突导致的问题更加诡异而不好处理

现在我经常碰到的就是, 比如一个控件, 它和它的父view之间使用的autolayout是用代码指定的, 我可以确定constraint的形式, 但是在实现它的时候为了方便使用了xib处理其内部的view, xib上拖放constraint由于比较复杂而我尚未明晰, 会在某些特定的情况下出现constraint冲突, 系统自动处理冲突时会将权级较低的constraint放弃, 而由于无法明确每一条constraint应该处于什么权级, 经常会出现偶发问题(如竖屏情况下constraint之间没有问题, 横屏过来之后就发现某个控件内的某个label上不小心没有删除指定宽度的constraint, 导致变形的控件和控件内label的constraint冲突, 然后引发一系列的连锁反应)

当然, 使用xib定义viewcontroller同样要接触到constraint, 而且每一个都需要管理和指定(默认constraint经常会导致冲突)