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

2019-11-14 18:38:29

字体：大中小

来源：转载

供稿：网友

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

运行效果如下

是不是棒棒哒，我们再来写个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);    }];