XIB约束控件

废话不多说,直接进入主题.下面有说的不对的地方还请广大读者们指正一下,谢谢!!!! 

对于这三个控件之间的约束

控件1的约束:

①控件1的顶部top 距父视图 顶部 为 64 

② 控件1的左右都是和父视图对其的

③控件1的高度为30 

1.png

只需要这么做就可以搞定

一. 选中需要添加约束的控件1,之后再点击下方的 Add New Constraints

添加约束1.png

二. 添加约束 

 约束添加之后,记得点击最下方的 Add xx Constraints 这样约束才算添加成功,控件1我们添加了 top 64 left 0 right 0 height 30 这四个约束,  所以对下方显示的是 Add 4 constraints

依次将距离top 64  lfet 0 right 0添加上去, 需要注意的是 添加成功的对应项的下面都会有对应的红线.  还有一点需要注意的就是: Constrain to margins 这个选项你要是选中的话你最终实现的效果和你设置的有点误差.

我们设置的距left 距 right 都为 0 ,但是你要是把这个选项选中, 实际的效果将如图 Constrain to margins.png所示. 我们可以在左边红色区域内看到我们约束的左边距离也是 0

添加约束2.png Constrain to margins.png

三. 更新约束

更新约束.png

这样控件1的约束就大功告成了.

控件2 的约束:

①控件2的 top 距控件1 bottom 为 100

② 控件2 的CenterX和父视图的CenterX 相同

③控件2的高度为30,宽度为 100

注意:  我们点击下方的 Add New Constraints添加约束的时候,   默认是 相对我们选中的控件最近 的一个控件 进行约束的...我们对控件2添加约束的时候,,,,top 就是相对 控件1 bottom的距离来算的,,,left right 还是相对父视图来计算的.

top & width & height.png CcenterX.png

这样控件2的约束就添加完成了. 小伙伴们最后千万不忘记了点击最下方的 " Add xx Constraints" 

最后我们在更新一下就👌啦

控件3的约束:

①控件3的 top 距控件1 bottom 为 230

② 控件3 的CenterX和控件1 的CenterX 相同

③控件3的width  height 和控件1 都是相同的. 

对于上面所说的那种直接通过点击底部的  "Add New Constraints" 这个此时是行不通的了..因为通过这种方式添加的约束都是 相对我们选中控件 最近的 一个 控件和 计算的,,, 此时我们如果依旧按照上面所说的那种方式添加 top = 230 最终的效果会是这样的

效果图.png

其实我们在添加约束以后我们就可以看到... top默认的就是相对控件2来算的, 如图3.png所示:

3.png

所以这种方式是不可以的,我们可以采用下面的这种方式来继续添加

一. 选中控件3 , 按着 Ctrl建不放 , 这样就可以拉线了... 我们把线拉到控件1 上,控件1 的颜色变成了蓝色, 这就表示选中了,此时就可以松开, 出现的效果如下图所示, 

控件3约束1.png 控件3约束2.png

如果要是显示的效果如 图 "控件3约束1.png" 所示, 可以将线往 控件1  的中间位置... 或者两边位置 试试... 这个我也木有搞懂到底怎么回事???? 如果有知道的,麻烦指导下.......😝😝😝

约束添加完以后, 每个位置前都有一个小点点....效果如下图所示:

控件3约束3.png

注意:

我们在这里添加约束的时候,top 默认是 控件3 的 top 相对 控件1 的 top  ,我们需要的是 控件3的 top 距控件1 bottom 为 230,,,,所以我们应该手动改下就可以了如下图所示:

这里更改我们需要的对其方式, 以及参数.

最后设置完约束以后.再update frame 就👌啦,最后看下效果图:

效果.png

如果鄙人有什么说的不对的地方还请小伙伴们,,,速速提出来!!!!