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

storyboard/xib文件中实现自动布局 autolayout 

1、注意事项

  • autolayout和frame属性是有冲突的,所以如果准备使用autolayout,就不要再代码中对控件的frame属性进行操作。

  • 设置autolayout必须设置完全,必须包括位置信息和尺寸信息。也就是说必须有宽高和坐标位置,缺一不可。

 

2、简单示例

  两个view(redView和blueView),等高等宽,redView距离左边和下边间距都是20,距离blueView间距也是20.blueView距离右边和下边都是20.

 

IOS开发学习笔记038-autolayout 自动布局 界面实现_第1张图片 

  2.1、autolayout的相关属性设置

IOS开发学习笔记038-autolayout 自动布局 界面实现_第2张图片

 

  2.2、redView的设置,blueView类似

要保证每个控件都可以计算出来位置信息和尺寸信息。

 

IOS开发学习笔记038-autolayout 自动布局 界面实现_第3张图片

blueView的约束设置

IOS开发学习笔记038-autolayout 自动布局 界面实现_第4张图片

 

  2.3、效果预览

任意旋转,始终处于底部,并且间距保持一致。

IOS开发学习笔记038-autolayout 自动布局 界面实现_第5张图片

3、复杂示例

  实现效果如下:

  View中有四个UIView

  每个UIView中又包含两个控件UIImageView和UILable。

  UIimageview位于正中心,UILable位于底部。

  IOS开发学习笔记038-autolayout 自动布局 界面实现_第6张图片

 

  3.1、先实现内部控件的自动布局

分析如下:

IOS开发学习笔记038-autolayout 自动布局 界面实现_第7张图片

  UIImageView和UIlable的自动布局。

UIImageView的相关约束信息。

IOS开发学习笔记038-autolayout 自动布局 界面实现_第8张图片

UIlable的相关约束信息

IOS开发学习笔记038-autolayout 自动布局 界面实现_第9张图片

 

  3.2、添加四个相同的UIView,并设置相关约束

其中一个redView的约束信息

IOS开发学习笔记038-autolayout 自动布局 界面实现_第10张图片

 

看效果,在不同尺寸下,和旋转状态下,效果一致。

 

IOS开发学习笔记038-autolayout 自动布局 界面实现_第11张图片

总结:

这个全部是通过操作添加约束的,难以用文字表达清楚,看源代码吧(最后边)。

 

 

4、特殊情况UIlable

设置UILable的约束条件,它只需指定位置和宽度,高度系统会根据文字长度自动计算。
比如一下程序:

IOS开发学习笔记038-autolayout 自动布局 界面实现_第12张图片

 两个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会自动缩小高度。不会是固定大小。

 

IOS开发学习笔记038-autolayout 自动布局 界面实现_第13张图片

 

源代码参考:

  http://pan.baidu.com/s/1qW60b5y

 

 

 

今日如此,明日依旧。

2015-06-02

 

转载于:https://www.cnblogs.com/songliquan/p/4547833.html

你可能感兴趣的:(IOS开发学习笔记038-autolayout 自动布局 界面实现)