码迷,mamicode.com
首页 > 移动开发 > 详细

IOS开发学习笔记038-autolayout 自动布局 界面实现

时间:2015-06-03 07:21:58      阅读:417      评论:0      收藏:0      [点我收藏+]

标签:

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

 

IOS开发学习笔记038-autolayout 自动布局 界面实现

标签:

原文地址:http://www.cnblogs.com/songliquan/p/4547833.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!