iOS屏幕适配教程（手动布局和自动布局）

iOS屏幕适配教程

  1.通过frame进行适配

在iOS早期开发，都是使用frame属性进行屏幕适配，需要多套代码，非常麻烦。

//使用frame添加控件view，并设置属性，但是只能使用指定屏幕尺寸
    [super didReceiveMemoryWarning];
    UIView *greenView=[[UIView alloc]init];
    greenView.frame=CGRectMake(20, 20, 20, 20);
    greenView.backgroundColor=[UIColor greenColor];
    [self.view addSubview:greenView];

2.Autoresizing实现适配

随着iOS的发展，后期苹果公司添加了Autoresizing功能，用来约束父子控件之间的关系，以父控件作为参照进行设置，设置相应的参数。相应可用拖拽来实现，下面列出用代码实现的方法

//设置两个view，通过代码实现两个view（blueView，redView）一起变化
@interface ViewController ()
@property(nonatomic,weak)UIView *blueView;
//此处声明redView父控件blueView
@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
//    1.创建蓝色的视图
    UIView *blueView = [[UIView alloc]init];
    blueView.frame =  CGRectMake(0, 0, 200, 200);
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    self.blueView = blueView;
//    2.创建红色的视图
    UIView *redView = [[UIView alloc]init];
    CGFloat redViewH = 30;
    redView.frame = CGRectMake(0, 170, 200, redViewH);
    redView.backgroundColor = [UIColor redColor];
    [blueView addSubview:redView];
//    3.当修改蓝色视图的frame的时候，红色的视图跟着变化
//    红色的宽带随着蓝色的宽度变化而变化，距离顶部的间距始终是拉伸的
//    UIViewAutoresizingNone                 = 0,     //无拉伸
//    UIViewAutoresizingFlexibleLeftMargin   = 1 << 0,//距离左边拉伸
//    UIViewAutoresizingFlexibleWidth        = 1 << 1,//宽度拉伸
//    UIViewAutoresizingFlexibleRightMargin  = 1 << 2,//距离右边边拉伸
//    UIViewAutoresizingFlexibleTopMargin    = 1 << 3,//顶部拉伸
//    UIViewAutoresizingFlexibleHeight       = 1 << 4,//高度拉伸
    redView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
/**
 *  当点击屏幕的时候就会触发这个方法，点击的时候，让蓝色视图的frame变化。
 *
 *  @param touches <#touches description#>
 *  @param event   <#event description#>
 */
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ 
    CGRect tempFrame = self.blueView.frame;
    tempFrame.size.width +=30;
    tempFrame.size.height +=30;
    self.blueView.frame = tempFrame;
}
@end

3.Aotolayout实现适配

因为autorezing不能设置同级控件之间的关系，假设在竖屏下, 屏幕底部有两个按钮, 这两个按钮的间距为一个固定的值(宽度不指定); 当切换为横屏的时候要求这两个按钮还显示在屏幕底部, 并且按钮间的间距不变, 按钮可以随之变宽，通过autorezing是无法实现的，所以在iOS6之后，苹果公司推出aotolayout,既可以设置父子控件之间的关系也可以设置同级控件之间的关系，一经推出便在ios7开始大规模使用。

aotolayout里边的两个核心概念：约束和参照，一般一个控件确定位置需要四个约束，且这些约束都有相应参照的控件。

在使用aotolayout设置控件的时候，屏幕上控件的的位置区域会有两种颜色：

黄色：表示当前的显示效果和实际效果不匹配，需要更新frame

红色：表示约束不完整，约束冲突（表示两个或者多个约束约束的效果不一致）

在开发的时候基本都是使用拖拽及设置参数的方法进行设置，相对较为简单，本位就不加赘述，下面笔者通过代码进行设置

//    创建一个蓝色的View视图
    UIView*blueView=[[UIView alloc]init];
    blueView.backgroundColor=[UIColor  blueColor];
    [self.view addSubview:blueView];

因为AutoLayout和Autoresizing不能重用，因此需要去掉autoresizing，所以可能添加约束的控件

//去掉所以可能添加约束的控件的autoresizing属性
    self.view.translatesAutoresizingMaskIntoConstraints=NO;
    blueView.translatesAutoresizingMaskIntoConstraints=NO;

 给控件的属性赋值 ，并添加在对应视图上

    //设置left
NSLayoutConstraint *leftBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
     //设置right
    NSLayoutConstraint *rightBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    //设置top
    NSLayoutConstraint *topBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:30];
    //设置height
    NSLayoutConstraint *heighBlue=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:30];
    //添加到对应参照控件上
    [self.view addConstraints:@[leftBlue,rightBlue,topBlue]];
    [blueView addConstraint:heightBlue];

 可以看到，通过代码实现autolayout方法非常麻烦，因此通过拖拽创建相对方便快捷，但是在做一些支付信息，密码保护等功能的时候，尽量使用代码进行创建。

4.通过sizeClass进行适配

因为autolayout不能满足设置一套约束，在所有的屏幕都适配，所以出现了sizeClass,size用来区分屏幕

sizeclass中把宽高各分成了三种类型regualr，compact，any，当宽度和高度各是某种类型的时候，就会确定某一类屏幕，当宽高均为any的时候，即可适配所有屏幕。所以确定九类屏幕，只是不屏幕进行了区分，具体的约束关系，但是具体的实现还需要autolayout来实现。