iOS屏幕适配

一. Auto Layout基础概念

二. Constraint

三. InterfaceBuilder

Content Hugging priority —— 抗拉伸优先级，抗拉伸优先级越高，系统就会选择其他的UI元素拉伸
Content Compression Resistance priority —— 抗压缩优先级，抗压缩优先级越高，系统就会选择其他的UI元素压缩

四. AutoLayout调试和高阶用法

1. 调试

检查是否有模糊的布局
p [self.tableView hasAmbiguousLayout]

在多种可能的布局之间做切换
p [self.tableView exerciseAmbiguityInLayout]

2. 用代码创建Constraint

//
//  CodeViewController.m

#import "CodeViewController.h"

@interface CodeViewController ()
@property (weak, nonatomic) IBOutlet UIButton *btnGreen;
@property (weak, nonatomic) IBOutlet UIButton *btnRed;

@end

@implementation CodeViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    /*
     @param toItem: 跟哪个view建立关系
    */
    //for btn green
    NSLayoutConstraint *constraintCenterXGreen = [NSLayoutConstraint constraintWithItem:_btnGreen attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
    //防止冲突
    _btnGreen.translatesAutoresizingMaskIntoConstraints = false;
    //父子关系,添加到父视图（较高层级的视图）上
    [self.view addConstraint:constraintCenterXGreen];
    
    NSLayoutConstraint *constraintTopGreen = [NSLayoutConstraint constraintWithItem:_btnGreen attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:100.0];
    [self.view addConstraint:constraintTopGreen];
    
    //for btn red
    NSLayoutConstraint *constraintCenterXRed = [NSLayoutConstraint constraintWithItem:_btnRed attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
    //防止冲突
    _btnRed.translatesAutoresizingMaskIntoConstraints = false;
    //父子关系,添加到父视图（较高层级的视图）上
    [self.view addConstraint:constraintCenterXRed];
    
    NSLayoutConstraint *constraintTopRed = [NSLayoutConstraint constraintWithItem:_btnRed attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:_btnGreen attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20.0];
    [self.view addConstraint:constraintTopRed];
}



@end

3. VFL的使用

//
//  CodeViewController.m

#import "CodeViewController.h"

@interface CodeViewController ()
@property (weak, nonatomic) IBOutlet UIButton *btnGreen;
@property (weak, nonatomic) IBOutlet UIButton *btnRed;

@end

@implementation CodeViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    /*
     @param toItem: 跟哪个view建立关系
    */
    //for btn green
    NSLayoutConstraint *constraintCenterXGreen = [NSLayoutConstraint constraintWithItem:_btnGreen attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
    //防止冲突
    _btnGreen.translatesAutoresizingMaskIntoConstraints = false;
    //父子关系,添加到父视图（较高层级的视图）上
    [self.view addConstraint:constraintCenterXGreen];
    
    //VFL语言
    //V代表纵向 |代表父视图
    NSArray *constraintsForGreen = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[_btnGreen]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_btnGreen)];
    [self.view addConstraints:constraintsForGreen];
    
    //for btn red
    NSLayoutConstraint *constraintCenterXRed = [NSLayoutConstraint constraintWithItem:_btnRed attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
    //防止冲突
    _btnRed.translatesAutoresizingMaskIntoConstraints = false;
    //父子关系,添加到父视图（较高层级的视图）上
    [self.view addConstraint:constraintCenterXRed];
    
    //VFL语言
    NSArray *constraintsForRed = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[_btnGreen]-20-[_btnRed]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(_btnRed,_btnGreen)];
    [self.view addConstraints:constraintsForRed];
}

@end

五. 第三方库Masonry(一般都使用这种方式)

先引入第三方库，需要通过终端

//
//  CodeViewController.m

#import "CodeViewController.h"
#import "Masonry.h"
#import "CustomView.h"

@interface CodeViewController ()
@property (weak, nonatomic) IBOutlet UIButton *btnGreen;
@property (weak, nonatomic) IBOutlet UIButton *btnRed;
@property (nonatomic, strong) CustomView *customView;

@end

@implementation CodeViewController

- (void)viewDidLoad {
    [super viewDidLoad];
   
    //for btn green
    [_btnGreen mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
        make.top.equalTo(@100);
        make.width.equalTo(@100);
        make.height.equalTo(@48);
    }];
   
    //for btn red
    [_btnRed mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
        make.top.equalTo(_btnGreen.mas_bottom).offset(60);
        make.width.equalTo(_btnGreen);
        make.height.equalTo(_btnGreen);
    }];
   
    self.customView = [CustomView new];
    [self.view addSubview:_customView];
    _customView.backgroundColor = [UIColor lightGrayColor];
    [_customView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(_btnRed.mas_bottom).offset(20);
        make.left.equalTo(@20);
        make.right.equalTo(@-20);
        make.bottom.equalTo(@20);
    }];
}



@end

//
//  CustomView.m

#import "CustomView.h"
#import "Masonry.h"
@interface CustomView()

@property (nonatomic, strong) UIButton *btnTest;
@property (nonatomic, assign) int btnWidth;

@end

@implementation CustomView

- (instancetype)init {
    self = [super init];
    if (self) {
        self.btnWidth = 100;
        self.btnTest = [UIButton new];
        _btnTest.backgroundColor = [UIColor blackColor];
        [_btnTest setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
        [self addSubview:_btnTest];
        
        [_btnTest addTarget:self action:@selector(btnTestClick) forControlEvents:UIControlEventTouchUpInside];
    }
    return self;
}

+ (BOOL)requiresConstraintBasedLayout {
    return true;
}

- (void)updateConstraints {
    [_btnTest mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@20);
        make.centerX.equalTo(self);
        make.width.equalTo(@(_btnWidth));
        make.height.equalTo(@48);
    }];
    
    
    [super updateConstraints];
}

- (void)btnTestClick {
    _btnWidth = 150;
    [self setNeedsUpdateConstraints];//更新，自动调用updateConstraints
}
@end