iOS8开发～UI布局（三）深入理解autolayout

最新推荐文章于 2024-08-14 23:42:59 发布
最新推荐文章于 2024-08-14 23:42:59 发布
阅读量498 收藏
点赞数
分类专栏： 待学习 文章标签： storyboard outlayout

通过对iOS8界面布局的学习和总结，发现autolayout才是主角，autolayout是iOS6引入的新特性，当时还粗浅的学习了下，可是没有真正应用到项目中。随着iOS设备尺寸逐渐碎片化，纯粹的hard code方式UI布局将会走向死角，而autoresizing方式也有其局限性，所以无论如何autolayout都将成为UI布局的重要方式。

前两篇以发烧友心态对iOS8界面布局的主要元素size class和autolayout进行了探索，发现要完全掌握autolayout需要大量的时间去实践总结。所以深入思考autolayout是很有必要的。你可能有和我同样的疑问，如下：

1、以后一律使用autolayout吗？除了在storyboard中使用autolayout，代码方式autolayout如何使用？

2、好像忽略了一个重要问题，就是view动画在autolayout如何实现？

3、autolayout有没有局限性和解决不了的问题？兼容性怎么样？效率怎么样？

4、……

二、研究开始

1、直接说以后都应该使用storyboard＋autolayout感觉是不负责的说法，读了好多网络的帖子，最后总结如下情况使用autolayout会有帮助：

a 当需要展示的内容很多并且尺寸不固定；

b 程序需支持屏幕旋转（主要是iPad程序，iPhone程序横屏的场景有点非主流）；

c 程序通用于iPhone和iPad;


但storyboard中使用autolayout有利有弊，好处当然是可视化，实现简单功能很节省时间，但也有弊端，例如不小心移动一个控件就会让弄乱那些约束。抛开storyboard而使用autolayout，就需要代码定义约束了，而且代码量也不是很大。当app中一些view的出现时根据网络数据来决定的时候，代码方式可能更合适。

先看一个简单的Demo：

例子1:新建一个Single View Application template项目Demo4，在rootView上添加一个绿颜色的view，使新添加的view四个边距离superView四边20点宽

效果如图：


使用storyboard来实现这个效果很简单，选中绿色view，然后添加4个相对于superview的边界约束，约束的数值设置为20，然后Update Frame就可以了，因为不区分iOS设备，所以size class可以设置为默认的wAny hAny。Demo下载

接下来使用代码来实现UI布局，目前有3种方法可以使用：（1）最基本的约束实现方式；（2）特殊格式化语言的约束实现方式；（3）第三方UIView-AutoLayout

（1）最基本的约束实现方式

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-size:12px;">- (void)viewDidLoad {  
  2.     [super viewDidLoad];  
  3.     // Do any additional setup after loading the view, typically from a nib.  
  4.     self.view.translatesAutoresizingMaskIntoConstraints =NO;  
  5.       
  6.     UIView *newView = [UIView new];  
  7.     newView.backgroundColor = [UIColor greenColor];  
  8.     [self.view addSubview:newView];  
  9.       
  10.     newView.translatesAutoresizingMaskIntoConstraints =NO;  
  11.       
  12.     NSLayoutConstraint *constraint = nil;  
  13.       
  14.     constraint = [NSLayoutConstraint constraintWithItem:newView  
  15.                                               attribute:NSLayoutAttributeLeading  
  16.                                               relatedBy:NSLayoutRelationEqual  
  17.                                                  toItem:self.view  
  18.                                               attribute:NSLayoutAttributeLeading  
  19.                                              multiplier:1.0f  
  20.                                                constant:20];  
  21.     [self.view addConstraint:constraint];  
  22.       
  23.     constraint = [NSLayoutConstraint constraintWithItem:newView  
  24.                                               attribute:NSLayoutAttributeTrailing  
  25.                                               relatedBy:NSLayoutRelationEqual  
  26.                                                  toItem:self.view  
  27.                                               attribute:NSLayoutAttributeTrailing  
  28.                                              multiplier:1.0f  
  29.                                                constant:-20];  
  30.     [self.view addConstraint:constraint];  
  31.       
  32.     constraint = [NSLayoutConstraint constraintWithItem:newView  
  33.                                               attribute:NSLayoutAttributeTop  
  34.                                               relatedBy:NSLayoutRelationEqual  
  35.                                                  toItem:self.view  
  36.                                               attribute:NSLayoutAttributeTop  
  37.                                              multiplier:1.0f  
  38.                                                constant:20];  
  39.     [self.view addConstraint:constraint];  
  40.       
  41.     constraint = [NSLayoutConstraint constraintWithItem:newView  
  42.                                               attribute:NSLayoutAttributeBottom  
  43.                                               relatedBy:NSLayoutRelationEqual  
  44.                                                  toItem:self.view  
  45.                                               attribute:NSLayoutAttributeBottom  
  46.                                              multiplier:1.0f  
  47.                                                constant:-20];  
  48.     [self.view addConstraint:constraint];  
  49.       
  50. }</span>  

（2）特殊格式化语言的约束实现方式

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-size:12px;">- (void)viewDidLoad {  
  2.     [super viewDidLoad];  
  3.     self.view.translatesAutoresizingMaskIntoConstraints =NO;  
  4.       
  5.     UIView *newView = [UIView new];  
  6.     newView.backgroundColor = [UIColor greenColor];  
  7.     [self.view addSubview:newView];  
  8.     newView.translatesAutoresizingMaskIntoConstraints =NO;  
  9.       
  10.     NSMutableArray *constraintArray = [NSMutableArray array];  
  11.       
  12.     [constraintArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[newView]-20-|"  
  13.                                                                                  options:0  
  14.                                                                                  metrics:nil  
  15.                                                                                    views:NSDictionaryOfVariableBindings(newView, self.view)]];  
  16.     [constraintArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[newView]-20-|"  
  17.                                                                                  options:0  
  18.                                                                                  metrics:nil  
  19.                                                                                    views:NSDictionaryOfVariableBindings(newView, self.view)]];  
  20.     [self.view addConstraints:constraintArray];  
  21. }</span>  

（3）第三方UIView-AutoLayout

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-size:12px;">- (void)viewDidLoad {  
  2.     [super viewDidLoad];  
  3.     self.view.translatesAutoresizingMaskIntoConstraints =NO;  
  4.       
  5.     UIView *newView = [UIView new];  
  6.     newView.backgroundColor = [UIColor greenColor];  
  7.     [self.view addSubview:newView];  
  8.     newView.translatesAutoresizingMaskIntoConstraints =NO;  
  9.       
  10.     [newView autoPinEdgeToSuperviewEdge:ALEdgeLeading withInset:20.0f];  
  11.     [newView autoPinEdgeToSuperviewEdge:ALEdgeTrailing withInset:20.0f];  
  12.     [newView autoPinEdgeToSuperviewEdge:ALEdgeTop withInset:20.0f];  
  13.     [newView autoPinEdgeToSuperviewEdge:ALEdgeBottom withInset:20.0f];  
  14. }</span>  

以上3种方式都实现了我们想要的效果，看来代码实现autolayout也不是那么复杂！


例子2:通过上边例子我们实现一个简单的UI布局，下面来一个稍微复杂点的，把上一篇中提到3个view布局的那个例子用代码布局实现一下，但难度有所增加，当size class切换的时候，页面布局发生相应的改变，效果如图：

            

首先初始化3个View：

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-size:12px;">- (UIView *) alView {  
  2.     UIView *newView = [UIView new];  
  3.     newView.translatesAutoresizingMaskIntoConstraints =NO;  
  4.       
  5.     return newView;  
  6. }  
  7. UIView *greenView = [self alView];  
  8. greenView.backgroundColor = [UIColor greenColor];  
  9. [self.view addSubview:greenView];  
  10. UIView *yellowView = [self alView];  
  11. yellowView.backgroundColor = [UIColor yellowColor];  
  12. [self.view addSubview:yellowView];  
  13. UIView *blueView = [self alView];  
  14. blueView.backgroundColor = [UIColor blueColor];  
  15. [self.view addSubview:blueView];</span>  

接下来适配竖屏的约束：

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-size:12px;">- (NSMutableArray *) portraitConstraints:(UIView *)greenView :(UIView *)yellowView :(UIView *)blueView  
  2. {  
  3.     NSMutableArray *constraintArray = [NSMutableArray array];  
  4.       
  5.     [constraintArray addObjectsFromArray:[NSLayoutConstraint  
  6.                                           constraintsWithVisualFormat:@"H:|-20-[greenView]-20-[yellowView(==greenView)]-20-|" options:0 metrics:nil  
  7.                                           views:NSDictionaryOfVariableBindings(greenView, yellowView)]];  
  8.     [constraintArray addObjectsFromArray:[NSLayoutConstraint  
  9.                                           constraintsWithVisualFormat:@"V:|-20-[greenView]-20-[blueView(==greenView)]-20-|" options:0 metrics:nil  
  10.                                           views:NSDictionaryOfVariableBindings(greenView, blueView)]];  
  11.       
  12.     [constraintArray addObjectsFromArray:[NSLayoutConstraint  
  13.                                           constraintsWithVisualFormat:@"V:|-20-[yellowView]-20-[blueView(==yellowView)]-20-|" options:0 metrics:nil  
  14.                                           views:NSDictionaryOfVariableBindings(yellowView, blueView)]];  
  15.       
  16.     [constraintArray addObjectsFromArray:[NSLayoutConstraint  
  17.                                           constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil  
  18.                                           views:NSDictionaryOfVariableBindings(blueView)]];  
  19.       
  20.     return constraintArray;  
  21. }</span>  

然后横屏的约束：

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-size:12px;">- (NSMutableArray *) landscapeConstraints:(UIView *)greenView :(UIView *)yellowView :(UIView *)blueView  
  2. {  
  3.     NSMutableArray *constraintArray = [NSMutableArray array];  
  4.       
  5.     [constraintArray addObjectsFromArray:[NSLayoutConstraint  
  6.                                           constraintsWithVisualFormat:@"H:|-20-[greenView]-20-[yellowView(==greenView)]-20-|" options:0 metrics:nil  
  7.                                           views:NSDictionaryOfVariableBindings(greenView, yellowView)]];  
  8.       
  9.     [constraintArray addObjectsFromArray:[NSLayoutConstraint  
  10.                                           constraintsWithVisualFormat:@"V:|-20-[blueView]-20-[greenView(==blueView)]-20-|" options:0 metrics:nil  
  11.                                           views:NSDictionaryOfVariableBindings(greenView, blueView)]];  
  12.       
  13.     [constraintArray addObjectsFromArray:[NSLayoutConstraint  
  14.                                           constraintsWithVisualFormat:@"V:|-20-[blueView]-20-[yellowView(==blueView)]-20-|" options:0 metrics:nil  
  15.                                           views:NSDictionaryOfVariableBindings(yellowView, blueView)]];  
  16.       
  17.     [constraintArray addObjectsFromArray:[NSLayoutConstraint  
  18.                                           constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil  
  19.                                           views:NSDictionaryOfVariableBindings(blueView)]];  
  20.       
  21.     return constraintArray;  
  22. }</span>  

最后还要处理屏幕旋转：

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-size:12px;">- (void)willTransitionToTraitCollection:(UITraitCollection *)newCollection  
  2.               withTransitionCoordinator:(id <UIViewControllerTransitionCoordinator>)coordinator  
  3. {  
  4.     [super willTransitionToTraitCollection:newCollection withTransitionCoordinator:coordinator];  
  5.       
  6.     [coordinator animateAlongsideTransition:^(id <UIViewControllerTransitionCoordinatorContext> context) {  
  7.         if (newCollection.verticalSizeClass == UIUserInterfaceSizeClassCompact) {  
  8.             NSLog(@"%s----%d", __FUNCTION__, __LINE__);  
  9.             [self.view removeConstraints:self.view.constraints];  
  10.             [self.view addConstraints:[self landscapeConstraints:self.greenView_ :self.yellowView_ :self.blueView_]];  
  11.         } else {  
  12.             NSLog(@"%s----%d", __FUNCTION__, __LINE__);  
  13.             [self.view removeConstraints:self.view.constraints];  
  14.             [self.view addConstraints:[self portraitConstraints:self.greenView_ :self.yellowView_ :self.blueView_]];  
  15.         }  
  16.         [self.view setNeedsLayout];  
  17.     } completion:nil];  
  18. }</span>  

这样就实现了我们预期的效果，总结下来，auotlayout就是给view添加足够的约束，让view系统可以根据约束来计算出一个view的frame。动手练习一下吧！


2、view动画在autolayout实现

当布局发生改变时，相当于对子view进行重新布局，而子view重新布局调用 layoutIfNeeded，所以动画可以这样实现：

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-size:12px;">- (void)animateConstraints  
  2. {  
  3.     [UIView animateWithDuration:0.5 animations:^{  
  4.         [self.view layoutIfNeeded];  
  5.     }];  
  6. }</span>  

Github上已经有Demo了！


3、autolayout有没有局限性和解决不了的问题？兼容性怎么样？效率怎么样？

autolayout对view transforms支持的不好，这里有帖子详细描述了这个问题。

至于兼容性，只从iOS6就已经提出了autolayout的概念，现在iOS5系统不是很多了，甚至iOS6系统都已经升级为iOS7，未来一段时间大部分用户应该是使用iOS7和iOS8系统，所以兼容性问题不会太大，但size class是iOS8才有的概念，所以还有有一定的适配工作量。

效率话题这里有提到，有时间再细研究。


结束语：时间和体力总是有限的，标题是autolayout详解，可想达到详解还需要更多的时间去实践和总结，还有一些细节没有体现出来：

例如：

[objc]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <span style="font-size:12px;">[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[newView]-20-|"options:0 metrics:nil views:NSDictionaryOfVariableBindings(newView, self.view)]</span>  

1、这其中各个参数的含义，另外约束还有个优先级的概念

2、@"H:|-20-[newView]-20-|" 这种可视化布局字符串的含义等等，有空再补充了！

本篇内容所有Demo

欢迎指出错误，不胜感激。

转自：http://blog.csdn.net/liangliang103377/article/details/40082271

XuesongYu
关注
专栏目录
戴铭《深入剖析AutoLayout》
01-23
对iOS里AutoLayout的深入理解和剖析
[iOS开发]autolayout自动布局
weixin_52192405的博客
05-29 1352
使用Objective-C风格的方法进行代码autolayout布局
IOS开发之Autolayout自动布局
weixin_34250709的博客
07-24 125
一、简介 在以前的iOS程序中，是如何设置布局UI界面的？经常编写大量的坐标计算代码为了保证在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果，有时还需要分别为2种屏幕编写不同的坐标计算代码（即传说中的“屏幕适配”） 2、什么是AutolayoutAutolayout是一种“自动布局”技术，专门用来布局UI界面的Autol...
iOS开发之 Autolayout 详解
极客学伟的技术分享社区
05-24 3961
iOS开发之 Autolayout 详解 1. 概述 Autolayout 是 Apple 自 iOS6 开始引入的旨在解决不同屏幕之间布局适配的技术 苹果官方推荐开发者使用 Autolayout 进行UI界面的布局 Autolayout 有两个核心概念：1. 参照。 2. 约束 使用Autolayout的注意点： 添加约束之前需要保证控件已被添加到父控件中 不需要再给View设置...
iOS8开发～UI布局（二）Demo
10-09
在iOS应用开发中，UI布局是构建用户界面的关键部分，特别是在iOS8及更高版本中，Apple引入了Auto Layout和Size Classes来帮助开发者更好地适应不同设备和屏幕尺寸的变化。本篇文章将深入探讨这两种技术的使用，以及...
iOS8 SizeClass与AutoLayout：应对多屏时代的UI布局革新
iOS开发中的UI布局在iOS8系统引入了一个重大变革，那就是SizeClass与AutoLayout的结合。SizeClass的出现是为了应对iOS8及之后版本中设备屏幕尺寸的多样性，尤其是随着iPhone6及其后续设备的推出，屏幕尺寸不再局限于...
iOS UI 快速开发.zip
02-08
在iOS应用开发中，UI（用户界面）设计与实现是至关重要的部分，它直接影响到用户的体验和产品的吸引力。"iOS UI 快速开发"这个主题主要涵盖了如何高效、灵活地构建美观且功能丰富的iOS应用程序界面。这个压缩包...
IOS开发之——屏幕适配-AutoLayout代码实现(03)
我的博客
03-28 526
一 概述 用代码实现AutoLayout的步骤过程 AutoLayout约束规则 AutoLayout约束示例 二 用代码实现AutoLayout的过程 2.1 实现AutoLayout的过程 通过代码创建要进行AutoLayout约束的View View.translatesAutoresizingMaskIntoConstraints=NO; 根据逻辑添加约束方法：constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1… 添
IOS开发之——屏幕适配-AutoLayout布局实现(02)
我的博客
03-27 1856
一 概述 关于AutoLayout的几个概念 通过布局实现屏幕适配 二 关于AutoLayout的几个概念 2.1 什么是Autolayout Autolayout是一种“自动布局”技术，专门用来布局UI界面的 苹果官方也推荐开发者尽量使用Autolayout来布局UI界面 Autolayout能很轻松地解决屏幕适配的问题 2.2 为什么推出Autolayout Autoresizing 在Autolayout之前，有Autoresizing可以作屏幕适配，但局限性较大，有些任务根本无法完成 相
深入理解 iOS 中的 AutoLayout(一)
我叫柱子哥
08-12 1341
在 iOS 开发中，布局是一个至关重要的部分，而 AutoLayout 是苹果提供的一种强大且灵活的布局系统。AutoLayout 允许开发者通过设置约束（Constraints）来定义视图之间的关系，从而自动适应不同设备的屏幕大小和方向变化。本文将深入探讨 AutoLayout 的基本概念、常用技巧以及实际开发中的一些最佳实践。
深入理解 iOS 中的 AutoLayout(二)
最新发布
我叫柱子哥
08-14 852
通过 上一篇文章 ，我们了解了AutoLayout的一些基本概念，这篇文章我们将通过一个具体的例子看看AutoLayout一些高级的用法。
iOS-NSDictionaryOfVariableBindings自动去除字典空值对象
MinggeQingchun的博客
08-01 1216
模仿系统的快速生成字典的方法NSDictionaryOfVariableBindings,并过滤掉值为nil的对象或内容全为空格字符串,防止字典crash。 推荐适用场合：网络请求生成参数字典，无需判空。 其他创建字典的地方也可以使用，注意此方法会过滤掉全为空格及@""字符串，如不需要可自行修改。 创建分类文件NSDictionary+Safe NSDictionary+Safe.m 中代...
iOS视频播放的横屏与竖屏的处理
程序猿老樊的博客
04-28 3635
一般来说，视频播放的横竖屏处理有两种： 1、视频播放的选装有两种方式进行处理，一种是旋转的的时候，视频也跟着旋转； 2、还有一种可能就是屏幕旋转的时候，通过一个按钮只是选装视频一个横屏，一个为竖屏就好了； 对于播放界面不随着屏幕旋转的方式，通过改变keywindow的大小和方向来修改横屏，通过一个按钮的点击事件； 若是通过第1种方案，也就是随着屏幕的旋转播放页面发生了旋转的时候，需要UITraitEnvironment 接口的方法，好像这个方法监听，这个接口的方法调用情况：（1）初始...
iOS高级程序员进阶——页面开发核心技术篇
01-19
作为iOS开发者，界面开发技术是必须要熟练掌握的。一款优秀的iOS应用，除了业务逻辑都需要通过界面来呈现外，用户体验上的优化、性能与动画的调优等也都需要扎实的界面开发技术作为基础。在面试中，界面开发技术与性能优化通常会结合进行考察。iOS应用页面渲染原理，自动布局的原理，绘图技术与复杂动画的实现都是考擦的重点。本课程我们将主要从这几个方面进行讲解，帮助同学们在工作中更加高效的进行页面绘制，并对应用的性能优化提供更多的思路。同样，本课程内容在面试中也有很高的参考价值，对于业务页面开发相关的面试题，本课程可以帮助读者更好的理清思路，更完善的作答。
WWDC 2014 Session笔记 - iOS界面开发的大一统
如鱼得水的专栏
08-08 1361
本文是我的 WWDC 2014 笔记 中的一篇，涉及的 Session 有 What's New in Cocoa TouchBuilding Adaptive Apps with UIKitWhat's New in Interface BuilderView Controller Advancements in iOS 8A Look Inside Presentation Cont
iOS8 Size Classes的理解与使用
gaozhenweigzw的专栏
10-11 454
iOS8 Size Classes的理解与使用 Size Classes是什么 iOS 8在应用界面的可视化设计上添加了一个新的特性-Size Classes，对于任何设备来说，界面的宽度和高度都只分为两种描述：正常和紧凑。这样开发者便可以无视设备具体的尺寸，而是对这两类和它们的组合进行适配。这样不论在设计时还是代码上，我们都可以不再受限于具体的尺寸，而是变成遵循尺寸的视觉感官来进行适配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值