## 屏幕適配的發(fā)展歷史

• iPhone3GS\iPhone4 ? ? - 沒(méi)有屏幕適配可言 ? ? - 全部用frame、bounds、center進(jìn)行布局 ? ? - 很多這樣的現(xiàn)象：坐標(biāo)值、寬度高度值全部寫(xiě)死

objc UIButton *btn1 = [[UIButton alloc] init]; btn1.frame = CGRectMake(0, 0, 320 - b, 480 - c); 復(fù)制代碼

• iPad出現(xiàn)、iPhone橫屏 ? ? - 出現(xiàn)Autoresizing技術(shù) ? ? ? ? - 讓橫豎屏適配相對(duì)簡(jiǎn)單 ? ? ? ? - 讓子控件可以跟隨父控件的行為自動(dòng)發(fā)生相應(yīng)的變化 ? ? ? ? - 前提是：關(guān)閉Autolayout功能 ? ? ? ? - 局限性 ? ? ? ? ? ? - 只能解決子控件跟父控件的相對(duì)關(guān)系問(wèn)題 ? ? ? ? ? ? - 不能解決兄弟控件的相對(duì)關(guān)系問(wèn)題

• iOS 6.0（Xcode4）開(kāi)始 ? ? - 出現(xiàn)了Autolayout技術(shù) ? ? - 從Xcode5.0(iOS 7.0)開(kāi)始，開(kāi)始流行Autolayout

Autolayout

• 兩個(gè)核心概念: 參照，約束

手動(dòng)添加約束

添加約束的規(guī)則

• 在創(chuàng)建約束后，需要將其添加到作用的View上

• 在添加時(shí)要注意目標(biāo)View需要遵從一下規(guī)則:

對(duì)于兩個(gè)同層級(jí)view之間的約束關(guān)機(jī)，添加到他們的父view上

對(duì)于不同層級(jí)view之間的約束關(guān)系，添加到最接近的共同父view上

對(duì)于有層次關(guān)系的兩個(gè)view之間的約束，添加到層次較高的父view上

添加約束簡(jiǎn)單例子

• 蘋(píng)果官方添加約束第一種直接添加的方法

/** 不要將AutoresizingMask 轉(zhuǎn)為 Autolayout的約束 */ blueView.translatesAutoresizingMaskIntoConstraints = NO;UIView *blueView = [[UIView alloc] init];blueView.backgroundColor = [UIColor blueColor];[self.view addSubview:blueView];/** 寬度約束 : 寬度是300 */NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:0.0 constant:300];[blueView addConstraint:widthConstraint]; 復(fù)制代碼

代碼實(shí)現(xiàn)Autolayout方法1-系統(tǒng)

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;1. view1 ? ? : 要約束的控件 2. attr1 : 約束的類型(做什么樣的約束) 3. relation ? ? : 與參照控件之間的關(guān)系 4. view2 : 參照的控件 5. attr2 : 約束的類型 6. multiplier ? : 乘數(shù) 7. c? ? ? ? ? ? : 常量復(fù)制代碼

• 蘋(píng)果官方批量添加約束 - VFL
• 什么是VFL語(yǔ)言

VFL全稱是Visual Format Language，翻譯是“可視化格式語(yǔ)言”

VFL 是蘋(píng)果公司為了簡(jiǎn)化Autolayout的編碼而推出的抽象語(yǔ)言

+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *, id> *)views; 復(fù)制代碼

代碼實(shí)現(xiàn)Autolayout方法2-Masonry

• 目前最流行的Autolayout第三方框架
• 用優(yōu)雅的代碼方式編寫(xiě)Autolayout
• 省去了蘋(píng)果官方超長(zhǎng)的Autolayout代碼
• 大大提高了開(kāi)發(fā)效率
• 框架地址: https://github.com/SnapKit/Masonry

使用例子

/*** ? 刪除以前的約束，重新添加約束[blueView mas_remakeConstraints:^(MASConstraintMaker *make) {}];* 更新約束[blueView mas_updateConstraints:^(MASConstraintMaker *make) {}];*/UIView *blueView = [[UIView alloc] init];blueView.backgroundColor = [UIColor blueColor];[self.view addSubview:blueView];blueView.translatesAutoresizingMaskIntoConstraints = NO;/** 添加新的約束 */[blueView mas_makeConstraints:^(MASConstraintMaker *make) {/** 在block中make創(chuàng)建約束 *//** 尺寸100*100，粘著父視圖間距右下角20 */make.width.mas_equalTo(100);make.height.mas_equalTo(100);make.right.equalTo(self.view).offset(-20);make.bottom.equalTo(self.view).offset(-20);}];[blueView mas_makeConstraints:^(MASConstraintMaker *make) {/** 在block中make創(chuàng)建約束 *//** 尺寸100*100，粘著父視圖間距右下角20 */make.width.height.mas_equalTo(100);make.height.mas_equalTo(100);make.right.equalTo(self.view).offset(-20);make.bottom.equalTo(self.view).offset(-20);}];[blueView mas_makeConstraints:^(MASConstraintMaker *make) {/** 在block中make創(chuàng)建約束 *//** 尺寸100*100，粘著父視圖間距右下角20 */ //? ? ? ? make.size.equalTo([NSValue valueWithCGSize:CGSizeMake(100, 100)]);make.size.mas_equalTo(CGSizeMake(100, 100));make.height.mas_equalTo(100);make.right.equalTo(self.view).offset(-20);make.bottom.equalTo(self.view).offset(-20);}];[blueView mas_makeConstraints:^(MASConstraintMaker *make) {/** 在block中make創(chuàng)建約束 *//** 尺寸100*100，粘著父視圖間距右下角20 *//** 默認(rèn)父控件作為參考 */make.size.mas_equalTo(100);make.right.offset(-20);make.bottom.offset(-20);}];/*** 乘數(shù)比例*/[blueView mas_makeConstraints:^(MASConstraintMaker *make) {/** 在block中make創(chuàng)建約束 *//** 尺寸100*100，粘著父視圖間距右下角20 *//** 默認(rèn)父控件作為參考 */make.size.mas_equalTo(self.view).multipliedBy(0.5);/** 父視圖size的一半 */make.right.equalTo(self.view).offset(-20);make.bottom.equalTo(self.view).offset(-20);}];/** 居中（水平+垂直） *//** 尺寸是父控件的一半 */[blueView mas_makeConstraints:^(MASConstraintMaker *make) {make.size.mas_equalTo(self.view).multipliedBy(0.5);make.center.mas_equalTo(self.view);}];/** 間距 *//*** 距離父控件內(nèi)部都是50間距*/[blueView mas_makeConstraints:^(MASConstraintMaker *make) {make.left.mas_equalTo(self.view).offset(50);make.right.mas_equalTo(self.view).offset(-50);make.top.mas_equalTo(self.view).offset(50);make.bottom.mas_equalTo(self.view).offset(-50);}];/** 精簡(jiǎn) */[blueView mas_makeConstraints:^(MASConstraintMaker *make) {make.left.and.top.mas_equalTo(self.view).offset(50);make.right.and.bottom.mas_equalTo(self.view).offset(-50);}];/** 精簡(jiǎn)邊緣 */[blueView mas_makeConstraints:^(MASConstraintMaker *make) {make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(50, 100, 50, 50));/** 設(shè)置間距 */make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsZero);/** 跟父控件一樣大 */}]; ? ? 復(fù)制代碼

約束類型

1.尺寸 : width \ height \ size

2.邊界 : left \ leading \ right \ trailing \ top \ bottom

3.中心點(diǎn): center \ centerY \ center X

4.邊距 : edgs

有個(gè)宏在頭文件，用在引用頭文件前面，就不用每個(gè)方法添加"mas_"了

//define this constant if you want to use Masonry without the 'mas_' prefix //#define MAS_SHORTHAND//define this constant if you want to enable auto-boxing for default syntax //#define MAS_SHORTHAND_GLOBALS 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5b3cb9fc5188251aa91d8daa

總結(jié)

以上是生活随笔為你收集整理的AutoLayout屏幕适配的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。