AutoLayout屏幕适配

## 屏幕适配的发展历史

• iPhone3GS\iPhone4
  • 没有屏幕适配可言
  • 全部用frame、bounds、center进行布局
  • 很多这样的现象：坐标值、宽度高度值全部写死

objc
UIButton *btn1 = [[UIButton alloc] init];
btn1.frame = CGRectMake(0, 0, 320 - b, 480 - c);

• iPad出现、iPhone横屏

  • 出现Autoresizing技术
    • 让横竖屏适配相对简单
    • 让子控件可以跟随父控件的行为自动发生相应的变化
    • 前提是：关闭Autolayout功能
    • 局限性
      • 只能解决子控件跟父控件的相对关系问题
      • 不能解决兄弟控件的相对关系问题

• iOS 6.0（Xcode4）开始

  • 出现了Autolayout技术
  • 从Xcode5.0(iOS 7.0)开始，开始流行Autolayout

Autolayout

• 两个核心概念: 参照，约束

手动添加约束

添加约束的规则

• 在创建约束后，需要将其添加到作用的View上

• 在添加时要注意目标View需要遵从一下规则:

1. 对于两个同层级view之间的约束关机，添加到他们的父view上
2. 对于不同层级view之间的约束关系，添加到最接近的共同父view上
3. 对于有层次关系的两个view之间的约束，添加到层次较高的父view上

添加约束简单例子

• 苹果官方添加约束第一种直接添加的方法

/** 不要将AutoresizingMask 转为 Autolayout的约束 */
blueView.translatesAutoresizingMaskIntoConstraints = NO;

 UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    
    /** 宽度约束 : 宽度是300 */
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:0.0 constant:300];
    
    [blueView addConstraint:widthConstraint];

代码实现Autolayout方法1-系统

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

1. view1      : 要约束的控件
2. attr1   : 约束的类型(做什么样的约束)
3. relation     : 与参照控件之间的关系
4. view2   : 参照的控件
5. attr2   : 约束的类型
6. multiplier   : 乘数
7. c            : 常量

• 苹果官方批量添加约束 - VFL
• 什么是VFL语言

1. VFL全称是Visual Format Language，翻译是“可视化格式语言”
2. VFL 是苹果公司为了简化Autolayout的编码而推出的抽象语言

+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *, id> *)views;

代码实现Autolayout方法2-Masonry

• 目前最流行的Autolayout第三方框架
• 用优雅的代码方式编写Autolayout
• 省去了苹果官方超长的Autolayout代码
• 大大提高了开发效率
• 框架地址: ****https://github.com/SnapKit/Masonry****

使用例子

/**
 *   删除以前的约束，重新添加约束
        [blueView mas_remakeConstraints:^(MASConstraintMaker *make) {
    
        }];
 * 更新约束
        [blueView mas_updateConstraints:^(MASConstraintMaker *make) {
 
        }];
 */
 
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    
    /** 添加新的约束 */
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
            /** 在block中make创建约束 */
        
        /** 尺寸100*100，粘着父视图间距右下角20 */
        make.width.mas_equalTo(100);
        make.height.mas_equalTo(100);
        make.right.equalTo(self.view).offset(-20);
        make.bottom.equalTo(self.view).offset(-20);
        
    }];
    
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        /** 在block中make创建约束 */
        
        /** 尺寸100*100，粘着父视图间距右下角20 */
        make.width.height.mas_equalTo(100);
        make.height.mas_equalTo(100);
        make.right.equalTo(self.view).offset(-20);
        make.bottom.equalTo(self.view).offset(-20);
        
    }];

    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        /** 在block中make创建约束 */
        
        /** 尺寸100*100，粘着父视图间距右下角20 */
//        make.size.equalTo([NSValue valueWithCGSize:CGSizeMake(100, 100)]);
        make.size.mas_equalTo(CGSizeMake(100, 100));
        make.height.mas_equalTo(100);
        make.right.equalTo(self.view).offset(-20);
        make.bottom.equalTo(self.view).offset(-20);
        
    }];

    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        /** 在block中make创建约束 */
        
        /** 尺寸100*100，粘着父视图间距右下角20 */
        /** 默认父控件作为参考 */
        make.size.mas_equalTo(100);
        make.right.offset(-20);
        make.bottom.offset(-20);
        
    }];
    
    
    /**
     * 乘数比例
     */
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        /** 在block中make创建约束 */
        
        /** 尺寸100*100，粘着父视图间距右下角20 */
        /** 默认父控件作为参考 */
        
        make.size.mas_equalTo(self.view).multipliedBy(0.5);/** 父视图size的一半 */
        make.right.equalTo(self.view).offset(-20);
        make.bottom.equalTo(self.view).offset(-20);
        
    }];
    
    
    /** 居中（水平+垂直） */
    /** 尺寸是父控件的一半 */
    
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
       
        make.size.mas_equalTo(self.view).multipliedBy(0.5);
        make.center.mas_equalTo(self.view);
        
    }];
    
    
    
    /** 间距 */
    /**
     * 距离父控件内部都是50间距
     */
    
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
       
        make.left.mas_equalTo(self.view).offset(50);
        make.right.mas_equalTo(self.view).offset(-50);
        make.top.mas_equalTo(self.view).offset(50);
        make.bottom.mas_equalTo(self.view).offset(-50);
        
    }];
    
    /** 精简 */
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.left.and.top.mas_equalTo(self.view).offset(50);
        make.right.and.bottom.mas_equalTo(self.view).offset(-50);
        
    }];
    
    /** 精简边缘 */
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(50, 100, 50, 50));/** 设置间距 */
        make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsZero);/** 跟父控件一样大 */
    }];    

约束类型

1.尺寸 : width \ height \ size

2.边界 : left \ leading \ right \ trailing \ top \ bottom

3.中心点: center \ centerY \ center X

4.边距 : edgs

有个宏在头文件，用在引用头文件前面，就不用每个方法添加"mas_"了

//define this constant if you want to use Masonry without the 'mas_' prefix
//#define MAS_SHORTHAND

//define this constant if you want to enable auto-boxing for default syntax
//#define MAS_SHORTHAND_GLOBALS