关闭

iOS AutoLayout与AutoSizing

标签: iOS
491人阅读 评论(0) 收藏 举报
分类:

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
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:29477次
    • 积分:651
    • 等级:
    • 排名:千里之外
    • 原创:29篇
    • 转载:53篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论