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