Autolayout-radio

2016-08-01  本文已影响48人  Seas
AutoLayout 按比例布局

AutoLayout一般设置使用的是绝对值:view widthheight的固定值,subview父view相邻view的距离固定值。


</div>

下面介绍下按比例使用AutoLayout布局界面。

****想要实现这样一个布局****

  1. 新建subview,其高和宽都为屏幕view大小的1/3.
  2. subview的上距和左距都为view1/4.

实现按比例布局界面的关系式为:

FirstItem.Attribute1 = (SecondItem.Attribute2 * Multiplier) + Constant
****1. ****在****view****中,新建一个宽高都为****100****的****subview****。并居中设置。

设定宽高:



</div>

设定对齐方式:



</div>

****2. ****从属性栏中可以看到设置的Constraints.


</div>

****3. ****点击****Align Center X to:Subperview,****进入编辑页面。

</div>

从窗口中,可以看到布局关系式对应的几个参数。当前subviewsubview都是居中对齐的,所以Constant值为0,也就说Superview.Center.X=subView.Center.X
因为我们要设置的是subview的布局,所以为了方便期间,把first item设置为subview,使用Reverse First And Second Item按钮,交换subviewsuperview的位置。


</div>

点击first item和second item的下拉框,可以看到x轴上相关的其他值。

****4. ****下面设置****subview****距****view****左边距****1/4.****介绍下两种关系式。

(当然这两个关系式的结果并不是一样的。)

****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>

上一篇下一篇

猜你喜欢

热点阅读