IOS中级篇 ——自动布局 Autolayout and VFL

 

 

*/ 以下不常用  

// 务必记住

// 1. 当给某个控件设置约束时候 , 必须关闭这个控件上 autoresing

// 2. 当给一个控件添加约束时候 , 必须保证这个控件在控制器 View 的层次结构中

- ( void )viewDidLoad {
    [ super viewDidLoad];
  
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [ self .view addSubview:redView];
   
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [ self .view addSubview:blueView];
   
//  Constraint 约束
/*
  第一个参数 Item
 1. 需要约束控件
  第二个参数 约束的属性
 NSLayoutAttributeLeft = 1, 左边
 NSLayoutAttributeRight,  右边
 NSLayoutAttributeTop,    顶部
 NSLayoutAttributeBottom, 下边
 NSLayoutAttributeLeading, 左边
 NSLayoutAttributeTrailing, 右边
 NSLayoutAttributeWidth,   宽
 NSLayoutAttributeHeight,  高
 NSLayoutAttributeCenterX, 水平中线
 NSLayoutAttributeCenterY, 垂直中线
  第三个参数就是 关系
 typedef NS_ENUM(NSInteger, NSLayoutRelation) {
 NSLayoutRelationLessThanOrEqual = -1,  "<="
 NSLayoutRelationEqual = 0,              "=="
 NSLayoutRelationGreaterThanOrEqual = 1, ">="
 };
第四个参数 参照物 ( 参照控件 )
 
第五个参数 参照控件的属性
 
multiplier 乘
 
constant   +
 
公式
item1.attribute <relation> item2.attribute * multiplier + constant
 
 */
// 务必记住
// 1. 当给某个控件设置约束时候 , 必须关闭这个控件上 autoresing
   blueView.translatesAutoresizingMaskIntoConstraints = NO ;
    redView.translatesAutoresizingMaskIntoConstraints = NO ;
// 2. 当给一个控件添加约束时候 , 必须保证这个控件在控制器 View 的层次结构中
   
//  添加蓝色的 View 顶部
    NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop  relatedBy:NSLayoutRelationEqual toItem: self .view attribute:NSLayoutAttributeTop multiplier: 1 constant: 20 ];
   
    [ self .view addConstraint:blueTop];
   
    //  添加蓝色的 View 左边
    NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft  relatedBy:NSLayoutRelationEqual toItem: self .view attribute:NSLayoutAttributeLeft multiplier: 1 constant: 20 ];
   
    [ self .view addConstraint:blueLeft];
    //  添加蓝色的 View 右边
    NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight  relatedBy:NSLayoutRelationEqual toItem: self .view attribute:NSLayoutAttributeRight multiplier: 1 constant:- 20 ];
    [ self .view addConstraint:blueRight];
    //  添加蓝色的 View 的高度
    NSLayoutConstraint *blueHeigt = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight  relatedBy:NSLayoutRelationEqual toItem: nil attribute:NSLayoutAttributeNotAnAttribute multiplier: 1 constant: 100 ];
    [ self .view addConstraint:blueHeigt];
   
//  添加红色 view 上面约束
//  红色的顶部
    NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop  relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier: 1 constant: 20 ];
    [ self .view addConstraint:redTop];
//  红色 view 与蓝色 view 右边对齐
    NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight  relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier: 1 constant: 0 ];
    [ self .view addConstraint:redRight];
  
    //  红色 view 与蓝色 view 的高度相同
    NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight  relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier: 1 constant: 0 ];
    [ self .view addConstraint:redHeight];
   
   
    //  红色 view 与蓝色 view 的高度相同
    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth  relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier: 0.5 constant: 0 ];
    [ self .view addConstraint:redWidth];
   

}

动画

    self .vSpaceConstraint.constant += 100 ;

    self .hSpaceContraint.constant += 100 ;
    self .widthcontraint.constant += 100 ;
    self .heightContraint.constant += 100 ;
   
   
    [UIView animateWithDuration: 1 animations:^{
//      这个方法是让重新布局界面
//      计算约束 , 然后调节控件的位置
        [ self .view layoutIfNeeded];

    }];

——Vfl 语法

偶尔用  

//  一定要 关闭 autoresizing 

- ( void )viewDidLoad {
    [ super viewDidLoad];
   
//  1. 创建子控件 , 添加加到控制器 view 中
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [ self .view addSubview:blueView];
   
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [ self .view addSubview:redView];
   
//  2. 关闭 autoresizing
   
    blueView.translatesAutoresizingMaskIntoConstraints = NO ;
    redView.translatesAutoresizingMaskIntoConstraints = NO ;
   
//  3. 通过 VFL 添加约束
//   options 对齐方式
//  水平方向
    NSArray *hConstraints = [NSLayoutConstraint constraintsWithVisualFormat: @"H:|-20-[blueView]-20-|" options:NSLayoutFormatAlignAllTop metrics: nil views: @{ @"blueView" :blueView } ];
    [ self .view addConstraints:hConstraints];
   
//  竖直方向
      NSArray *vConstraints = [NSLayoutConstraint constraintsWithVisualFormat: @"V:|-20-[blueView(100)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics: nil views: @{ @"blueView" :blueView, @"redView" :redView } ];
   
    [ self .view addConstraints:vConstraints];
   
//  VFL 不能参与运算
//    NSArray *h1Constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(==blueView * 0.5)]" options:NSLayoutFormatAlignAllTop metrics:nil views:@{@"blueView":blueView,@"redView":redView}];
//   
//    [self.view addConstraints:h1Constraints];
    NSLayoutConstraint *redW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier: 0.5 constant: 0 ];
    [ self .view addConstraint:redW];
   

}