iOS 8 AutoLayout 及SizeClass（三） 使用详解 好多值得学习及研究的地方

一、概要

通过对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
plaincopy

  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. UIView *newView = [UIView new];
  6. newView.backgroundColor = [UIColor greenColor];
  7. [self.view addSubview:newView];
  8. newView.translatesAutoresizingMaskIntoConstraints =NO;
  9. NSLayoutConstraint *constraint = nil;
  10. constraint = [NSLayoutConstraint constraintWithItem:newView
  11. attribute:NSLayoutAttributeLeading
  12. relatedBy:NSLayoutRelationEqual
  13. toItem:self.view
  14. attribute:NSLayoutAttributeLeading
  15. multiplier:1.0f
  16. constant:20];
  17. [self.view addConstraint:constraint];
  18. constraint = [NSLayoutConstraint constraintWithItem:newView
  19. attribute:NSLayoutAttributeTrailing
  20. relatedBy:NSLayoutRelationEqual
  21. toItem:self.view
  22. attribute:NSLayoutAttributeTrailing
  23. multiplier:1.0f
  24. constant:-20];
  25. [self.view addConstraint:constraint];
  26. constraint = [NSLayoutConstraint constraintWithItem:newView
  27. attribute:NSLayoutAttributeTop
  28. relatedBy:NSLayoutRelationEqual
  29. toItem:self.view
  30. attribute:NSLayoutAttributeTop
  31. multiplier:1.0f
  32. constant:20];
  33. [self.view addConstraint:constraint];
  34. constraint = [NSLayoutConstraint constraintWithItem:newView
  35. attribute:NSLayoutAttributeBottom
  36. relatedBy:NSLayoutRelationEqual
  37. toItem:self.view
  38. attribute:NSLayoutAttributeBottom
  39. multiplier:1.0f
  40. constant:-20];
  41. [self.view addConstraint:constraint];
  42. }</span>

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

[objc] view
plaincopy

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

（3）第三方UIView-AutoLayout

[objc] view
plaincopy

  1. <span style="font-size:12px;">- (void)viewDidLoad {
  2. [super viewDidLoad];
  3. self.view.translatesAutoresizingMaskIntoConstraints =NO;
  4. UIView *newView = [UIView new];
  5. newView.backgroundColor = [UIColor greenColor];
  6. [self.view addSubview:newView];
  7. newView.translatesAutoresizingMaskIntoConstraints =NO;
  8. [newView autoPinEdgeToSuperviewEdge:ALEdgeLeading withInset:20.0f];
  9. [newView autoPinEdgeToSuperviewEdge:ALEdgeTrailing withInset:20.0f];
  10. [newView autoPinEdgeToSuperviewEdge:ALEdgeTop withInset:20.0f];
  11. [newView autoPinEdgeToSuperviewEdge:ALEdgeBottom withInset:20.0f];
  12. }</span>

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

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

 
          

首先初始化3个View：

[objc] view
plaincopy

  1. <span style="font-size:12px;">- (UIView *) alView {
  2. UIView *newView = [UIView new];
  3. newView.translatesAutoresizingMaskIntoConstraints =NO;
  4. return newView;
  5. }
  6. UIView *greenView = [self alView];
  7. greenView.backgroundColor = [UIColor greenColor];
  8. [self.view addSubview:greenView];
  9. UIView *yellowView = [self alView];
  10. yellowView.backgroundColor = [UIColor yellowColor];
  11. [self.view addSubview:yellowView];
  12. UIView *blueView = [self alView];
  13. blueView.backgroundColor = [UIColor blueColor];
  14. [self.view addSubview:blueView];</span>

接下来适配竖屏的约束：

[objc] view
plaincopy

  1. <span style="font-size:12px;">- (NSMutableArray *) portraitConstraints:(UIView *)greenView :(UIView *)yellowView :(UIView *)blueView
  2. {
  3. NSMutableArray *constraintArray = [NSMutableArray array];
  4. [constraintArray addObjectsFromArray:[NSLayoutConstraint
  5. constraintsWithVisualFormat:@"H:|-20-[greenView]-20-[yellowView(==greenView)]-20-|" options:0 metrics:nil
  6. views:NSDictionaryOfVariableBindings(greenView, yellowView)]];
  7. [constraintArray addObjectsFromArray:[NSLayoutConstraint
  8. constraintsWithVisualFormat:@"V:|-20-[greenView]-20-[blueView(==greenView)]-20-|" options:0 metrics:nil
  9. views:NSDictionaryOfVariableBindings(greenView, blueView)]];
  10. [constraintArray addObjectsFromArray:[NSLayoutConstraint
  11. constraintsWithVisualFormat:@"V:|-20-[yellowView]-20-[blueView(==yellowView)]-20-|" options:0 metrics:nil
  12. views:NSDictionaryOfVariableBindings(yellowView, blueView)]];
  13. [constraintArray addObjectsFromArray:[NSLayoutConstraint
  14. constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil
  15. views:NSDictionaryOfVariableBindings(blueView)]];
  16. return constraintArray;
  17. }</span>

然后横屏的约束：

[objc] view
plaincopy

  1. <span style="font-size:12px;">- (NSMutableArray *) landscapeConstraints:(UIView *)greenView :(UIView *)yellowView :(UIView *)blueView
  2. {
  3. NSMutableArray *constraintArray = [NSMutableArray array];
  4. [constraintArray addObjectsFromArray:[NSLayoutConstraint
  5. constraintsWithVisualFormat:@"H:|-20-[greenView]-20-[yellowView(==greenView)]-20-|" options:0 metrics:nil
  6. views:NSDictionaryOfVariableBindings(greenView, yellowView)]];
  7. [constraintArray addObjectsFromArray:[NSLayoutConstraint
  8. constraintsWithVisualFormat:@"V:|-20-[blueView]-20-[greenView(==blueView)]-20-|" options:0 metrics:nil
  9. views:NSDictionaryOfVariableBindings(greenView, blueView)]];
  10. [constraintArray addObjectsFromArray:[NSLayoutConstraint
  11. constraintsWithVisualFormat:@"V:|-20-[blueView]-20-[yellowView(==blueView)]-20-|" options:0 metrics:nil
  12. views:NSDictionaryOfVariableBindings(yellowView, blueView)]];
  13. [constraintArray addObjectsFromArray:[NSLayoutConstraint
  14. constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil
  15. views:NSDictionaryOfVariableBindings(blueView)]];
  16. return constraintArray;
  17. }</span>

最后还要处理屏幕旋转：

[objc] view
plaincopy

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

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

2、view动画在autolayout实现

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

[objc] view
plaincopy

  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
plaincopy

  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

本篇中的橙色字体都是资源哦，，可点击继续学习深层次的哈！

时间： 2024-10-20 20:32:25

iOS 8 AutoLayout 及SizeClass（三） 使用详解 好多值得学习及研究的地方的相关文章

Swift使用WKWebView在iOS应用中调用Web的方法详解

这篇文章主要介绍了Swift使用WKWebView在iOS应用中调用Web的方法详解,使用WKWebView便等于使用和Safari中相同的JavaScript解释器,用来替代过去的UIWebView,需要的朋友可以参考下 自从iOS8开始,Apple引入了WKWebView欲代替UIWebView.相比而言,WKWebView消耗内从更少,功能也更加强大.让我们来看看WKWebView怎么使用吧! 0.初始化(1)首先需要引入WebKit库 复制代码代码如下: #import <WebKit/

Hibernate复习(三)配置文件详解

1.hibernate.cfg.xml 2.映射文件Person.hbm.xml Java的实体类是通过配置文件与数据表中的字段相关联.Hibernate在运行时解析配置文件,根据其中的字段名生成相应的SQL语句 a.id属性 <generator>子元素用来设定标识符生成器.Hibernate提供了多种内置的实现. b.property属性 ? name属性:指定持久化类的属性的名字. ? type属性:指定Hibernate或Java映射类型.Hibernate映射类型是Java类型与SQ

IOS问题汇总：2015-1-9 IOS之NSArray 中调用的方法详解（转）

IOS之NSArray 中调用的方法详解 下面的例子以 NSArray *array = [NSArray arrayWithObjects:@“wendy”,@“andy”,@“tom”,@“jonery”,@“stany”, nil];1.获取数组中总共有多少个对象. -(NSUInteger)count; NSLog(@“%d”,[array count]); 2 2.获取数组中下标对应的元素对象.(下标是从0开始) -(id)objectAtIndex:(NSUInteger)index

Asp.Net MVC3 简单入门第一季（三）详解Controller之Filter

前言 前面两篇写的比较简单,刚开始写这个系列的时候我面向的对象是刚开始接触Asp.Net MVC的朋友,所以写的尽量简单.所以写的没多少技术含量.把这些技术总结出来,然后一简单的方式让更多的人很好的接受这是我一直努力的方向.后面会有稍微复杂点的项目!让我们一起期待吧! 此文我将跟大家介绍一下Asp.Net MVC3 Filter的一些用法.你会了解和学习到全局Fileter,Action Filter等常用用法. 第一节:Filter知识储备 项目大一点总会有相关的AOP面向切面的组件,而MVC

Nginx知多少系列之(三)配置文件详解

原文:Nginx知多少系列之(三)配置文件详解 目录 1.前言 2.安装 3.配置文件详解 4.工作原理 5.Linux下托管.NET Core项目 6.Linux下.NET Core项目负载均衡 7.Linux下.NET Core项目Nginx+Keepalived高可用(主从模式) 8.Linux下.NET Core项目Nginx+Keepalived高可用(双主模式) 9.Linux下.NET Core项目LVS+Keepalived+Nginx高可用集群 10.构建静态服务器 11.日志

Xcode iOS布局autolayout和sizeclass的使用

一.关于自动布局(Autolayout) 在Xcode中,自动布局看似是一个很复杂的系统,在真正使用它之前,我也是这么认为的,不过事实并非如此. 我们知道,一款iOS应用,其主要UI组件是由一个个相对独立的可视单元构成,这些可视单元有的主要负责向用户输出有用的信息,有些则负责信息的输入(交互),交互的过程中往往还伴随有动画的效果,已达到整个信息传递的连贯性以及用户体验的细腻感.可视单元,在实际开发中主要是view.button等,那么这些可视单元的关系由两个基本的关系构成:兄弟关系和父子关系,整

iOS开发——UI篇OC篇&amp;UICollectionView详解+实例

UICollectionView详解+实例 实现步骤: 一.新建两个类 1.继承自UIScrollView的子类,比如HMWaterflowView * 瀑布流显示控件,用来显示所有的瀑布流数据 2.继承自UIView的子类,比如HMWaterflowViewCell * 代表着瀑布流数据中的一个单元(一个格子) 3.总结 HMWaterflowView和HMWaterflowViewCell的关系实际上类似于 UITableView和UITableViewCell的关系 二.设计HMWater

iOS开发——UI篇OC篇&amp;UIStackView详解

UIStackView详解 一.继承关系.遵守协议.隶属框架及可用平台 UIStackView 类提供了一个高效的接口用于平铺一行或一列的视图组合.Stack视图使你依靠自动布局的能力,创建用户接口使得可以动态的调整设备朝向.屏幕尺寸及任何可用范围内的变化.Stack视图管理着所有在它的 arrangedSubviews 属性中的视图的布局.这些视图根据它们在 arrangedSubviews 数组中的顺序沿着 Stack 视图的轴向排列.精确的布局变量根据 Stack 视图的 axis , d

iOS开发——控制器OC篇&amp;UINavigationController&amp;UITabBarController详解

UINavigationController&UITabBarController详解 一:UINavigationController 控制器的属性: UINavigationController以栈的形式保存子控制器 @property(nonatomic,copy) NSArray *viewControllers; @property(nonatomic,readonly) NSArray *childViewControllers; 导航控制器之间的跳转: 使用push方法能将某个控制