AutoLayout 按比例布局
AutoLayout一般设置使用的是绝对值：view width和height的固定值，subview与父view或相邻view的距离固定值。
</div>
下面介绍下按比例使用AutoLayout布局界面。
****想要实现这样一个布局****
- 新建subview，其高和宽都为屏幕view大小的
1/3. -
subview的上距和左距都为view的
1/4.
实现按比例布局界面的关系式为：
FirstItem.Attribute1 = (SecondItem.Attribute2 * Multiplier) + Constant
****1. ****在****view****中，新建一个宽高都为****100****的****subview****。并居中设置。
设定宽高：
</div>
设定对齐方式：
</div>
****2. ****从属性栏中可以看到设置的Constraints.
</div>
****3. ****点击****Align Center X to:Subperview,****进入编辑页面。
</div>
从窗口中，可以看到布局关系式对应的几个参数。当前subview和subview都是居中对齐的，所以Constant值为0，也就说Superview.Center.X=subView.Center.X
因为我们要设置的是subview的布局，所以为了方便期间，把first item设置为subview，使用Reverse First And Second Item按钮，交换subview与superview的位置。
</div>
点击first item和second item的下拉框，可以看到x轴上相关的其他值。
****4. ****下面设置****subview****距****view****左边距****1/4.****介绍下两种关系式。
-
subview的左边缘位于superview右边缘的1/4处。即关系式为：
subView.Leading=superView.Trailing*1/4+0 -
有时候按照边缘来设置并不好用，可以使用两者的中间线设置。比如subview的中间线位于superview中间线的1/2。即关系式为：
subView.Center X=superView.Center X*1/2+0
（当然这两个关系式的结果并不是一样的。）
****5. ****这里使用第一个方式，设置为
</div>
****6. ****同理，设置下Y线的值
</div>
****7. ****接下来设置subview宽高和superview的比例关系。
先把subview设置为superview等宽高
</div>
****8. ****点击新增的Constraints，进入编辑界面
</div>
****9. ****改变比例关系。关系式为：
subView.Width=superView.Width*0.33+0
</div>
****10. ****同样修改****Height****的比例关系
subView.Height=superView.Height*0.33+0
****11. ****最后删除之前设置****subview****的宽高固定值。并****update frame****。
</div>
****12. ****最终的效果图为:
</div>
网友评论