AutoLayout 按比例布局
AutoLayout
一般设置使用的是绝对值:view width
和height
的固定值,subview
与父view
或相邻view
的距离固定值。
下面介绍下按比例使用AutoLayout布局界面。
****想要实现这样一个布局****
1/3
.1/4
.实现按比例布局界面的关系式为:
FirstItem.Attribute1 = (SecondItem.Attribute2 * Multiplier) + Constant
设定宽高:
设定对齐方式:
Constraints
.Align Center X to:Subperview
,****进入编辑页面。从窗口中,可以看到布局关系式对应的几个参数。当前subview
和subview
都是居中对齐的,所以Constant
值为0
,也就说Superview.Center.X=subView.Center.X
因为我们要设置的是subview
的布局,所以为了方便期间,把first item
设置为subview
,使用Reverse First And Second Item
按钮,交换subview
与superview
的位置。
点击first item和second item的下拉框,可以看到x轴上相关的其他值。
subview的左边缘位于superview右边缘的1/4处。即关系式为:
subView.Leading=superView.Trailing*1/4+0
有时候按照边缘来设置并不好用,可以使用两者的中间线设置。比如subview的中间线位于superview中间线的1/2。即关系式为:
subView.Center X=superView.Center X*1/2+0
(当然这两个关系式的结果并不是一样的。)
Y
线的值subview
宽高和superview
的比例关系。先把subview设置为superview等宽高
Constraints
,进入编辑界面subView.Width=superView.Width*0.33+0
subView.Height=superView.Height*0.33+0