前面讲到了一些关于边界约束的知识,但那些基础知识来解决一些实际问题还是会有点力不从心的;所以我们需要更高级的设置约束的办法,设置等高等宽等中心:
见下图:
图中有3个button按钮, 现在要求3个button等宽,等高 , 且 垂直中心在一条线上,这该如何设置?
按照前面的说法,约束其实是一次方程组的求解,那么 通过观察可以得之,如果我们设置好了button之间的左右边界约束,然后再让3个button等宽就可以;
那么就会有 3x = 宽度; 所以 每一个Button的宽度就可以计算出来了给button1添加 top约束
具体做法:
首先设置好 Button之间的边界约束(先不要update Frames),假设都为20,
等宽 设法:
选中button2 ,按住 control 鼠标拖拽一条线到 button1上会出现如下 选项:
选择Equal Widths等宽, Equal Heights等高, center Y垂直中心 相等 (可能会 略有 偏差, centerY 的值是可以调节的! 默认的 center Y就是决定你当前的在的位置 )
button 3 的操作类似, 那么可以 想向 button1,2,3都会在 同一水平线上了,宽度高度也都相等了!
效果如下:
大家可以看到,出现了宽度高度都相等的 按钮,但是 button 3为什么 不和其他两个 button 在一条水平线上呢?
这是因为 center Y默认 值会根据你的实际位置 进行调整,所以如果你需要 水平齐,需要 修改 centerY 的值为0即可!
修改 center Y的值即可
可以看出,这个设置的关键点是 :从一个 视图 按住 control 拖拽到另一个 视图(包括父视图)来产生 ,宽高,中心,边界的关系!
我们需要根据实际情况进行调整 其值!
即使是刚才设置的 约束 是 等宽的也是可以 随意调节 每一个 按钮的宽度的 ,如下图
可以改变其值,原理 类似 于 从 3x = K ,变为了 1x +1.5x +2x =K是一样的道理,那么每一个视图的宽度就算出来了!
总结一下:
我们通过 按住 选中一个 视图后 ,按住 control 拖拽到另外一个视图上 ,那么就可以设置两个 视图的关系!
补充:
center X可以设置,两个 视图(包括子视图和父视图)之间的 水平中心在一条线上:
如下图是 center X相等的 一些视图,大家可以看到 一条很长的线的提示!
从Button4 拖拽到 他的父视图 view上可以见到如下的选项,也可以拖拽到 左边的 视图列表(选项更多!)
拖拽松手看到如下选项:
我们选择 Center Horizontally ...就可以设置 button4的中心与 父视图(或其他视图)的水平中心是在一条线上了!
Center Vert...就是 Center Y,垂直中心相等
ps:如果你需要 左右移动,或者 上线移动,只需改变 Center X或 Center Y的值即可!
把 所有的 center X和 center Y改为 0即可看到如下效果:
原文地址http://blog.csdn.net/yangbingbinga/article/details/43069341