## 屏幕適配的發展歷史

• iPhone3GS\iPhone4 ? ? - 沒有屏幕適配可言 ? ? - 全部用frame、bounds、center進行布局 ? ? - 很多這樣的現象：坐標值、寬度高度值全部寫死

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

• iPad出現、iPhone橫屏 ? ? - 出現Autoresizing技術 ? ? ? ? - 讓橫豎屏適配相對簡單 ? ? ? ? - 讓子控件可以跟隨父控件的行為自動發生相應的變化 ? ? ? ? - 前提是：關閉Autolayout功能 ? ? ? ? - 局限性 ? ? ? ? ? ? - 只能解決子控件跟父控件的相對關系問題 ? ? ? ? ? ? - 不能解決兄弟控件的相對關系問題

• iOS 6.0（Xcode4）開始 ? ? - 出現了Autolayout技術 ? ? - 從Xcode5.0(iOS 7.0)開始，開始流行Autolayout

Autolayout

• 兩個核心概念: 參照，約束

手動添加約束

添加約束的規則

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

• 在添加時要注意目標View需要遵從一下規則:

對于兩個同層級view之間的約束關機，添加到他們的父view上

對于不同層級view之間的約束關系，添加到最接近的共同父view上

對于有層次關系的兩個view之間的約束，添加到層次較高的父view上

添加約束簡單例子

• 蘋果官方添加約束第一種直接添加的方法

/** 不要將AutoresizingMask 轉為 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]; 復制代碼

代碼實現Autolayout方法1-系統

+(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 ? ? : 與參照控件之間的關系 4. view2 : 參照的控件 5. attr2 : 約束的類型 6. multiplier ? : 乘數 7. c? ? ? ? ? ? : 常量復制代碼

• 蘋果官方批量添加約束 - VFL
• 什么是VFL語言

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

VFL 是蘋果公司為了簡化Autolayout的編碼而推出的抽象語言

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

代碼實現Autolayout方法2-Masonry

• 目前最流行的Autolayout第三方框架
• 用優雅的代碼方式編寫Autolayout
• 省去了蘋果官方超長的Autolayout代碼
• 大大提高了開發效率
• 框架地址: 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創建約束 *//** 尺寸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創建約束 *//** 尺寸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創建約束 *//** 尺寸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創建約束 *//** 尺寸100*100，粘著父視圖間距右下角20 *//** 默認父控件作為參考 */make.size.mas_equalTo(100);make.right.offset(-20);make.bottom.offset(-20);}];/*** 乘數比例*/[blueView mas_makeConstraints:^(MASConstraintMaker *make) {/** 在block中make創建約束 *//** 尺寸100*100，粘著父視圖間距右下角20 *//** 默認父控件作為參考 */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);}];/** 間距 *//*** 距離父控件內部都是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);}];/** 精簡 */[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);}];/** 精簡邊緣 */[blueView mas_makeConstraints:^(MASConstraintMaker *make) {make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsMake(50, 100, 50, 50));/** 設置間距 */make.edges.mas_equalTo(self.view).insets(UIEdgeInsetsZero);/** 跟父控件一樣大 */}]; ? ? 復制代碼

約束類型

1.尺寸 : width \ height \ size

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

3.中心點: center \ centerY \ center X

4.邊距 : edgs

有個宏在頭文件，用在引用頭文件前面，就不用每個方法添加"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 復制代碼

轉載于:https://juejin.im/post/5b3cb9fc5188251aa91d8daa

總結

以上是生活随笔為你收集整理的AutoLayout屏幕适配的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。