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);    }];