iOS AutoLayout自动布局中级开发教程(3)-等宽等高等中心

前面讲到了一些关于边界约束的知识,但那些基础知识来解决一些实际问题还是会有点力不从心的;所以我们需要更高级的设置约束的办法,设置等高等宽等中心:

见下图:



图中有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