AutoLayout螢幕適配

碼路芽子發表於2018-07-04

## 螢幕適配的發展歷史

  • 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需要遵從一下規則:

  1. 對於兩個同層級view之間的約束關機，新增到他們的父view上
  2. 對於不同層級view之間的約束關係，新增到最接近的共同父view上
  3. 對於有層次關係的兩個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語言
  1. VFL全稱是Visual Format Language，翻譯是“視覺化格式語言”
  2. 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
複製程式碼

相關文章