如何使用约束相互添加两个视图

Question

我正在尝试添加 2 个具有相同 X、Y 的视图。它们使用 addConstraints:[NSLayoutConstraint constraintsWithVisualFormat...]

从边缘 space

字符串"H:|20-[A][B]-20-[C]-20-[D]-20|"和V:|20-[A][B]-20-[C]-20-[D]-20|，centreX == CenterX和centerY==centerY我都试过了，但是一直冲突，觉得A和B应该挨着.

A 隐藏，点击某个按钮，B 隐藏，A 显示。

Answer 1

要添加具有相同中心 X,Y 的视图，您需要首先放置其中一个视图，例如 bView（底视图），使用 constatins

NSArray * bVerticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"|-20-[bView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(bView)];
    NSArray * bHorizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[bView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(bView)];

这会将 bView 放置在超级视图中，边缘偏移量为 20。

现在将 tView（顶视图）放置在与 bView 相同的中心。这里 self 是 bView 和 tView

的父视图

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[bView]-(<=1)-[tView]" options:NSLayoutFormatAlignAllCenterX metrics:nil views:NSDictionaryOfVariableBindings(bView,tView)]];
    [self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[bView]-(<=1)-[tView]" options:NSLayoutFormatAlignAllCenterY metrics:nil views:NSDictionaryOfVariableBindings(bView,tView)]];

然后用所需的偏移量固定 tView 的边缘，比如 40

NSArray * tVerticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"|-40-[tView]-40-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(tView)];
    NSArray * tHorizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[tView]-40-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(tView)];

编辑：

这是怎么做的。

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    bView = [UIView new];
    bView.backgroundColor = [UIColor redColor];
    bView.translatesAutoresizingMaskIntoConstraints = NO;

    tView = [UIView new];
    tView.backgroundColor = [UIColor blackColor];
    tView.translatesAutoresizingMaskIntoConstraints = NO;

    // Firdt bView is added then tView hence tView is exaclty above the bView.
    [self.view addSubview:bView];
    [self.view addSubview:tView];


    // Edges Constrints for bView
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-20-[bView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(bView)]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[bView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(bView)]];

    // Edges Constints for tView
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-20-[tView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(tView)]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[tView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(tView)]];

    // Centring for bView and tView
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[bView]-(<=1)-[tView]" options:NSLayoutFormatAlignAllCenterX metrics:nil views:NSDictionaryOfVariableBindings(bView,tView)]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[bView]-(<=1)-[tView]" options:NSLayoutFormatAlignAllCenterY metrics:nil views:NSDictionaryOfVariableBindings(bView,tView)]];

}

-(IBAction)toggleViews:(id)sender {
    NSArray * subViews = self.view.subviews;
    [self.view exchangeSubviewAtIndex:[subViews indexOfObject:tView] withSubviewAtIndex:[subViews indexOfObject:bView]];
}

如何使用约束相互添加两个视图

How to add two views on each other with constraints

cocoa-touch

objective-c

ios

autolayout

ios-autolayout