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];
   

}