iOS AutoLayout与AutoSizing

转载 2015年11月18日 10:09:31

iOS AutoLayout与AutoSizing:自动布局,想说爱你真不容易

在iPhone Retina发布之前,还没有AutoLayout,因为屏幕只有一种尺寸。
当iPhone Retina发布之后,我没有用上AutoLayout,因为屏幕尺寸是用点来表示,布局写起来没什么不同。
当iPhone 5发布之后,屏幕尺寸终于加长了,但是由于有AutoSizing,所以我还是可以不用AutoLayout。
现在,iPhone 6和6 Plus发布了,屏幕又大了,我不得不开始考虑是否要使用AutoLayout。

1. Autolayout 与 Autosizing的区别

虽然自iOS6之后,苹果推荐我们使用Autolayout布局,并且在Xib和Storyboard中默认帮我们打开了这个选项,但是在开发过程中,我们偏向于使用Autosizing,并且手动取消掉Autolayout,原因在于,Autolayout太繁琐复杂,而Autosizing简单并且能满足大部分的需求。

Autosizing适用的情况

当父视图被拉伸的时候,子视图能够适配父视图的新大小。其原理是,子视图有一个masks,用于指定与父视图上下左右边缘的距离,以及自身宽高的关系。

比如,指定子视图的右边缘紧跟着父视图的右边缘,那么父视图变大之后,子视图还是贴在父视图的右边。

这在大部分简单布局情况下非常有效。

Autosizing的不足

使用Autosizing,有一个前提,就是子视图的Frame是固定的,至少宽高是固定的,或者跟随着父视图的Frame变化。但是,如果希望多个子视图与父视图的边距固定,大小自动调整,Autosizing就爱莫能助了。

原因在于:Autosizing无法智能计算多个子View各自的Frame

比如,我们希望在竖屏下布局是这样:

autosizing portrait

并且在横屏下布局是这样:

autosizing landscape

除了手写代码调整Frame,单独用Autosizing是无法做到的。这时候就需要借助强大的Autolayout了。

Autolayout的优点

Autolayout使用约束来决定每个View的坐标、大小,约束可以针对SuperView,也可以针对其他任意一个SubView。

使用自动布局,你可以表达出视图与视图之间的关系,而不是明确地指定每个视图的Frame。通过约束,视图会自动计算它们应该呆在哪个位置,只要约束足够多,它们也能自动计算自己的大小。

只要指定了约束,无论屏幕大小怎么变化,它们都能自适应,这就是Autolayout的优点:妈妈再也不用担心你手写布局代码啦!也不用担心你为了适配各种屏幕大小而加班了。

Autolayout的缺点

Autolayout唯一的缺点就在于:过于复杂,较难上手。

使用Autolayout,还是Autosizing?

取决于项目需求。如果Autosizing完全能满足开发需求,那么就没必要使用复杂的Autolayout。但是,如果你已经被适配各种屏幕大小折腾得不成人形了,那么就要早日投入到Autolayout的怀抱了。

Autolayout的使用

首先要改变自己对布局的思考方式。你应该忘掉Frame,需要考虑的是subView A与subView B的上下左右的关系,以及与superView的关系。

借助XCode

在Xcode5之后,苹果已经尽力让开发者能更方便地使用Autolayout了。
通过Xcode–>Editor–>Pin/Align菜单为视图添加约束即可。

在XCode中除了通过菜单,还可以通过可视化的方式添加约束:

autolayout add constraint

如果你添加的约束不足以表达某个View的位置大小,XCode还会以黄色的辅助线发出警告,十分好用。

手写约束Constraint

XCode虽然强大,但是有时候我们也许希望借助代码来写Constraint。

加入你希望一个子view跟随父view的大小,但是与边距有10个点的距离:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
UIView *superview = self;

UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor greenColor];
[superview addSubview:view1];

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[superview addConstraints:@[

    //view1 constraints
    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeTop
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeTop
                                multiplier:1.0
                                  constant:padding.top],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeLeft
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeLeft
                                multiplier:1.0
                                  constant:padding.left],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeBottom
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeBottom
                                multiplier:1.0
                                  constant:-padding.bottom],

    [NSLayoutConstraint constraintWithItem:view1
                                 attribute:NSLayoutAttributeRight
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superview
                                 attribute:NSLayoutAttributeRight
                                multiplier:1
                                  constant:-padding.right],

 ]];

每个约束都是这样的长长一串代码,设想一下需要添加6个约束的话……

幸好有了这个开源库:Masonry

使用这个库,代码添加约束就可以简介如下:

1
2
3
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(superview).with.insets(padding);
}];

更新约束

比如,我们自己实现了一个图文混排的TextView,添加到Xib时我们还不知道其高度,需要在代码中计算,那么就需要在代码里更新约束,如:

1
2
3
4
5
6
7
8
9
10
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *richTextHeightConstraint;

...

- (void)relayout
{
    self.richTextHeightConstraint.constant = self.richTextView.frame.size.height;

    [self needsUpdateConstraints];
}

关键还是实践

多说无益,贵在实践。只要有意识地去使用了一次,自然就会了。

参考链接

原文作者: lslin
原文链接: http://blog.lessfun.com/blog/2014/10/17/ios-autolayout-vs-autosizing/
版权声明:自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0

xib和storyBoard中的autosizing

如果你使用了Storyboard或是xib来做视图界面,在view的属性中可以看到 上图是我文本输入框之前的autosizing属性,顶部和左边固定,所以直接导致了尺寸边长后,它还是...
  • iOSbird
  • iOSbird
  • 2015年12月22日 18:41
  • 537

iOS:自动布局 AutoLayout && Autosizing masks

--参考: --iOS7.0 Xcode5 Auto Layout 备忘录:http://www.cnblogs.com/thefeelingofsimple/p/3316300.html -...
  • houseq
  • houseq
  • 2014年04月03日 11:27
  • 4909

iOS Core Animation详解(四)AutoLayout中的动画

原创blog,转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS SDK详解专栏 http://blog.csdn.net/column/details/huan...
  • Hello_Hwc
  • Hello_Hwc
  • 2015年08月06日 20:40
  • 3163

iOS里面xib和AutoLayout的妙用

一直以来,我都是一个代码流,喜欢用纯代码去构建app,并觉得这是一件很酷的事情。当iPhone 5出来了,我还觉得没什么问题,但是当iPhone 6和iPhone 6 plus都出来,屏幕的分辨率一下...
  • lizujian1990
  • lizujian1990
  • 2014年12月02日 21:30
  • 1783

ios开发autolayout之代码实现Autolayout使用总结

ios开发autolayout之代码实现Autolayout使用总结 1.理论部分 demo示例1: UIView *blueView = [[UIView...
  • sunnyboy9
  • sunnyboy9
  • 2016年04月12日 13:07
  • 1058

iOS-AutoLayout还不会,你就累到死

花时间写了个Demo,包含比较全面从UIView,UILabel,UIImageView的自适应到UITextView,UITableView,UICollectionView,UIScrollVie...
  • qq_29909323
  • qq_29909323
  • 2017年08月15日 09:59
  • 743

(iOS)使用autolayout进行复杂布局时 UILabel的相关trick

本文首发于CSDN:http://blog.csdn.net/madongchunqiu/article/details/47960745。给心急的同学先说说结论:(因为我也是一个心急的同学) 对于U...
  • sbt0198
  • sbt0198
  • 2016年09月23日 21:59
  • 819

iOS autolayout性能问题, uitableview的优化

autolayout被使用的越来越多,很多时候,我们只是在使用,但是却没有去关心使用的东西给我们带来的影响。      在自己的项目中,动态高度的问题,在iPhone6上,有稍微卡顿的感觉,用上了各...
  • qwe462127821
  • qwe462127821
  • 2015年04月16日 22:54
  • 760

iOS 解决autolayout下键盘弹出遮挡问题

在IB中设置好View的constraint后,将需要动态修改的constraint在代码中jian'li
  • qq448631961
  • qq448631961
  • 2014年10月21日 15:29
  • 2367

ScrollView 中使用 AutoLayout

ScrollView 是 UIKit 中很重要的一个组件,TableView 和 UIWebView 等很多涉及到滑动的视图都有它的影子,在之前使用代码布局的时代,只要简单的进行配置,就 OK 了。但...
  • liyunxiangrxm
  • liyunxiangrxm
  • 2016年04月26日 11:21
  • 2094
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:iOS AutoLayout与AutoSizing
举报原因:
原因补充:

(最多只允许输入30个字)