iOS开发之AutoLayout中占位视图布局

先不扯闲话了，首先我们有这样的一个需求：

• 这个页面有四个需要自适应位置的控件
• 控件的height、width及left和right边距是固定的
• 对Bottom以及Top是需要自适应的。

具体效果如下图：

竖屏效果

Snip20150630_2.png

横屏效果：

Snip20150630_1.png

到了这里我们好像隐隐的明白我们需要要哪些事情了。好，那么我们先理顺下思路：

• 控件的宽高及边距已经能够确定
• 控件的暂时无法确定与其他控件或者父控件有其他的联系。

基于以后我们发现如果单纯的只要这四个控件与父控件进行位置的相对关联是无法做到的，所以如果想要达到我们想要的效果，还需要一些最基础的辅助控件。虽然这些控件在功能上没有什么作用，但是能够帮助我们确定控件的位置，来自适应屏幕，这也是它们最大的作用了吧。

如图：

Snip20150630_3.png

好了，废话说了这里。那么我们下面就该开始干活了哈

• 第一：添加控件
• 我们要往控制器上添加四个按钮控件，以及3个占位视图，然后摆成自己想要的样子（这还是废话。。。）而我们暂时也只需要操作这些就足够了。
• 如图：

Snip20150630_5.png

• 第二：给控件添加约束
  • 对要根据我们的需求给一号及二号控件添加约束

Snip20150630_9.png

- `注意`添加约束的时候一定要`点掉Constranin to margins`，否则约束可能会添加错误。

• 第三：分别给三个占位视图添加约束
  • 分别给三个视图添加以下三个已知约束，width可随意定义但是建议不要过小

Snip20150630_12.png Snip20150630_15.png Snip20150630_16.png

    - `注意`一号视图能够确定的是`tap`及`left`,二号能够确定的是`left`而三号则是`Bottom`和`left`。

• 分别将三个视图设为等高
  -从一号视图按住control拖向二号视图设置等高，三号设置同上

Snip20150630_17.png

• 分别设置三个视图之间的关联

• 将一号视图的bottom与二号视图的Tap相关联其数值与控件的height相同。二号与三号视图以此类推。
  Snip20150630_18.png

Snip20150630_20.png

• 第四：至此三个占位视图的位置已经确定了，就可以可以来处理控件与视图的管理了。
  • 首先回忆一下，上面我们已经对控件设置过了height、width以及left,所以这次我们只需要处理控件与上下的占位视图的关系就足够了。

Snip20150630_21.png

- `注意`无论是top还是bottom都需要是上面或下面的占位视图相关联。

• 做到这里左边的布局已经完成了，那么就让我们做下右边的布局吧。
• 首先分析下右边的控件布局需要的约束分别为:width、height、right以及与右边控件的centetY。操作如图：

 Snip20150630_24.png

• 好，到了这里基本上就大功告成了，现在就可以更新下约束是运行一下享受下成功的喜悦了。当然了如果你运行的时候发现两边控件的高度不一致的话可以去修改

Snip20150630_25.png

当然了我也不会告诉你，把占位图片的颜色修改为Clear color就能把占位控件隐藏滴。哈哈

最后还是运行下吧

20.gif

在iOS6以来，Autolayout变的越来越成熟，虽然还是存在很多让人吐槽的地方，但是随着苹果的不断的改进自动布局也会变的越来越好用。就像上面这个例子，有很多朋友说用frame很快就能搞定了。不过我觉得AutoLayout的布局和frame的计算在逻辑上是一样的，并且省略了大量的代码及计算。虽然在很多项目中还没有使用AutoLayout,不过随着iPhone手机屏幕的多样化及Autolayout的不断成熟，使用它的人肯定会越来越多的。当然了，如果有时间的话我也会试着用一个非常好用的第三方框架Masonry来对这个或者其他的新例子进行编码布局的。咱们回见！