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语句中⽤用到的控件 

//