iOS界面布局之二——初识autolayout布局模型

iOS界面布局之二——初识autolayout布局模型

1、引言

     在上一篇博客中介绍了传统的布局方式：autoresizing。随着iphone型号的愈来愈多，屏幕的标准也更加多样化，经过autoresizing已经不能知足开发的需求，而进行两套布局或者动态代码控制又大大增长了开发者的工做量，autolayout的出现拯救个这一切，它让动态布局变的十分简单便捷。

    autoresizing介绍：http://my.oschina.net/u/2340880/blog/423357。

2、autolayout的设计思想

    正如storyboard的设计目的是为了让开发者将更多的精力投入到逻辑实现而不是界面布局同样。autolayout的设计思想是让开发者将布局上更多的精力放在控件关系上而不是坐标。咱们只须要关心控件之间的摆放关系，而并不须要关心这是如何实现的。所以你使用autolayout进行布局时，就是在添加一个一个的约束。控件与控件之间的约束，控件与父视图之间的约束。

一、了解几种约束

    点击xcode的storyboard文件，在xcode的导航栏上点击Edito，而后选择Pin，能够看到如图，其中是能够添加的约束类型。

Width：对视图宽度的约束

Height：对视图高度的约束

Horizontal Spacing：对视图间水平距离的约束

Vertical Spacing：对视图间垂直距离的约束

Leading Space to Superview：与父视图左边界的约束

Trailing Space to Superview：与父视图右边界的约束

Top Space to Superview：与父视图上边界的约束

Bottom Space to Superview：与父视图下边界的约束

Widehs Equally：视图等宽约束

Heights Equally：视图等高约束

二、网上的一个很简单的约束例子

    了解了上面的几种约束，如今咱们来实现一个效果，借用网上关于autolayout自动布局的一个小例子。咱们在storyboard中拖入三个label，使它们以下效果：

而后咱们将屏幕横过来，会发现这时的效果并非咱们想获得的结果：

在进行添加约束以前，咱们先来理清这三个视图之间的关系，将上面两个视图编号为1.2，下面那个视图编号为3.

（1）1和2的宽和高相等

（2）1距离父视图左边20px

（3）2距离父视图右边20px

（4）3距离父视图左边20px，右边20px

（5）1和2水平间距20px

（6）1与3垂直间距20px

（7）1和2距离父视图上边距50px

（8）3距离父视图下边距20px

（9）3与1和2的高度同样

经过上面的约束，全部视图的位置都将被相对的固定，下面咱们只须要按照顺序一一添加便可。

（1）选中1和2视图（按住cmd键能够多选），而后点击Editor->Pin以后选择Widehs Equally，重复上面的过程，选择Heights Equally。咱们会看到以下的效果：

几点注意：

*线是橙色表明警告，咱们没有添加足够的约束来肯定位置或者约束有矛盾。

*若是线的中间显示的不是等号，而是数字，则是由于视图1和2的尺寸设置的不等，约束有矛盾。

（2）选中1.重复上面步骤，选择Leading Space to Superview。这时1的左边又会增长一条线：

点击这条线，在右边的设置去将约束值设置为20：

（3）重复上面步骤，选中视图2，添加Trailing Space to Superview约束。

（4）选中视图3，重复上面步骤。

（5）选中1和2，添加Horizontal Spacing，设置为20.

（6）选中1和3，添加Vertical Spacing，设置为20.

（7）为1和2分别添加Top Space to Superview约束。

（8）为3添加Bottom Space to Superview约束。

（9）选中1和3，添加Heights Equally约束。

上面的过程虽然繁琐，可是逻辑性十分清晰，这时你会发现全部的线都变成了蓝色，约束已经添加完整，咱们再次运行后横屏，效果以下：

这就是咱们想要的结果了。

三、自动布局的几种对其方式

    在xcode导航的Editor菜单中，还有一个子菜单，Align，这里面的选项能够为控件添加对其约束：

Left Edges：控件左对齐

Right Edges：控件右对齐

Top Edges：控件上对齐

Bottom Edges：控件下对齐

Horizontal Centers：控件水平中心对齐

Vertical Centers：控件垂直水平对齐

Horizontal Center in Container：控件与其父视图水平中心对齐

Vertical Center in Container：控件与其父视图垂直中心对齐

3、几点小感悟

     到此为止，基本上已经可使用autolayout自动布局解决复杂的布局需求了，可是切记，正式由于aotulayout的强大使它会隐藏更多的坑，下面是个人几点感悟，再次分享：

一、autolayout的精髓在于足够多的约束，autolayout之因此比autoresizing强大，就在于其布局的精确性，而精确性正是由约束来提供的。

二、切莫多此一举，矛盾的约束会使xcode晕掉，因此在添加约束前，我建议将试图间的布局关系先整理出来。

三、应该转变你的思路，若是你已经习惯了使用CGRect、Point等传统的坐标布局模式，那么你应该稍微转变一下，autolayout倡导的是一个相对的概念，你须要将更多的关注放在视图间的关系，好比A和B距离10，A和C右对齐等。具体的坐标会有autolayout帮你算。

专一技术，热爱生活，交流技术，也作朋友。

——珲少 QQ群：203317592