AutoLayout (自動布局)

AutoLayout :

frame: 原點  自身的尺寸 來确定 自身位置

autoLayout 根據參照視圖的位置 來定義自己的位置

autoLayout相對布局 限制視圖和視圖之間的關系 來配置設定 螢幕上的位置

VFL(Visual Format Language 視覺格式語言)通過添加字元串 來限制視圖和視圖之間的關系 

使用autoLayout  必須把

translatesAutoresizingMaskIntoConstraints禁用才可以使用

相對布局是找一個參照物 拿參照物當做基礎，設定他和參照物的相對距離 來設定自己的位置

VFL 需有 橫 豎 兩個方向的限制

橫向: H:

豎向: V：

| 表示他的父視圖

—50— 來那個視圖之間的間距

[textField]  是一個視圖[textField(>=200)] (>=200) 如果是橫向  表示textField自身的寬  最小是200

H:橫向

 | 表示他的父視圖

 -50- 表示後面視圖 與前面視圖的距離 （後面視圖是textField，前面視圖是他的父視圖）

 [textField(>=200)] 要限制視圖的寬  (>=200)允許最小的寬度是200  如果是豎向  就是允許最小的高度

@"H:|-50-[textField(>=200)]-50-|"

 距離坐邊原點距離50   右邊邊界距離50    允許視圖的最小寬度是200

 V: 豎向

@“V:|-80-[textField(50)]-50-|” 距離頂部距離為80     

距離頂部距離為  視圖的高永遠是50

視圖 使用屬性的時候綁定key 需要綁定他真實的

具體代碼如下:

#pragma mark --- 一個視圖的布局 ----

- (void)demo1

{

    UIView *view = [[UIView alloc]init];

  如果需要使用autolayout

  translatesAutoresizingMaskIntoConstraints 必須禁用

  必須禁用

  必須禁用

  必須禁用

    view.translatesAutoresizingMaskIntoConstraints = NO;

    view.backgroundColor = [UIColor redColor];

    [self.view addSubview:view];

  VFL   橫向 豎向布局

   @"H:" 設定橫向布局

   @"H:|-20-" 設定橫向布局距離父視圖的左側邊距

   @"H:|-20-[view(>=200)]" 設定橫向布局 距離父視圖的左側邊距 設定view橫向的尺寸 不能低于200

  @"H:|-20-[view(>=200)]-20-|" 設定橫向布局 距離父視圖的左側邊距 設定view橫向的尺寸 不能低于200  設定右側與父視圖之間的距離

  豎向布局@"V:|-40-[(view>=400)]-20-|"

  使用VFL 需把視圖的對象 與他的名字(字元串)綁定起來

    NSDictionary *views = NSDictionaryOfVariableBindings(view);

//    給self.view  view添加限制

//    NSLayoutConstraint 具體添加的一個類

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

//  format:VFL

//  options:同意按照某個方向去布局

//  metrics:綁定的參數

//  views:綁定視圖的參數

    [self.view addConstraints:[NSLayoutConstraint  constraintsWithVisualFormat:@"H:|-20-[view(>=200)]-20-|" options:0 metrics:nil views:views]];

    [self.view addConstraints:[NSLayoutConstraint  constraintsWithVisualFormat:@"V:|-40-[view(>=200)]-20-|" options:0 metrics:nil views:views]];

}

#pragma mark --- 兩個視圖的布局 ----

- (void)demo2

{

    UIView *view1 = [[UIView alloc]init];

//    如果需要使用autolayout  translatesAutoresizingMaskIntoConstraints必須禁用

   view1.translatesAutoresizingMaskIntoConstraints = NO;

    view1.backgroundColor = [UIColor redColor];

    [self.view addSubview:view1];

    UIView *view2 = [[UIView alloc]init];

//    如果需要使用autolayout translatesAutoresizingMaskIntoConstraints 必須禁用

    view2.translatesAutoresizingMaskIntoConstraints = NO;

    view2.backgroundColor = [UIColor blueColor];

    [self.view addSubview:view2];

    NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);

//    紅色view1  的限制

//    @"H:|-20-[view1(>=200)]-20-|"

//    @"V:|-40-[view1(>=200)]-20-[view2]"

//    藍色view2  的限制

//    @"H:|-20-[view2(>=200)]-20-|"

//    @"V:[view1]-10-[view2(50)]"

//    紅色view1  橫向的限制

    [self.view addConstraints:[NSLayoutConstraint  constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];

//    紅色view1  豎向的限制

    [self.view addConstraints:[NSLayoutConstraint  constraintsWithVisualFormat: @"V:|-40-[view1(50)]-10-[view2]" options:0 metrics:nil views:views]];

//    藍色view2  橫向的限制

    [self.view addConstraints:[NSLayoutConstraint  constraintsWithVisualFormat: @"H:|-20-[view2(>=200)]-20-|"options:0 metrics:nil views:views]];

//    藍色view2  豎向的限制

   [self.view addConstraints:[NSLayoutConstraint  constraintsWithVisualFormat:@"V:[view1]-10-[view2(50)]"options:0 metrics:nil views:views]];

}

#pragma mark --- 兩個視圖的布局優化demo2 ---

- (void)demo3

{

    UIView *view1 = [[UIView alloc]init];

    //    如果需要使用autolayout  translatesAutoresizingMaskIntoConstraints 必須禁用

    view1.translatesAutoresizingMaskIntoConstraints = NO;

    view1.backgroundColor = [UIColor redColor];

    [self.view addSubview:view1];

    UIView *view2 = [[UIView alloc]init];

    //    如果需要使用autolayout translatesAutoresizingMaskIntoConstraints 必須禁用

    view2.translatesAutoresizingMaskIntoConstraints = NO;

    view2.backgroundColor = [UIColor blueColor];

    [self.view addSubview:view2];

    NSDictionary *views = NSDictionaryOfVariableBindings(view1,view2);

    //    紅色view1  的限制

    //    @"H:|-20-[view1(>=200)]-20-|"

    //    @"V:|-40-[view1(>=200)]-20-[view2]"

    //    藍色view2  的限制

    //    @"H:|-20-[view2(>=200)]-20-|"

    //    @"V:[view1]-10-[view2(50)]"

    //    紅色view1  橫向的限制

    [self.view addConstraints:[NSLayoutConstraint  constraintsWithVisualFormat:@"H:|-20-[view1(>=200)]-20-|" options:0 metrics:nil views:views]];

//    紅色view1藍色view 都在同一個父視圖上,而兩個視圖之間又有關系

//    紅色view1   藍色view 豎向的限制

//    [self.view addConstraints:[NSLayoutConstraint  constraintsWithVisualFormat: @"V:|-40-[view1(50)]-10-[view2(50)]" options:0 metrics:nil views:views]];

//   紅色view 藍色view2

//    藍色view2  橫向的限制

    [self.view addConstraints:[NSLayoutConstraint  constraintsWithVisualFormat: @"H:|-20-[view2(>=200)]-20-|"options:0 metrics:nil views:views]];

    //    藍色view2  豎向的限制

    [self.view addConstraints:[NSLayoutConstraint  constraintsWithVisualFormat:@"V:[view1]-10-[view2(50)]"options:0 metrics:nil views:views]];

}

#pragma mark --- 再次優化demo2 ---

- (void)demo4

{

    NSArray *colorList = @[[UIColor redColor],[UIColor blueColor]];

    for (int i = 0; i < 2; i ++) {

        UIView *view = [[UIView alloc]init];;

        view.backgroundColor = colorList[i];

        view.translatesAutoresizingMaskIntoConstraints = NO;

        view.tag = 100 + i;

        [self.view addSubview:view];

            }

        UIView *redView = [self.view viewWithTag:100];

        UIView *blueView = [self.view viewWithTag:101];

   NSDictionary *views = NSDictionaryOfVariableBindings(redView,blueView);

//    兩個視圖橫向的限制

    NSArray *constraints = @[@"H:|-20-[redView(>=200)]-20-|",@"H:|-20-[blueView(>=200)]-20-|"];

    for (NSString *VFL in constraints) {

       [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:VFL options:0 metrics:nil

         views:views]];

        NSLog(@"%@",VFL);

    }

//    兩個視圖的豎向限制

    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[redView(50)]-10-[blueView(redView)]" options:0 metrics:nil views:views]];

}

- (void)demo5

{

    NSArray *colorList = @[[UIColor redColor],[UIColor yellowColor],[UIColor blueColor]];

    for (int i = 0; i < 3; i ++) {

        UIView *view = [[UIView alloc]init];

        view.translatesAutoresizingMaskIntoConstraints = NO;

        view.tag = 10 + i;

        view.backgroundColor = colorList[i];

        [self.view addSubview:view];

    }

    //  通過tag值找到對應的視圖

    UIView *redView = [self.view viewWithTag:10];

    UIView *yellowView = [self.view viewWithTag:11];

    UIView *blueView = [self.view viewWithTag:12];

    NSDictionary *views = NSDictionaryOfVariableBindings(redView,yellowView,blueView);

//    @"H:|-20-[redView(>=200)]-20|"

//    @"H:|-20-[yellowView(>=100)]-10-[blueView(yellowView)]-20-|"

//    紅色視圖與黃色視圖豎向的關系 紅色視圖與藍色視圖豎向的關系

    NSArray *HList = @[@"H:|-20-[redView(>=200)]-20-|",@"H:|-20-[yellowView(>=100)]-10-[blueView(yellowView)]-20-|"];

    NSArray *VList = @[@"V:|-40-[redView(50)]-10-[yellowView(redView)]",@"V:|-40-[redView(50)]-10-[blueView(redView)]"];

    for (int i = 0; i < VList.count; i ++) {

        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:HList[i]  options:0 metrics:nil views:views]];

        [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:VList[i]  options:0 metrics:nil views:views]];

    }

}