Visual format language（2）

最新推荐文章于 2018-08-17 23:38:15 发布

原创最新推荐文章于 2018-08-17 23:38:15 发布 · 407 阅读

0 ·

CC 4.0 BY-SA版权

iOS学习—UI部分专栏收录该内容

113 篇文章

订阅专栏

本文介绍如何使用AutoLayout来实现两个控件的布局，包括设置宽度相等、间距固定、距离边界相同及高度一致的要求。通过示例代码展示了水平和垂直方向上的约束设置。

需求：2个控件，宽度相等，间距为20，距离左边右边为20，高度相等为40

    // 1.创建控件
    UIView *blueView = [[UIView alloc] init];
    [self.view addSubview:blueView];
    blueView.backgroundColor = [UIColor blueColor];
    //不要将AutoresizingMask转为Autolayout的约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    
    UIView *redView = [[UIView alloc] init];
    [self.view addSubview:redView];
    redView.backgroundColor = [UIColor redColor];
    //不要将AutoresizingMask转为Autolayout的约束
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    
    
    
    //间距
    NSNumber *margin = @20;
    
    // 2.添加约束
    //水平方向约束
    NSString *vfl = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView,redView);
    NSDictionary *metrics = NSDictionaryOfVariableBindings(margin);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:metrics views:views];
    [self.view addConstraints:constraints];
    
    //垂直方向约束
    NSNumber *height = @40;
    NSString *vfl2 = @"V:[blueView(height)]-margin-|";
    NSDictionary *metrics2 =NSDictionaryOfVariableBindings(margin,height);
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:metrics2 views:views];
    [self.view addConstraints:constraints2];
    
    //添加redView剩余的约束
    NSLayoutConstraint *redConstraint1 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
    [self.view addConstraint:redConstraint1];
    
    NSLayoutConstraint *redConstraint2 = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0];
    [self.view addConstraint:redConstraint2];

优化上面的代码：

    // 1.创建控件
    UIView *blueView = [[UIView alloc] init];
    [self.view addSubview:blueView];
    blueView.backgroundColor = [UIColor blueColor];
    //不要将AutoresizingMask转为Autolayout的约束
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    
    UIView *redView = [[UIView alloc] init];
    [self.view addSubview:redView];
    redView.backgroundColor = [UIColor redColor];
    //不要将AutoresizingMask转为Autolayout的约束
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    
    
    
    //间距
    NSNumber *margin = @20;
    
    // 2.添加约束
    //水平方向约束
    NSString *vfl = @"H:|-margin-[blueView]-margin-[redView(==blueView)]-margin-|";
    NSDictionary *views = NSDictionaryOfVariableBindings(blueView,redView);
    NSDictionary *metrics = NSDictionaryOfVariableBindings(margin);
    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:metrics views:views];
    [self.view addConstraints:constraints];
    
    //垂直方向约束
    NSNumber *height = @40;
    NSString *vfl2 = @"V:[blueView(height)]-margin-|";
    NSDictionary *metrics2 =NSDictionaryOfVariableBindings(margin,height);
    NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:metrics2 views:views];
    [self.view addConstraints:constraints2];