3.3 Utilizing Cross View Constraints

最新推荐文章于 2024-01-31 10:51:52 发布

原创最新推荐文章于 2024-01-31 10:51:52 发布 · 927 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Cross View Constrain

ios 6 Programming Cookbook学习笔记专栏收录该内容

94 篇文章

订阅专栏

本文介绍如何使用Visual Format Language (VFL)来实现iOS应用中不同视图间的约束，具体演示了如何使一个按钮相对于另一个按钮进行水平排列，并确保所有约束正确地应用于它们共同的父视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3.3 Utilizing Cross View Constraints

想象一下这样的效果：
有两个button,分别为topButton,bottomButton。他们的superView分别为topView，bottomView。 bottomView在topView的下面。现在想让bottomButton的左边对齐topButton的右边，该怎么用VFL实现呢？

我们大概都知道，让bottomButton的左边对齐topButton的右边的VFL表达式的写法 @"H:[topButton]-[bottomButton]"(书上没有中间那一横，不过效果一样)。不过生成的约束该加到那个View里面呢？答案是加到他们共有的父或祖父View里面。

下面的例子是把topView,bottomView加到ViewController的View里面，所以两个button的共有祖父View就是ViewController的View,代码如下：

在ViewDidLoad中加入[self addCrossViewVFL]即可看到结果

#pragma mark 测试 VFL Cross View
-(UIView*)newGrayView
{
    UIView * result = [[UIView alloc] init];
    result.translatesAutoresizingMaskIntoConstraints = NO;
    result.backgroundColor = [UIColor grayColor];
    return result;
}

-(UIButton *) newButtonOnView:(UIView*)view
{
    UIButton * btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    btn.translatesAutoresizingMaskIntoConstraints = NO;
    [view addSubview:btn];
    return btn;
}

-(void)addCrossViewVFL
{
    //初始化工作
    UIView * topView = [self newGrayView];
    [self.view addSubview:topView];
    UIView * bottomView = [self newGrayView];
    [self.view addSubview:bottomView];

    UIButton * topButton = [self newButtonOnView:topView];
    UIButton * bottomButton = [self newButtonOnView:bottomView];

    [topButton setTitle:@"Top Button" forState:UIControlStateNormal];
    [bottomButton setTitle:@"Botton Button" forState:UIControlStateNormal];

    //约束 topView
    NSString *const kTopViewH = @"H:|-[topView]-|";
    NSString *const kTopViewV = @"V:|-[topView(==100)]";

    NSMutableArray * topViewConstraints = [NSMutableArray array];

    NSDictionary *topViewDic = NSDictionaryOfVariableBindings(topView);
    [topViewConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kTopViewH options:0 metrics:nil views:topViewDic]];
    [topViewConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kTopViewV options:0 metrics:nil views:topViewDic]];
    [topView.superview addConstraints:topViewConstraints];

    //约束 bottonView
    NSString *const kbottomViewH = @"H:|-[bottomView]-|";
    NSString *const kbottomViewV = @"V:[topView]-[bottomView(==100)]";

    NSMutableArray * bottonViewConstraints = [NSMutableArray array];

    NSDictionary *bottonViewDic = NSDictionaryOfVariableBindings(topView,bottomView);
    [bottonViewConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kbottomViewH options:0 metrics:nil views:bottonViewDic]];
    [bottonViewConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:kbottomViewV options:0 metrics:nil views:bottonViewDic]];
    [bottomView.superview addConstraints:bottonViewConstraints];

    //约束topButton
    NSString *const ktopButtonH = @"H:|-[topButton]";

    NSMutableArray * topButtonConstraints = [NSMutableArray array];

    NSDictionary *topButtonDic = NSDictionaryOfVariableBindings(topButton);
    [topButtonConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:ktopButtonH options:0 metrics:nil views:topButtonDic]];
    [topButtonConstraints addObject:[NSLayoutConstraint constraintWithItem:topButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:topButton.superview attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];
    [topView.superview addConstraints:topButtonConstraints];

    //约束bottomButton
    [bottomButton.superview addConstraint:[NSLayoutConstraint constraintWithItem:bottomButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:bottomButton.superview attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];//垂直方向居中

    NSString *const kBottomButtonV = @"H:[topButton]-[bottomButton]";
    NSDictionary * bottomButtonDic = NSDictionaryOfVariableBindings(topButton, bottomButton);
    [bottomView.superview addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:kBottomButtonV options:0 metrics:nil views:bottomButtonDic]];//水平方向挨在topButton后面

}