xib 约束

自我勉励

很久以前，就有写一篇关于xib布局约束的文章的想法，但总是拖拖拉拉，时至今日仍不能提笔，可惜可叹！
项目中也有用xib 开发，但是有些细节很容易忘记或者过一段时间就忘记了一些约束的方法，今日则想把知识重新回顾一下，方便各位同行也方便自己,以此勉励自己，希望有所收获

一、 约束的常识

下面介绍有哪些约束：

• *添加新的对齐约束
  

Leading Edges：左对齐

Trailing Edges：右对齐

Top Edges：顶部对齐

Bottom Edges：底部对齐

Horizontal Centers：垂直中心线对齐

Vertrical Centers：水平中心对齐

Baselines：基线对齐

Horizontally in container：和父视图的垂直中心线对齐

Verically in Container ：和父视图的水平中心线对齐

update Frames：约束添加完成后刷新当前的可视化文件，方便开发人员看到效果。我们也可用快捷键’alt’ + ’command’ + ‘=‘来快速的操作。

• *添加新的约束

width：设置控件的宽度。

height：设置控件的高度。

equal widths：等宽【有参照物】

equal heights： 等高【有参照物】

aspect Ratio ：宽高比【当前控件】

二、 简单的约束布局

• 简单布局一：view宽高自适应
  1）上下左右分别距离边框100

约束如下： 分别设置距上、距下、距左、距右 距离100即可

如图：

2）宽高固定，100 * 100，剧中显示

约束如下：
2.1）分别设置width = 100、height = 100 固定宽与高

2.2）然后在设置剧中【水平剧中，垂直居中】

如图：

3）两个控件等高等宽
效果图如下：

约束如下：
3.1）先固定一个控件(约束布局01)的【上距离安全区域200，左边距离安全区域50，高度与高度固定 = 100】

3.2）然后以固定的控件为参考
约束如下：
第一步：设置等高等宽

第二步：确定（约束布局02）控件的位置【我们以距离左边边控件（约束布局01）50像素，这样可以确定该控件的左右位置，然后再来确定上下位置，我们以该控件在左边控件垂直中心】

查看约束的时候，我们看到 leading space to 为62，说明距离控件（约束布局01）距离大于我们规定的50像素，则需要手动设置【点击 Edit，把62 改为50即可】

最后固定上下位置【如下图】