IOS 基础知识@IT·互联网程序员

自动布局 Auto Layout (原理篇)

2017-10-31  本文已影响3299人  浮游lb

目录

0、前言
一、Auto Layout前世今生
二、Auto Layout基础知识
三、Auto Layout多种使用方式
四、Auto Layout关键知识
五、Auto Layout布局周期
六、References

0、前言

一、Auto Layout前世今生

二、Auto Layout基础知识

1.Auto Layout本质

2.Auto Layout基本原理

图片出处 ：苹果官方文档 - Auto Layout Guide
NSLayoutAttribute布局属性
布局属性 表示意义
NSLayoutAttributeWidth、NSLayoutAttributeHeight 表示视图的尺寸：宽、高
NSLayoutAttributeLeft、NSLayoutAttributeRight 表示视图的X轴方向的位置：左、右
NSLayoutAttributeLeading、NSLayoutAttributeTrailing 表示视图的X轴方向的位置：前、后
NSLayoutAttributeTop、 NSLayoutAttributeBottom 表示视图Y轴方向的位置：顶、底
NSLayoutAttributeBaseline 表示视图Y轴方向的位置：底部基准线
NSLayoutAttributeCenterX、NSLayoutAttributeCenterY 表示视图的中心点：视图在X轴的中心点、视图在Y轴的中心点

注意点

约束关系
// View的高度<=100
NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:greenView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationLessThanOrEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100];
约束优先级

Apple官方文档表示：可选约束因无法满足被跳过时，仍旧可能影响布局。当约束冲突时，Auto Layout会选择相对接近的解，选择打破某些约束。在这个选择过程中，被跳过可选约束同样能影响选择最终结果。

约束的安装与移除
// 约束安装示例
UIView *view1 = [[UIView alloc] init];
[self.view addSubview:view1];    
view1.translatesAutoresizingMaskIntoConstraints = NO;

NSLayoutConstraint *width = [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100];
NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100];

[self.view addConstraints:@[left, top]];
图片出处 ： WWDC2012 - Introduction to Auto Layout for iOS and OS X 图片出处 ： WWDC2012 - Introduction to Auto Layout for iOS and OS X 图片出处 ： WWDC2012 - Introduction to Auto Layout for iOS and OS X 
- (void)install {
        
    if (self.hasBeenInstalled) {
        return;
    }
    
    // 1.响应active方法，直接激活

    if ([self supportsActiveProperty] && self.layoutConstraint) {
        self.layoutConstraint.active = YES;
        [self.firstViewAttribute.view.mas_installedConstraints addObject:self];
        return;
    }
    
    // 2.否则，使用传统方式，把约束添加到对应位置

    // 利用各个元素，构造一个完整的约束对象 MASLayoutConstraint
    MAS_VIEW *firstLayoutItem = self.firstViewAttribute.item;
    NSLayoutAttribute firstLayoutAttribute = self.firstViewAttribute.layoutAttribute;
    MAS_VIEW *secondLayoutItem = self.secondViewAttribute.item;
    NSLayoutAttribute secondLayoutAttribute = self.secondViewAttribute.layoutAttribute;

    // 兼容省略写法，例如 make.left.equalTo(@10)，firstViewAttribute不是尺寸，却没有secondViewAttribute，则默认secondViewAttribute的secondLayoutItem是父view、secondLayoutAttribute与firstLayoutAttribute一致
    if (!self.firstViewAttribute.isSizeAttribute && !self.secondViewAttribute) {
        secondLayoutItem = self.firstViewAttribute.view.superview;
        secondLayoutAttribute = firstLayoutAttribute;
    }
    
    MASLayoutConstraint *layoutConstraint
        = [MASLayoutConstraint constraintWithItem:firstLayoutItem
                                        attribute:firstLayoutAttribute
                                        relatedBy:self.layoutRelation
                                           toItem:secondLayoutItem
                                        attribute:secondLayoutAttribute
                                       multiplier:self.layoutMultiplier
                                         constant:self.layoutConstant];
    
    layoutConstraint.priority = self.layoutPriority;
    layoutConstraint.mas_key = self.mas_key;
    
    // 获取约束安装位置installedView ：firstViewAttribute.view 和secondViewAttribute.view的最近公共祖先
    if (self.secondViewAttribute.view) {
        MAS_VIEW *closestCommonSuperview = [self.firstViewAttribute.view mas_closestCommonSuperview:self.secondViewAttribute.view];
        NSAssert(closestCommonSuperview,
                 @"couldn't find a common superview for %@ and %@",
                 self.firstViewAttribute.view, self.secondViewAttribute.view);
        self.installedView = closestCommonSuperview;
    } else if (self.firstViewAttribute.isSizeAttribute) {
        self.installedView = self.firstViewAttribute.view;
    } else {
        self.installedView = self.firstViewAttribute.view.superview;
    }
    
    //根据标识位，执行约束更新、安装；把安装完毕的约束存储到view的mas_installedConstraints集合中
    MASLayoutConstraint *existingConstraint = nil;
    if (self.updateExisting) {
        existingConstraint = [self layoutConstraintSimilarTo:layoutConstraint];
    }
    
    if (existingConstraint)      // 更新操作：更新常量即可
    {
        // just update the constant
        existingConstraint.constant = layoutConstraint.constant;
        self.layoutConstraint = existingConstraint;
    }
    else // 安装操作
    {
        [self.installedView addConstraint:layoutConstraint];
        self.layoutConstraint = layoutConstraint;
        [firstLayoutItem.mas_installedConstraints addObject:self];
    }
}

三、Auto Layout多种使用方式

1.NSLayoutConstraint

NSLayoutConstraint对象创建约束
NSLayoutConstraint优缺点讨论
示例代码
Snip20170917_25.png 
UIView *grayView = [[UIView alloc] init];
grayView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:grayView];    
grayView.translatesAutoresizingMaskIntoConstraints = NO;
    
NSLayoutConstraint *left = [NSLayoutConstraint constraintWithItem:grayView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:50];
NSLayoutConstraint *top = [NSLayoutConstraint constraintWithItem:grayView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:100];
NSLayoutConstraint *width = [NSLayoutConstraint constraintWithItem:grayView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100];
NSLayoutConstraint *height = [NSLayoutConstraint constraintWithItem:grayView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:100];
        
[self.view addConstraints:@[left, top]];
[grayView addConstraints:@[width, height]];

//  iOS8+
//  left.active = YES;
//  top.active = YES;
//  width.active = YES;
//  height.active = YES;

2.VFL

VFL创建约束
VFL优缺点讨论
示例代码
Snip20170917_19.png 
UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor redColor];
[self.view addSubview:view1];
    
UIView *view2 = [[UIView alloc] init];
view2.translatesAutoresizingMaskIntoConstraints = NO;
view2.backgroundColor = [UIColor blueColor];
[self.view addSubview:view2];

/*
     水平方向约束：
     view1.left = superView.left+50；
     view1.width = 100；
     view1.right+50 = view2.right；
     view2.right+50 = superVew.right；
     
     view1.top = view2.top;
     view1.bottom = view2.bottom;
     
     竖直方向
     view1.top = superView.top+100；
     view1.height = 100;
*/
NSArray<NSLayoutConstraint *> *horizontalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-50-[view1(100)]-50-[view2]-50-|" options:(NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom) metrics:nil views:NSDictionaryOfVariableBindings(view1, view2)];
[self.view addConstraints:horizontalConstraint];
    
NSArray<NSLayoutConstraint *> *verticalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[view1(100)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view1, view2)];
[self.view addConstraints:verticalConstraint];

3.Interface Builder

4.NSLayoutAnchor

NSLayoutAnchor创建约束
布局锚点类型 对应的子类 布局属性
X轴方向 NSLayoutXAxisAnchor leadingAnchor、trailingAnchor、leftAnchor、rightAnchor、centerXAnchor
Y轴方向 NSLayoutYAxisAnchor topAnchor、bottomAnchor、centerYAnchor、firstBaselineAnchor、lastBaselineAnchor
尺寸 NSLayoutDimension widthAnchor、heightAnchor
NSLayoutAnchor优缺点讨论
示例代码
Snip20170920_68.png 
    UIView *yellow = [[UIView alloc] init];
    yellow.translatesAutoresizingMaskIntoConstraints = NO;
    yellow.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:yellow];
    
    UIView *green = [[UIView alloc] init];
    green.translatesAutoresizingMaskIntoConstraints = NO;
    green.backgroundColor = [UIColor greenColor];
    [yellow addSubview:green];
    
    UIView *red = [[UIView alloc] init];
    red.translatesAutoresizingMaskIntoConstraints = NO;
    red.backgroundColor = [UIColor redColor];
    [yellow addSubview:red];
    
    CGFloat margin = 20;
    [yellow.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor constant:margin].active = YES;
    [yellow.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor constant:-margin].active = YES;
    [yellow.topAnchor constraintEqualToAnchor:self.view.topAnchor constant:100].active = YES;
    [yellow.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor constant:-margin].active = YES;
    
    [green.leadingAnchor constraintEqualToAnchor:yellow.leadingAnchor constant:margin].active = YES;
    [green.trailingAnchor constraintEqualToAnchor:yellow.trailingAnchor constant:-margin].active = YES;
    [green.topAnchor constraintEqualToAnchor:yellow.topAnchor constant:margin].active = YES;
    [green.bottomAnchor constraintEqualToAnchor:red.topAnchor constant:-margin].active = YES;
    
    [red.leadingAnchor constraintEqualToAnchor:green.leadingAnchor].active = YES;
    [red.trailingAnchor constraintEqualToAnchor:green.trailingAnchor].active = YES;
    [red.bottomAnchor constraintEqualToAnchor:yellow.bottomAnchor constant:-margin].active = YES;
    [red.heightAnchor constraintEqualToAnchor:green.heightAnchor multiplier:2.0].active = YES;

5.Masonry

示例代码
// 实现NSLayoutAnchor相同的布局
    UIView *yellow = [[UIView alloc] init];
    yellow.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:yellow];
    
    UIView *green = [[UIView alloc] init];
    green.backgroundColor = [UIColor greenColor];
    [yellow addSubview:green];
    
    UIView *red = [[UIView alloc] init];
    red.backgroundColor = [UIColor redColor];
    [yellow addSubview:red];
    
    CGFloat margin = 20;
    
    [yellow mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(self.view).offset(margin);
        make.trailing.equalTo(self.view).offset(-margin);
        make.top.equalTo(self.view).offset(100);
        make.bottom.equalTo(self.view).offset(-margin);
    }];
    
    [green mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(yellow).offset(margin);
        make.trailing.equalTo(yellow).offset(-margin);
        make.top.equalTo(yellow).offset(margin);
        make.bottom.equalTo(red.mas_top).offset(-margin);
    }];
    
    [red mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.equalTo(green);
        make.trailing.equalTo(green);
        make.bottom.equalTo(yellow).offset(-margin);
        make.height.equalTo(green).multipliedBy(2.0);
    }];

6.UIStackView

Snip20170919_49.png
UIStackView布局方案特点
UIStackView特殊性
示例代码
15057846355533.jpg 
    UIStackView *stackView = [[UIStackView alloc] init];
    stackView.backgroundColor = [UIColor redColor];
    stackView.layer.cornerRadius = 50;
    stackView.layer.masksToBounds = YES;
    stackView.axis = UILayoutConstraintAxisVertical;
    stackView.distribution = UIStackViewDistributionFill;
    stackView.alignment = UIStackViewAlignmentFill;
    stackView.spacing = 8;
    
    self.stackView = stackView;
    [self.view addSubview:self.stackView];
    
    [stackView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(84, 10, 200, 10));
    }];
    
    UILabel *label = [[UILabel alloc] init];
    label.backgroundColor = [UIColor yellowColor];
    label.text = @"标题标题";
    label.textAlignment = NSTextAlignmentCenter;
    [self.stackView addArrangedSubview:label];
    
    UIImageView *imageView = [[UIImageView alloc] init];
    imageView.image = [UIImage imageNamed:@"Snip20170906_172"];
    [imageView setContentHuggingPriority:249 forAxis:UILayoutConstraintAxisVertical];
    [imageView setContentCompressionResistancePriority:749 forAxis:UILayoutConstraintAxisVertical];
    
    [self.stackView addArrangedSubview:imageView];
    
    UIButton *btn = [[UIButton alloc] init];
    btn.backgroundColor = [UIColor yellowColor];
    [btn setTitle:@"按钮按钮" forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [self.stackView addArrangedSubview:btn];

四、Auto Layout关键知识

1.Auto Layout布局原则

坚持一致的布局方式
创建充分的、可满足的约束

2.translatesAutoresizingMaskIntoConstraints

- (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *))block {
    
    // 禁用Autoresizing
    self.translatesAutoresizingMaskIntoConstraints = NO;
    
    // 初始化constraintMaker，执行设置约束的block
    MASConstraintMaker *constraintMaker = [[MASConstraintMaker alloc] initWithView:self];
    block(constraintMaker);
    
    // 安装约束
    return [constraintMaker install];
}

3.alignmentRect对齐矩形

alignmentRect简介
Snip20171008_166.png

![Snip20171008_166]

UIView *greenView = [[UIView alloc] init];
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView];
    
[greenView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.equalTo(self.view).offset(50);
    make.top.equalTo(self.view).offset(100);            
    make.width.height.equalTo(@100);
}];
    
// 添加阴影
CALayer *greenViewLayer = greenView.layer;
greenViewLayer.shadowColor = [UIColor lightGrayColor].CGColor;
greenViewLayer.shadowOpacity = 1.0;  // 此参数默认为0，即阴影不显示
greenViewLayer.shadowRadius = 5.0;
greenViewLayer.shadowOffset = CGSizeMake(20, 20);
alignmentRect应用场景
UI切图上、左、右包含12pt阴影效果 实现效果
alignmentRect可视化
alignmentRect可视化 开启 alignmentRect可视化 效果

4.内在内容大小IntrinsicContentSize

IntrinsicContentSize介绍
图片出处 ：苹果官方文档 - Auto Layout Guide
IntrinsicContentSize原理分析
图片出处： 苹果官方文档 - Auto Layout Guide 
// Compression Resistance
View.height >= 0.0 * NotAnAttribute + IntrinsicHeight
View.width >= 0.0 * NotAnAttribute + IntrinsicWidth
 
// Content Hugging
View.height <= 0.0 * NotAnAttribute + IntrinsicHeight
View.width <= 0.0 * NotAnAttribute + IntrinsicWidth

UIButton *button = [[UIButton alloc] init];
[self.view addSubview:button];
[button setTitle:@"按钮按钮按钮" forState:UIControlStateNormal];
    
[button mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(self.view).offset(-10);
        make.left.equalTo(self.view).offset(10);
}];

[self.view layoutIfNeeded];
    
for (id constrain in button.constraints) 
{
NSLog(@"%@;  %f  %f",constrain, (CGFloat)([[constrain valueForKey:@"compressionResistancePriority"] floatValue]), [[constrain valueForKey:@"huggingPriority"] floatValue]);
}

NSLog(@"UIButton %@", NSStringFromCGSize(button.intrinsicContentSize));

2017-09-25 09:33:00.640 AutoLayoutTheory[25066:6102718] <NSContentSizeLayoutConstraint:0x6000000b3ce0 UIButton:0x7ff52f113060.width == 111>;  750.000000  250.000000
2017-09-25 09:33:00.640 AutoLayoutTheory[25066:6102718] <NSContentSizeLayoutConstraint:0x6000000b3d40 UIButton:0x7ff52f113060.height == 34>;  750.000000  250.000000
2017-09-25 09:33:00.641 AutoLayoutTheory[25066:6102718] UIButton {111, 34}
IntrinsicContentSize应用
    UILabel *label1 = [[UILabel alloc] init];
    label1.text = @"label1";
    label1.textColor = [UIColor blackColor];
    label1.backgroundColor = [UIColor greenColor];
    [self.view addSubview:label1];
    
    UITextField *textFeild = [[UITextField alloc] init];
    textFeild.placeholder = @"请输入文本";
    textFeild.textColor = [UIColor blackColor];
    textFeild.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:textFeild];
    
    [label1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view).offset(10);
        make.bottom.equalTo(self.view).offset(-10);
    }];
    
    [textFeild mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(label1.mas_right).offset(10);
        make.right.equalTo(self.view).offset(-10);
        make.bottom.equalTo(label1);
    }];
    
    // 水平方向 label保持原尺寸，textFeild允许拉伸/压缩
    [label1 setContentCompressionResistancePriority:UILayoutPriorityRequired-1 forAxis:UILayoutConstraintAxisHorizontal];
    [label1 setContentHuggingPriority:UILayoutPriorityRequired-1 forAxis:UILayoutConstraintAxisHorizontal];
内在内容尺寸IntrinsicContentSize与自适应尺寸FittingSize

5.Auto Layout与国际化

布局方向适配
图片出处： 苹果官方文档 - Auto Layout Guide
布局测试
15061736124730.jpg

五、Auto Layout布局周期

1.Auto Layout布局机制

图片出处： WWDC2015 - Mysteries of Auto Layout, Part 2

2.Auto Layout布局流程

图片出处： WWDC2015 - Mysteries of Auto Layout, Part 2
Constraints Change
图片出处： WWDC2015 - Mysteries of Auto Layout, Part 2
Deferred Layout Pass
图片出处： WWDC2015 - Mysteries of Auto Layout, Part 2 图片出处： WWDC2015 - Mysteries of Auto Layout, Part 2 图片出处： WWDC2015 - Mysteries of Auto Layout, Part 2 图片出处： WWDC2012：Introduction to Auto Layout for iOS and OS X

3.Auto Layout布局流程总结

图片出处： WWDC2015 - Mysteries of Auto Layout, Part 2

References

上一篇 下一篇

猜你喜欢

热点阅读