IOS开发学习笔记038-autolayout 自动布局 界面实现
在storyboard/xib文件中实现自动布局 autolayout
1、注意事项
-
autolayout和frame属性是有冲突的,所以如果准备使用autolayout,就不要再代码中对控件的frame属性进行操作。
-
设置autolayout必须设置完全,必须包括位置信息和尺寸信息。也就是说必须有宽高和坐标位置,缺一不可。
2、简单示例
两个view(redView和blueView),等高等宽,redView距离左边和下边间距都是20,距离blueView间距也是20.blueView距离右边和下边都是20.
2.1、autolayout的相关属性设置
2.2、redView的设置,blueView类似
要保证每个控件都可以计算出来位置信息和尺寸信息。
blueView的约束设置
2.3、效果预览
任意旋转,始终处于底部,并且间距保持一致。
3、复杂示例
实现效果如下:
View中有四个UIView
每个UIView中又包含两个控件UIImageView和UILable。
UIimageview位于正中心,UILable位于底部。
3.1、先实现内部控件的自动布局
分析如下:
UIImageView和UIlable的自动布局。
UIImageView的相关约束信息。
UIlable的相关约束信息
3.2、添加四个相同的UIView,并设置相关约束
其中一个redView的约束信息
看效果,在不同尺寸下,和旋转状态下,效果一致。
总结:
这个全部是通过操作添加约束的,难以用文字表达清楚,看源代码吧(最后边)。
4、特殊情况UIlable
设置UILable的约束条件,它只需指定位置和宽度,高度系统会根据文字长度自动计算。
比如一下程序:
两个UIView中间是一个UIlabel。现在文字长度是这样。然后添加一个方法实现单击屏幕,使得文字内容变短。
1 /** 2 * 触摸屏幕调用这个方法 3 4 */ 5 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 6 { 7 8 // 添加动画效果 9 [UIView animateWithDuration:0.5 animations:^{ 10 _lab.text = @"asdfasfasdfadsf"; 11 // 要执行动画的view 12 [self.view layoutIfNeeded]; 13 }]; 14 }
单击屏幕后UILable会自动缩小高度。不会是固定大小。
源代码参考:
http://pan.baidu.com/s/1qW60b5y
今日如此,明日依旧。
2015-06-02
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。