IOS autolayout自动布局实例（swift）

第四篇
对于一个新手来说，刚接触自动布局这东西，会被一种叫约束的东西搞得晕头转向，不是少添加了，就是多添加了，造成约束冲突，不过弄明白之后，也就那回事了。
首先先上个最终的效果图上来，一步步做出这个效果，如果里面没有涉及到知识点就从网上各们大大的文章里找了。
上图：

此效果图分为上中下三部分，上部分由一个uiimageview和他上面两个uiview组成，图片上面的两个uiview透明度为70%，中间一个uivew里面放置一个uilabel显示标题，下部分是两个等宽的按钮组成。

在布局之前先要了解下自动布局的各个属性代表的意义，布局时才能做到得心应手。

首先，先来单个控件的相关属性介绍：

在xcode可视化界面右下角有上图三个按钮，第一个多以多个控件及父控件与子控件之间的属性设置为主，第二个多以单个控件属性设置为主，其中也有多个控件属性的设置，到时一步步说明下，第三个按钮，里面有清除约束，重置约束，其中清除约束常用哦。其中以我用到的为主，毕竟自己技术还很菜，不敢下结论。

1. 上图中最上面的四个方框，估计大家都猜到是什么了，就是上下左右的边距的设置，不过要注意他是距离父元素还是兄弟元素，再下方的复选框constrain to margins，都不选中吧，选中他会保留默认的边距在里面，不注意调整的时候就蛋疼了。个人建议，不好区分父元素还是兄弟元素时，直接选中控件，按住control键往不到方向拉动到目标元素上，再选择是水平还是垂直距离就行了。
2. 上图中间部分width和height，就是他字面意思了，高度与宽度，选中了控件的高度和宽度相应的就设置死了，自动布局不要轻易固定宽高，除非你明确知道他的宽高，一般本人喜欢设置uilabel,uitextfield,uibutton的高度，个人感觉影响不大。
3. 上图下部分，equal Widths, equal Heights，aspect Ratio 都是对应比例来设置的，其中equal Widths, equal Heights是对应两个控件的，设置他们的宽度与高度的比例，可是父元素和子元素也可以是兄弟元素，实例中再演示，另外aspect Ration 是对控件本身来说，设置自身的宽高比例的。
4. 下一个属性 Align就是对齐属性，总共就几个选择项，都是见名知义的，自己测试下就知道了。

5. 最后一个属性 update Frames设置更新控件fram的选项，总共三个选项，不更新，更新其中有新约束的items，更新container里全部的frams，本人喜欢默认选项none, 手动更新，那里有错点那里。

   理解这些属性再来调布局就简单了。来个小实例：

1.

在xcode上选择文件->new->file->user interface(ios)->View->create,创建好一个xib文件，然后改变图中红键头的地方，否则不能指定view的宽高，而且有状态栏标志。

2、拖一个uiview放在刚新建的uiview里，然后选中他，点击右下角中间的按钮，弹出如下图所示，然后设置他距父元素的四边的边距为0,然后点击最下方的 Add Constraints按钮约束就添加上去了。

添加完成后，右上角出现黄色感叹号，接下来更新约束就行了：

3.接下来添加一个uiimageview控件，设置他与父元素的宽高比，自身宽高比与固定宽高属性一样的逻辑，在此不一一列举了。

接下来打开属性设置面板，右下角第二个，选中equal Widths和 equal Heights. 点击Ａdd Constraints添加约束

设置比例，下图是宽的比例，高的比例一样的设置，注意其中的键头第一与第二，那决定比例谁在前，还有常量那项，一般是为0,这里面有个公式为：view1.width = multiplier * view2.width + constant, 其中的width泛指属性。

高度比例一样的步骤。

4.右上角出现了红色键头，那是因为约束不够导致的，现在宽度有了，高度有了，只要再指定他的x,y坐标就完美了，x,y就是他的左边距与上边距，直接来图了。

5.更新约束，左上角黄色感叹号，点击点击然后Ｆix Misplacement完成了，最后效果图：

自动布局还有下图属性未说明了，下篇接着来了解决了，里面的属性大大的有用啊，上个图结个尾：