D31:AutoLayout

一. 為什么要使用自動布局

Frame
iPhone4S 320*480

iPhone5 5S 320*568

iPhone6 375*667

iPhone6plus 414*736

AutoLayout
針對不同屏幕的大小, 只需要使用同一份代碼

  1. 系統(tǒng)自動布局的幾種實現(xiàn)方式
1. 純代碼:   
    1. 添加一個個約束(約束: 用來描述視圖相對于另外一個視圖的位置). 因為屏幕的大小和視圖控制器的view的bounds固定, 因此任何視圖的位置只要相對于上面兩個位置來設(shè)置即可  
    2. NSLayoutConstraint: 一個視圖的某一個屬性相對于另外一個視圖的某一個屬性的關(guān)系; 上述的屬性包括left, right, bottom, width, height, 上述的關(guān)系: 二元一次表達式(y = kx + b)
2. 代碼方式: 添加一個約束組, 用可視化語言的方式(理解略難, 不是所有的約束都可以用這種方式描述)  
3. XIB的方式
    1. priority: 優(yōu)先級, 在0-1000之間, 默認為1000, 優(yōu)先級越高, 當兩個約束相互影響時, 默認選擇優(yōu)先級高的約束
    2. 約束的直線顯示藍色才表示約束設(shè)置正確, 否則有錯誤

二. 系統(tǒng)布局怎么使用

  1. 一個視圖的顯示
    1. 設(shè)置frame的方式: (30, 100, 80, 60)
    2. 視圖居中顯示
  2. 兩個視圖的顯示
  3. 多個視圖的顯示

三. Masonry

二. 系統(tǒng)布局怎么使用

一個視圖的顯示(注意點:添加約束之前一定要將這個視圖添加到父視圖之上)

  1. 設(shè)置frame的方式
    **********************使用純代碼的方式**********************

    a. 創(chuàng)建一個視圖(不用設(shè)置frame)

         UIView *redView = [[UIView alloc] init];
     redView.backgroundColor = [UIColor redColor];

    b. 不將Autoresize轉(zhuǎn)化為AutoLayout的約束

         redView.translatesAutoresizingMaskIntoConstraints = NO;

    c. 添加到父視圖上

         [self.view addSubview:redView];

    d. 添加約束(添加約束之前一定要將這個視圖添加到父視圖之上)

         // 1) x相對于self.view.frame的x
     // redView.x == self.view.x * 1 + 30
     /*
      第一個參數(shù): 第一個視圖對象
      第二個參數(shù): 第一個視圖對象的某一個屬性
      第三個參數(shù): 第一個視圖的屬性相對于第二個視圖的屬性的關(guān)系(== >= <=)
      第四個參數(shù): 第二個視圖對象
      第五個參數(shù): 第二個視圖對象的屬性
      第六個參數(shù): 線性表達式的系數(shù)
      第七個參數(shù): 線性表達式的常量
      */
     
     // 第一個視圖對象(參數(shù)1)的屬性(參數(shù)2)    關(guān)系(參數(shù)3)    第二個視圖對象的屬性(參數(shù)5) * 系數(shù)(參數(shù)6) + 常量(參數(shù)7)
     // (參1.參2) 參3 (參6.參2)*參5+參7 
     NSLayoutConstraint *xConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:30];
     
     // 2) y
     // redView.y == self.view.y * 1 + 100
     NSLayoutConstraint *yConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:100];
     
     // 3) width
     // redView.width = 80
     NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:80];
     
     // 4) height
     // redView.height = 60
     NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:60];

    e. 將該視圖的約束添加到父視圖或者間接父視圖上面

         [self.view addConstraint:xConstraint];
     [self.view addConstraint:yConstraint];
     [self.view addConstraints:@[widthConstraint,heightConstraint]];

    **********************使用可視化語言的方式**********************

     - (void)viewDidLoad {
     [super viewDidLoad];
     // Do any additional setup after loading the view, typically from a nib.
     
     // 用可視化語言的方式布置布局
     // 1. 創(chuàng)建視圖, 添加到父視圖, 不將Autoresize轉(zhuǎn)化為AutoLayout的約束
     UIView *redView = [[UIView alloc] init];
     redView.backgroundColor = [UIColor redColor];
     redView.translatesAutoresizingMaskIntoConstraints = NO;
     [self.view addSubview:redView];
     
     // 2. 創(chuàng)建約束
     // 可視化語言的方式, 每個視圖一般只要在水平方向和垂直方向分別添加一個約束組就可以
     /*
      第一個參數(shù): 可視化語言描述的字符串
      第二個參數(shù): 一些選項(通常可以忽略)
      第三個參數(shù): 可視化字符串里面的變量值
      第四個參數(shù): 可視化字符串里面的對象的值
      */
     // "H:"表示水平方向(horizontal) "V:"表示垂直方向(vertical) 如果不寫默認是水平方向
     // "|"表示父視圖
     // "redView", 表示一個視圖對象, 對象的變量名為redView, 用[]擴起來
     // "-30-"表示視圖之間的間距
     // (==80)表示寬度是80
     NSArray *horConstrains = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-30-[redView(==80)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView)];
     
 //    參數(shù)是變量的狀況
 //    CGFloat width = 100;
 //    NSArray *horConstrains = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-30-[redView(==mywidth)]" options:0 metrics:@{@"mywidth":[NSNumber numberWithFloat:width]} views:NSDictionaryOfVariableBindings(redView)];
     
     // 垂直方向
     NSArray *verContrains = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[redView(60)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(redView)];
     
     // 3. 添加約束
     [self.view addConstraints:horConstrains];
     [self.view addConstraints:verContrains];
 }

    **********************使用XIB的方式**********************

    Leading Space to Superview

    Top Space to Superview
    Width
    Height

  2. 居中顯示
    **********************使用純代碼的方式**********************
    - (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

         // 代碼方式實現(xiàn)自動布局
     // 1. 創(chuàng)建視圖, 添加到父視圖
     UIView *blueView = [[UIView alloc] init];
     blueView.backgroundColor = [UIColor blueColor];
     blueView.translatesAutoresizingMaskIntoConstraints = NO;
     [self.view addSubview:blueView];
     
     // 2. 創(chuàng)建約束
     // center.x
     // blueView.center.x == self.view.center.x * 1 + 0
     NSLayoutConstraint *centerXConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
     
     // center.y
     // blueView.center.y == self.view.center.y * 1 + 0
     NSLayoutConstraint *centerYConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0];
     
     // width
     NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:0 constant:200];
     
     // height
     NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:100];
     
     // 視圖添加約束
     [self.view addConstraints:@[centerXConstraint, centerYConstraint, widthConstraint, heightConstraint]];
 }

    **********************使用XIB的方式**********************

    水平中心的設(shè)置

    垂直中心的設(shè)置
2. 兩個視圖的顯示

**********************使用純代碼的方式**********************

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 1. 創(chuàng)建兩個視圖, 添加到父視圖
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
    
    // 2個視圖的約束
    // blueView
    // Left
    NSLayoutConstraint *blueLeftConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
    // Top
    NSLayoutConstraint *blueTopConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:40];
    // Bottom
    NSLayoutConstraint *blueBottomConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:-200];
    
    // redView
    // Top
    NSLayoutConstraint *redTopConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:80];
    // Right
    NSLayoutConstraint *redRightConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-30];
    
    // blueView和redView兩個視圖間的關(guān)系
    // 橫向間距
    NSLayoutConstraint *xConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeLeft multiplier:1 constant:-30];
    // width相等
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
    // 高度相等
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:redView attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
    
    [self.view addConstraints:@[blueLeftConstraint, blueTopConstraint, blueBottomConstraint, redTopConstraint, redRightConstraint, xConstraint, widthConstraint, heightConstraint]];
}

**********************使用可視化語言的方式**********************

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    // 1. 創(chuàng)建兩個視圖, 添加到父視圖
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:blueView];
    
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
    
    // 2. 創(chuàng)建約束
    // x軸上
    NSArray *horizontalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-30-[redView(==blueView)]-30-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, redView)];
    
    // y軸上: (分開寫)
    NSArray *blueVerticalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[blueView]-200-|" options:0 metrics:0 views:NSDictionaryOfVariableBindings(blueView)];
    
    // y軸上: 右邊不需要加|(條件已足夠)
    NSArray *redVerticalConstraint = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-80-[redView(==blueView)]" options:0 metrics:0 views:NSDictionaryOfVariableBindings(redView, blueView)];
    
    [self.view addConstraints:horizontalConstraint];
    [self.view addConstraints:blueVerticalConstraint];
    [self.view addConstraints:redVerticalConstraint];
}

**********************使用XIB的方式**********************

1.新建2個View, 為它們添加水平和垂直方向上的約束
2.設(shè)置2個View寬度相等
3.設(shè)置2個View高度相等
4.更新2個View的約束
5.修改約束里的系數(shù)和常量
3. 多個視圖的顯示
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容