Autolayout的使用

1 界面設置

1>，紅色報錯

使用了Autolayout就不能手動設置frame。Autolayout的原理也是設置frame，不過講究的是相對位置。若是它的x,y,height,width有一個沒設置好，就會報錯。x,y設置能夠設置具體數據，也能夠相對左右上下對齊實現，也能夠相對水平垂直平均線調製。height，width能夠設置具體數據，也能夠相對等高等寬，相對大小。

2>，黃色報錯

這是xcode提醒在xib或sb的佈局與實際不相符，只要咱們update frame就能夠了

2 手寫設置

1>首先要進制autoresizing功能

    view.translatesAutoresizingMaskIntoConstraints = NO;

2>不要再設置frame

3>方法

    [view addConstraint:<#(NSLayoutConstraint *)#>];
    [view addConstraints:<#(NSArray *)#>];

4，內部設置約束就在本身的view上，而依賴與superView的約束就在superView上

5>代碼展現

    1）經過OC語言

    // 1.禁用auturezing
#warning 注意, 設置父控件無效
//    self.view.translatesAutoresizingMaskIntoConstraints = NO;
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    
    // 3.添加約束
    // 3.1添加藍色VIew距離父控件左邊的距離固定爲20  X
    
    /*
     Item == first item 須要設置約束的控件
     attribute == 須要設置的約束
     relatedBy == relation   等於
     toItem == second item    被參照的控件
     attribute == 須要設置的約束
     multiplier == multiplier  乘以
     constant = constant   加上
     */
   
    NSLayoutConstraint *leftCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:20];
    [self.view addConstraint:leftCos];
    
    // 3.2添加藍色VIew距離父控件右邊的距離固定爲20  寬度
    NSLayoutConstraint *rightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:-20];
    [self.view addConstraint:rightCos];
    
    // 3.3添加藍色VIew距離父控件頂部邊的距離固定爲20  Y
    NSLayoutConstraint *topCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:20];
    [self.view addConstraint:topCos];
    
    // 3.4添加藍色View的高度 50  高
    NSLayoutConstraint *heightCos = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:50];
    [blueView addConstraint:heightCos];
    
    
    // 4.設置紅色約束
    // 紅色的高度和藍色高度同樣  高度
    NSLayoutConstraint *redHeightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0];
    [self.view addConstraint:redHeightCos];
    
    // 紅色的右邊和藍色的右邊對齊  X
     NSLayoutConstraint *redRightCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0];
    [self.view addConstraint:redRightCos];
    
    //  紅色的頂部和藍色的底部距離固定  Y
     NSLayoutConstraint *redTopCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:20];
    [self.view addConstraint:redTopCos];
    
    // 紅色的寬度等於藍色寬度的一半  寬度
   NSLayoutConstraint *redwidthCos = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redwidthCos];

 2）經過VFL語言

 UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];
    
    // 1.1添加紅色View
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    
    
    // 2.禁用auturezing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    
    // 3.添加約束
    /*
     lFormat : VFL語句
     options: 對齊方式
     metrics: VFL語句中用到的變量值
     views: VFL語句中用到的控件
     */
    
    // 設置藍色View距離左邊和右邊有20的的間距  X 和 寬度
    NSArray *blueViewH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView" : blueView}];
        
    // 設置藍色View距離頂部有20的間距, 而且高度等於50   Y 和高度
    // 設置紅色View距離藍色底部有20的間距, 而且紅色View的高度等於藍色View的高度 Y 和高度
    // 而且設置紅色和藍色右對齊
    NSArray *blueViewV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];
    [self.view addConstraints:blueViewV];
    
#warning  注意: 在VFL語句中, 是不支持乘除法
//    NSArray *redVeiwH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(==blueView )]" options:0 metrics:nil views:@{@"blueView" : blueView, @"redView": redView}];
//    [self.view addConstraints:redVeiwH];
    
    NSLayoutConstraint *redVeiwW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redVeiwW];

3 VFL

1> VFL的示例 

//
//
   H:[cancelButton(72)]-12-[acceptButton(50)]
// canelButton寬72,acceptButton寬50,它們之間間距12
// 
   H:[wideView(>=60@700)]
// wideView寬度⼤大於等於60point,該約束條件優先級爲700(優先級最⼤大值爲1000,優先級越⾼高的約束越先被滿⾜足)

   V:[redBox]-[yellowBox(==redBox)]
// 豎直⽅方向上,先有⼀一個redBox,其下⽅方緊接⼀一個⾼高度等於redBox⾼高度的yellowBox
//

   H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
// ⽔水平⽅方向上,Find距離⽗父view左邊緣默認間隔寬度,以後是FindNext距離Find間隔默認寬度;
//再以後是寬度不⼩小於20的FindField,它和FindNext以及⽗父view右邊緣的間距都是默認寬度。
//(豎線「|」 表⽰示superview的邊緣)
//
// 

2> VFL的使用

//
//
+ (NSArray *)constraintsWithVisualFormat:(NSString*)format options:(NSLayoutFormatOptions) opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;

 format :VFL語句
 opts :約束類型(⼀通常能夠傳0)
 metrics :VFL語句中⽤用到的具體數值● views :VFL語句中⽤用到的控件 

//