［拉线魔法］xib自动布局与代码修改布局

自动布局在没有上手的时候是一个大坑，上手了你就会发现，代码少的可怕。

最近在工作中遇到遇到一些需求，要将原来纯代码搭建的页面改为用xib来搭建，用到了很多自动布局的内容，这里来记录一下，在这篇文章中将提到：

1.通过手势技巧来设置自动布局；
2.通过手势技巧来将布局约束放到到代码中；
3.通过代码来动态调节布局约束；

1.通过手势来设置自动布局

平时大家一定是这样来设置布局参数的

那么现在来推荐一种更酷的布局方式，拉线布局,也许你已经知道了，那么可以跳过这一节

如图，按住Control键，从要设定布局的控件开始按住鼠标或触摸板，拖动到布局的参考控件上，如下图

Control+鼠标拖动

这时放开鼠标，就会出现一个菜单，点击对应项即可生成约束，这样相比上面的方法而言省出了不少事儿。当然你也可以拖动完成后，在右边的状态栏里对布局参数进行修改。

拖动方向不同出现的菜单也不同，Xcode会根据拉线的角度产生对应的布局菜单。例如水平拉线则会出现“水平距离”约束选项，垂直拉线则会产生“垂直距离”选项。

水平拉线菜单

2、3.通过手势来将布局约束放进代码里并通过代码修改

在以往的使用中，你一定知道怎么将控件放进代码里进行修改，那么，也许你不知道，其实布局约束也可以这么玩儿。

2543C3FC-3675-437C-80B6-D7A189D4DFA1.png

如图所示，我们对蓝色UIView控件设置了布局

约束	参数
高	181
宽	129
左侧距View边距	15
顶部距View边距	18

同时对红色UIView控件也进行了布局

约束	参数
高	186
宽	127
左侧与蓝色对齐	0
顶部与蓝色间距	25

再添加一个Button,当Button按下时希望红色view与蓝色view的间距为0，即贴在一块儿。但我们知道在自动布局下，无法通过修改view.frame属性来很好的移动控件位置，那么这时候我们就需要来修改布局约束。

那么，还是一样，从约束开始向对应的类里拉线！

拉线！创建约束对象！

起个名字，那么这样一个约束就建成了

创建名为topOfRedView的约束与xib中的关联

通过在button中修改该约束的constant属性来动态修改约束值，

button方法

那么运行起来后，点击button就可以动态改变视图的约束了

点击button图片接触，再次点击分离

欢迎评论区批评指正撕逼约饭，
顺便一说两个View的宽度不一样我就是不改逼死强迫症。