Auto Layout

做过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)