iOS中的屏幕适配之Autolayout（初级）

这是第二篇博客啦啦啦，来来来，嗨起来，今天我们要说的时iOS的屏幕适配，随着APPLE推出的手机越来越多，屏幕的尺寸也越来越多，而屏幕的适配确是相当的麻烦，今天我要说的，网上也许早就有了，我只是说出自己的理解(可能不对啊，勿喷....）

Autolayout其实就是约束了，今天讲得是代码添加约束，用到的第三方是Masonry，相信代码写约束的都知道这个第三方库，好了，废话不多说，代码搞起

首先你要去下载个Masonry,或者用cocoapods加到工程中,先来个简单点得例子啊，下面请重点看注释啊

UIView *view1 = [[UIView alloc] init];
    view1.backgroundColor = [UIColor blackColor];
    [self.view addSubview:view1];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        //使view1的中点坐标等于self.view的中点
        make.center.equalTo(self.view);
        //设置view1的size为宽度300，高度300，这里的mas_equalTo好像是设置具体数值用的，而equalTo却不是
        make.size.mas_equalTo(CGSizeMake(300, 300));
    }];

运行效果

可以看到横竖屏都是一样的，其实Autolayout学的好的话，只需要写一套代码就适配所以尺寸了，而且不怕APPLE后来在出其他尺寸，一劳永逸（就是代码特别烦）

现在来点复杂的，2块view，第一块view左边距离父视图20，第二块view右边距离父视图30，2块view等宽间隔为10

UIView *view1 = [[UIView alloc] init];
    view1.backgroundColor = [UIColor blackColor];
    [self.view addSubview:view1];
    
    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:view2];
    
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        //view1的左边距离self.view的左边距离为20
        make.left.equalTo(self.view.mas_left).offset(20);
        //view1的右边距离view2的左边距离为为-10，为什么是负数，其实是往右边是正，左边为负啦(我自己理解的啊),top和buttom也一样
        make.right.equalTo(view2.mas_left).offset(-10);
        //这句的意思就是view1的中点得Y值等于self.view的中点的Y值
        make.centerY.mas_equalTo(self.view.mas_centerY);
        //view1的高度是150，这里要用对象
        make.height.mas_equalTo(@150);
        //view1的宽度等于view2
        make.width.equalTo(view2);
    }];
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        //view2的左边距离view1的右边距离为10，其实就是间隔为10了
        make.left.equalTo(view1.mas_right).offset(10);
        //view2的右边距离self.view的右边距离为-30，自己脑补为什么是负的啊
        make.right.equalTo(self.view.mas_right).offset(-30);
        //这句的意思就是view2的中点得Y值等于self.view的中点的Y值
        make.centerY.mas_equalTo(self.view.mas_centerY);
        //view2的高度是150，这里要用对象
        make.height.mas_equalTo(@150);
        //view2的宽度等于view1
        make.width.equalTo(view1);
    }];

运行效果如下

是不是棒棒哒，我们再来写个3块view的，其中2块view的位置和上面一样，第三块view在第二块view的右边，距离为15，第三块view右边距离父视图距离为20，我希望小伙伴们自己试试，如果一遍就能敲出来所需要的效果的话，证明Masonry已经入门了

UIView *view1 = [[UIView alloc] init];
    view1.backgroundColor = [UIColor blackColor];
    [self.view addSubview:view1];
    
    UIView *view2 = [[UIView alloc] init];
    view2.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:view2];
    
    UIView *view3 = [[UIView alloc] init];
    view3.backgroundColor = [UIColor redColor];
    [self.view addSubview:view3];
    
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        //view1的左边距离self.view的左边距离为20
        make.left.equalTo(self.view.mas_left).offset(20);
        //view1的右边距离view2的左边距离为为-10，为什么是负数，其实是往右边是正，左边为负啦(我自己理解的啊),top和buttom也一样
        make.right.equalTo(view2.mas_left).offset(-10);
        //这句的意思就是view1的中点得Y值等于self.view的中点的Y值
        make.centerY.mas_equalTo(self.view.mas_centerY);
        //view1的高度是150，这里要用对象
        make.height.mas_equalTo(@150);
        //view1的宽度等于view2
        make.width.equalTo(view2);
    }];
    [view2 mas_makeConstraints:^(MASConstraintMaker *make) {
        //view2的左边距离view1的右边距离为10
        make.left.equalTo(view1.mas_right).offset(10);
        //view2的右边距离view3的右边距离为-15，自己脑补为什么是负的啊
        make.right.equalTo(view3.mas_left).offset(-15);
        //这句的意思就是view2的中点得Y值等于self.view的中点的Y值
        make.centerY.mas_equalTo(self.view.mas_centerY);
        //view2的高度是150，这里要用对象
        make.height.mas_equalTo(@150);
        //view2的宽度等于view3
        make.width.equalTo(view3);
    }];
    
    [view3 mas_makeConstraints:^(MASConstraintMaker *make) {
        //view3的左边距离view2的右边距离为15
        make.left.equalTo(view2.mas_right).offset(15);
        //view3的右边距离self.view的右边距离为-20，自己脑补为什么是负的啊
        make.right.equalTo(self.view.mas_right).offset(-20);
        //这句的意思就是view3的中点得Y值等于self.view的中点的Y值
        make.centerY.mas_equalTo(self.view.mas_centerY);
        //view3的高度是150，这里要用对象
        make.height.mas_equalTo(@150);
        //view3的宽度等于view1
        make.width.equalTo(view1);
    }];

运行效果

今天的博客就写到这里的，希望大家能够入门，暂时还没在项目中用这种约束，都是比例写的适配（其实效果不怎么好，但没有Autolayout这么麻烦），在以后的项目中试试Masonry写适配，其实这些都是我自己的理解，如果不对的话，欢迎指正，谢谢