iOS——代碼自動布局

一、Auto Layout

1. 蘋果官方是如何描述Auto Layout的：Auto Layout 是一個系統，可以讓你通過建立元素之間關系的數學描述來布局應用程式的使用者界面，是一種基于限制的，描述性的布局系統

2. 注意上述的一點 : 布局是設定在兩個 view 間的一種限制，是以我們不能隻設定一個 view 的限制，這樣做沒有什麼意義，它必須是相對的

3. 所有的布局都遵循以下的公式 view1.property = (view.2property * multiplier) + constant 翻譯過來就是 : view1 的某個屬性的值 = （view2的某個屬性的值 * 系數）+ 常量

二、Autoresizing Mask

1. 在我們為 view 設定限制條件時，必須将其下面這個 屬性設定為 NO，該屬性預設為 YES

@property(nonatomic)BOOL translatesAutoresizingMaskIntoConstraintsNS_AVAILABLE_IOS(6_0);

當它為 YES 時，系統會自動将 Autoresizing Mask 轉換為 Auto Layout 的限制，這樣會和我們設定的限制發生沖突

但是在 XIB/Storyboard 中，系統會自動将我們幫這個屬性設定為 NO，即在 XIB/Storyboard 中勾選了 Use AutoLayout 後，AutoResizing Mask 就被廢棄

三、NSLayoutConstraint

官方 API 提供的是 NSLayoutConstraint 類，一個 NSLayoutConstraint 類的對象就代表一條限制

該類有一個類方法用來建立限制對象，這個方法是最常用的

// 參數 1 : 需要添加限制的 view
// 參數 2 : 需要填加的限制（左邊、右邊、寬度、高度等）
// 參數 3 : 限制關系（大于、小于、相等）
// 參數 4 : 參數 view（限制是相對于哪個 view 而言）
// 參數 5 : 參照 view 的哪一個參數（左邊、右邊、寬度、高度等）
// 參數 6 : 系數
// 參數 7 : 常量
+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(            
NSLayoutRelation
           
        
)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;           

NSLayoutAttribute 枚舉如下

typedef NS_ENUM(NSInteger, NSLayoutAttribute) {
        NSLayoutAttributeLeft = 1,  // 左邊，永遠指左邊
        NSLayoutAttributeRight,     // 右邊，永遠指有伴
        NSLayoutAttributeTop,       // 頂部
        NSLayoutAttributeBottom,    // 底部
        NSLayoutAttributeLeading,   // 前面，在某些從右至左為習慣的的确會變成右邊
        NSLayoutAttributeTrailing,  // 後面，在某些從右至左為習慣的的确會變成左邊
        NSLayoutAttributeWidth,     // 寬度
        NSLayoutAttributeHeight,    // 高度
        NSLayoutAttributeCenterX,   // 中點的 X 值
        NSLayoutAttributeCenterY,   // 中點的 Y 值
        NSLayoutAttributeLastBaseline,  // 基準線:位于視圖底部上方放置文字的地方
        NSLayoutAttributeBaseline NS_SWIFT_UNAVAILABLE("Use 'lastBaseline' instead") = NSLayoutAttributeLastBaseline,
        NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),
        
        
        NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
        NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
        NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
        NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
        NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
        NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
        NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
        NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
        
        NSLayoutAttributeNotAnAttribute = 0   // 沒有屬性
    };
           

NSLayoutRelation枚舉如下

typedef NS_ENUM(NSInteger, NSLayoutRelation) {
        NSLayoutRelationLessThanOrEqual = -1,    // 小于或等于（先使用等于，如果等于不滿足再使用小于）
        NSLayoutRelationEqual = 0,               // 等于
        NSLayoutRelationGreaterThanOrEqual = 1,  // 大于或等于（先使用等于，如果等于不滿足再使用大于）
    };
           

假如設定某個 view的限制是大于等于50，那麼首先會使用50，當視圖被拉伸的時候，50就無法滿足，此時就會使用大于50的值

2. 執行個體一：設定子視圖在父視圖中，并且上下左右到父視圖的上下左右都距離 50

self.view.backgroundColor = [UIColor yellowColor];
    
    // 建立視圖
    UIView * view = [[UIView alloc] init];
    
    // 設定背景色
    view.backgroundColor = [UIColor greenColor];
    
    // 添加
    [self.view addSubview:view];
    
    // 關閉系統自定義布局
    view.translatesAutoresizingMaskIntoConstraints = NO;
    
    // 設定 子視圖左側距離父視圖左側 50
    NSLayoutConstraint * LC1 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:50];
    
    // 設定 子視圖頂部距離 父視圖頂部 50
    NSLayoutConstraint * LC2 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:50];
    
    // 設定 子視圖右側距離 父視圖右側 50
    NSLayoutConstraint * LC3 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-50];
    
    // 設定 子視圖底部距離 父視圖底部 50
    NSLayoutConstraint * LC4 = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant:-50];
    
    // 将子視圖的限制添加到父視圖上
    [self.view addConstraints:@[LC1, LC2, LC3, LC4]];
           

效果如圖

3、執行個體二：子視圖在父視圖中間，且 width 為 300，height 為 200

// 建立 UIView 對象
UIView * view = [[UIView alloc] init];
    
view.backgroundColor = [UIColor blueColor];
    
view.translatesAutoresizingMaskIntoConstraints = NO;
    
[self.view addSubview:view];
    
// 場景二 ：子視圖在父視圖中間，且width 300，height 200
    
NSLayoutConstraint * centerX = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0];
    
NSLayoutConstraint * centerY = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0];
    
NSLayoutConstraint * height = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:200];
    
NSLayoutConstraint * width = [NSLayoutConstraint constraintWithItem:view attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:300];
    
[self.view addConstraints:@[centerX, centerY, height, width]];
           

效果如下