废话不多说,直接进入主题.下面有说的不对的地方还请广大读者们指正一下,谢谢!!!!
对于这三个控件之间的约束
控件1的约束:
①控件1的顶部top 距父视图 顶部 为 64
② 控件1的左右都是和父视图对其的
③控件1的高度为30
只需要这么做就可以搞定
一. 选中需要添加约束的控件1,之后再点击下方的 Add New Constraints
二. 添加约束
约束添加之后,记得点击最下方的 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
三. 更新约束
这样控件1的约束就大功告成了.
控件2 的约束:
①控件2的 top 距控件1 bottom 为 100
② 控件2 的CenterX和父视图的CenterX 相同
③控件2的高度为30,宽度为 100
注意: 我们点击下方的 Add New Constraints添加约束的时候, 默认是 相对我们选中的控件最近 的一个控件 进行约束的...我们对控件2添加约束的时候,,,,top 就是相对 控件1 bottom的距离来算的,,,left right 还是相对父视图来计算的.
这样控件2的约束就添加完成了. 小伙伴们最后千万不忘记了点击最下方的 " Add xx Constraints"
最后我们在更新一下就👌啦
控件3的约束:
①控件3的 top 距控件1 bottom 为 230
② 控件3 的CenterX和控件1 的CenterX 相同
③控件3的width height 和控件1 都是相同的.
对于上面所说的那种直接通过点击底部的 "Add New Constraints" 这个此时是行不通的了..因为通过这种方式添加的约束都是 相对我们选中控件 最近的 一个 控件和 计算的,,, 此时我们如果依旧按照上面所说的那种方式添加 top = 230 最终的效果会是这样的
其实我们在添加约束以后我们就可以看到... top默认的就是相对控件2来算的, 如图3.png所示:
所以这种方式是不可以的,我们可以采用下面的这种方式来继续添加
一. 选中控件3 , 按着 Ctrl建不放 , 这样就可以拉线了... 我们把线拉到控件1 上,控件1 的颜色变成了蓝色, 这就表示选中了,此时就可以松开, 出现的效果如下图所示,
如果要是显示的效果如 图 "控件3约束1.png" 所示, 可以将线往 控件1 的中间位置... 或者两边位置 试试... 这个我也木有搞懂到底怎么回事???? 如果有知道的,麻烦指导下.......😝😝😝
约束添加完以后, 每个位置前都有一个小点点....效果如下图所示:
注意:
我们在这里添加约束的时候,top 默认是 控件3 的 top 相对 控件1 的 top ,我们需要的是 控件3的 top 距控件1 bottom 为 230,,,,所以我们应该手动改下就可以了如下图所示:
这里更改我们需要的对其方式, 以及参数.
最后设置完约束以后.再update frame 就👌啦,最后看下效果图:
如果鄙人有什么说的不对的地方还请小伙伴们,,,速速提出来!!!!
