使用AutoLayout有一段时间了,配合Xcode6新推出的size class做界面适配和自适应布局非常好用。目前网上有关AutoLayout的教程大都浅尝辄止,或者仅涉及到对设备的横、竖屏的动态布局等比较简单的应用,而对AutoLayout做动态界面相关的内容却非常少,因此结合日常工作中的一些经验,来为大家做一些分享。
我们要做什么
相信很多开发者都需要解决这样一系列问题:
我们需要根据用户操作,或服务端返回的数据,而动态显示/隐藏一些控件,以达到灵活布局的效果。
我们需要根据需要调整某一控件的尺寸大小,位置信息,以输出最适宜的界面布局。
面对类似高动态的界面实现时,以往我们的方法是通过代码来计算和判定控件的大小和位置,并结合控件的hidden,frame等属性对其进行设置,在实际使用中往往需要进行比较复杂的计算,比较繁琐。抛开代码党和xib党的争论,下面介绍一种使用AutoLayout实现动态界面的方法。
如示例图所示,我们将要构建一个由三个控件构成的简易应用,通过底部的show和hide按钮,控制第二个组件SecondObject的显示和隐藏,并使得第三个控件根据情况自动布局。
操作步骤
一、新建一个iOS项目,在storyboard中拖入三个UILabel控件,并为其设置合适的AutoLayout约束:
二、 为需要操作的约束设置属性并关联到代码
这里的两个约束分别是: *SecondObjectTopSpace:SecondObject顶部到FirstObject的距离 *secondObjectHeight:SecondObject的高度
三、 编写show和hide方法,为约束赋值,直接控制SecondObject的高度和距离'FirstObject'的顶部距离,从而达到完全隐藏/显示SecondObject的目的。
- (IBAction)show:(id)sender{self.secondObjectHeight.constant =107;self.SecondObjectTopSpace.constant =60;}
- (IBAction)hide:(id)sender{self.secondObjectHeight.constant =0;self.SecondObjectTopSpace.constant =0;}