使用不同父类的 view 进行约束

1.问题:

你想相对于另一个 UI 组件来布局一个 UI 组件,到那会死这些 UI 组件具有不同的父控件。 

 

2.方案:

确保你找到这两个 UI 组件的公共 UI 父视图并添加你的约束条件到这个父视图中。 

 

3.例子:

3.1对你的方法的整合 具有一个清晰的方法是很重要的。很显然,在这个例子中我们使用了很少的约束条件和视 图,所以怎么使我们的视图控制器的 viewDidLoad 方法简洁一些呢?如下:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self createGrayViews];
    [self createButtons];
    [self applyConstraintsToTopGrayView];
    [self applyConstraintsToButtonOnTopGrayView];
    [self applyConstraintsToBottomGrayView];
    [self applyConstraintsToButtonOnBottomGrayView];
}

3.2接下来就是实现 createGrayViews 方法了。正如其名,这个方法就是负责在屏幕上创 建灰色视图用的: 

 

#pragma mark - 创建View
- (UIView *)newGrayView{
    UIView *result = [[UIView alloc]init];
    result.backgroundColor = [UIColor lightGrayColor];
    result.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:result];
    return result;
}
- (void)createGrayViews{
    _topGrayView = [self newGrayView];
    _bottomGrayView = [self newGrayView];
}

 

3.3 这个方法只是创建了我们的按钮并将它们放置到相对应的灰色视图中:

#pragma mark - 创建Button
- (UIButton *)newButtonPlacedOnView:(UIView *)paramView{
    UIButton *result = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    result.translatesAutoresizingMaskIntoConstraints = NO;
    [result setTitle:@"Button" forState:UIControlStateNormal];
    [paramView addSubview:result];
    return result;
}
- (void)createButtons{
    _topButton = [self newButtonPlacedOnView:_topGrayView];
    _bottomButton = [self newButtonPlacedOnView:_bottomGrayView];
}

 

3.4在创建了灰色视图和按钮后,我们需要将这些约束条件 应用到灰色视图和按钮中。

3.4.1将首先将约束条件应用到顶部的灰色视图中。这些约束条件必须 满足一下条件:

 　　顶部的视图距视图控制器视图的左边和顶部必须有一个标准空白距离。

　　 灰色视图的高度必须是 100 像素。 

- (void)applyConstraintsToTopGrayView{
    NSDictionary *views = NSDictionaryOfVariableBindings(_topGrayView);
    NSMutableArray *constraints = [[NSMutableArray alloc]init];
    NSString *const kHConstraint = @"H:|-[_topGrayView]-|";
    NSString *const kVConstraint = @"V:|-25-[_topGrayView(==100)]";
    //水平约束
    [constraints addObjectsFromArray:
     [NSLayoutConstraint constraintsWithVisualFormat:kHConstraint
                                             options:0
                                             metrics:nil
                                               views:views]];
    //垂直约束
    [constraints addObjectsFromArray:
     [NSLayoutConstraint constraintsWithVisualFormat:kVConstraint
                                             options:0
                                             metrics:nil
                                               views:views]];
    
    [_topGrayView.superview addConstraints:constraints];
    
}

3.4.2

接下来,我们需要关注的是在顶部灰色视图上按钮的约束条件。可以通过applyConstraintsToButtonOnTopGrayView方法来完成。这个按钮将会拥有以下的约束条件,像之前指定的那样: 

　　　　它在垂直方向上应该位于顶部视图的中间。

　　　　它距顶部视图应该具有一个标准的左边距。

　　　　它应该没有一个指定的高度和宽度并且应该适应它的内容,此内容是我们决定要输入的按钮文本

- (void)applyConstraintsToButtonOnTopGrayView{
    NSDictionary *views = NSDictionaryOfVariableBindings(_topButton);
    NSMutableArray *constraints = [[NSMutableArray alloc]init];
    NSString *const kHConstraint = @"H:|-[_topButton]";
    [constraints addObjectsFromArray:
     [NSLayoutConstraint constraintsWithVisualFormat:kHConstraint
                                             options:0
                                             metrics:nil
                                               views:views]];
    [constraints addObject:
     [NSLayoutConstraint constraintWithItem:_topButton
                                  attribute:NSLayoutAttributeCenterY
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:_topGrayView
                                  attribute:NSLayoutAttributeCenterY
                                 multiplier:1.0f
                                   constant:0.0f]];
    [_topButton.superview addConstraints:constraints];
}

 

3.4.3现在是时候转向底部的灰色视图和 其中的按钮了。现在我们要关注的方法是 applyConstraintsToBottomGrayView 方法。这个方法将会设置底部视图的约束条件。我们将要为这个视图创建的约束条件是: 

　　　　　　　　必须距视图控制器具有一个标准的左边距。

　　　　　　　　必须距顶部视图具有一个标准的顶边距。

　　　　　　　　其高度必须是 100 像素 

- (void)applyConstraintsToBottomGrayView{
    NSDictionary *views = NSDictionaryOfVariableBindings(_topGrayView,_bottomGrayView);
    NSMutableArray *constraints = [[NSMutableArray alloc]init];
    NSString *const kHConstraint = @"H:|-[_bottomGrayView]-|";
    NSString *const kVConstraint = @"V:|-[_topGrayView]-[_bottomGrayView(==100)]";
    [constraints addObjectsFromArray:
     [NSLayoutConstraint constraintsWithVisualFormat:kHConstraint
                                             options:0
                                             metrics:nil
                                               views:views]];
    [constraints addObjectsFromArray:
     [NSLayoutConstraint constraintsWithVisualFormat:kVConstraint
                                             options:0
                                             metrics:nil
                                               views:views]];
    [_bottomGrayView.superview addConstraints:constraints];
}

3.4.4接下来也是我们要写的最后一个 UI 组件的约束条件是作用于底部灰色视图中按钮的。这里要关注的方法是 applyConstraintsToButtonGrayView 方法。在我们实现这个方法之前, 让我们谈谈关于这个底部按钮所需的约束条件:

　　　　　　　　它应该在垂直方向上位于底部灰色视图的中央

　　　　　　　　它的左边应该和顶部视图中按钮的右边对齐

　　　　　　　　它不应该有指定的高度和宽度并且要适应期内容,这个内容就是我们决定要往按钮中输入的文本。 

 

- (void)applyConstraintsToButtonOnBottomGrayView{
    NSDictionary *views = NSDictionaryOfVariableBindings(_topButton,_bottomButton);
    NSString *const kHConstraint = @"H:[_topButton][_bottomButton]";
    //重要 _bottomButton.superview.superview
    [_bottomButton.superview.superview addConstraints:
     [NSLayoutConstraint constraintsWithVisualFormat:kHConstraint
                                             options:0
                                             metrics:nil
                                               views:views]];
    //V
    [_bottomButton.superview addConstraint:
     [NSLayoutConstraint constraintWithItem:_bottomButton
                                  attribute:NSLayoutAttributeCenterY
                                  relatedBy:NSLayoutRelationEqual
                                     toItem:_bottomGrayView
                                  attribute:NSLayoutAttributeCenterY
                                 multiplier:1.0f
                                   constant:0.0f]];
}

 

3.5最后,但同样重要的是,我们需要确保我们的视图控制器会告诉运行进行时它将会能够 处理所有的方向,只是为了强调本节的要点,所以我们应该重写 UIViewController 的 supportedInterfaceOrientations 方法: 

- (NSUInteger)supportedInterfaceOrientations{
    return UIInterfaceOrientationMaskAll;
}