ios - NSLayoutConstraint subview 不会自动调整大小以适应容器 View

Question

我有一个简单的布局，其中有一个在整个屏幕上开始的 containerView。在内部，我有两个垂直 subview — topView(绿色)、botView(橙色)，它们需要相同的高度并且应该具有 containerView 高度的 50%。

启动后，我从底部向上从屏幕外滑入一个 View (蓝色)，导致 containerView 调整到更短的高度。

我希望发生的是 topView 和 botView 都会变短，在 containerView 中保持它们的高度均匀，但是实际发生的是内部 View 没有调整大小，尽管有这样做的限制。

因为这段代码有一些基于代码的约束，还有一些 IB 约束，here是一个示例项目，可以看到它的实际应用。这是被忽略的约束:

NSLayoutConstraint *c1 = [NSLayoutConstraint constraintWithItem:self.topView
                                                      attribute:NSLayoutAttributeHeight
                                                      relatedBy:NSLayoutRelationEqual
                                                         toItem:self.containerView
                                                      attribute:NSLayoutAttributeHeight
                                                     multiplier:0.5f
                                                       constant:0.f];
[self.containerView addConstraint:c1];

和调整大小 View 代码:

- (void)resizeViews {

    __weak UAViewController *weakSelf = self;
    dispatch_async(dispatch_get_main_queue(), ^{
        [UIView animateWithDuration:0.25 animations:^{
            weakSelf.slideInView.frame = CGRectMake(CGRectGetMinX(weakSelf.view.bounds),
                                                    CGRectGetMaxY(weakSelf.view.bounds) - CGRectGetHeight(weakSelf.slideInView.frame),
                                                    CGRectGetWidth(weakSelf.view.bounds),
                                                    CGRectGetHeight(weakSelf.slideInView.frame));

            weakSelf.containerView.frame = CGRectMake(CGRectGetMinX(weakSelf.view.bounds),
                                                      CGRectGetMinY(weakSelf.view.bounds),
                                                      CGRectGetWidth(weakSelf.view.bounds),
                                                      CGRectGetMaxY(weakSelf.view.bounds) - CGRectGetHeight(weakSelf.slideInView.frame));

        }];
    });

}

我在这里做错了什么？

Answer 1

我很惊讶您为 View 设置了 frame。通常在自动布局中，您可以通过更改约束 constant 而不是通过更改 frame 在 View 中滑动。

例如，假设您对容器的 subview 的约束是这样定义的(为了简单起见，因为两个 View 应该占据容器的 50%，最简单的方法是将两个 subview 定义为相同的高度):

[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[topView][botView(==topView)]|" options:0 metrics:nil views:views]];
[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[topView]|" options:0 metrics:nil views:views]];
[containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[botView]|" options:0 metrics:nil views:views]];

并且，为了简单起见，定义容器、 View 中的幻灯片与其父 View 之间的关系，如下所示:

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[containerView][slideInView]|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[containerView]|" options:0 metrics:nil views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[slideInView]|" options:0 metrics:nil views:views]];

// set the slide in view's initial height to zero

NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:slideInView
                                                                    attribute:NSLayoutAttributeHeight
                                                                    relatedBy:NSLayoutRelationEqual
                                                                       toItem:nil
                                                                    attribute:NSLayoutAttributeNotAnAttribute
                                                                   multiplier:1.0
                                                                     constant:0.0];
[self.view addConstraint:heightConstraint];

然后，当你想在“幻灯片 View ”中滑动时，只需相应地设置其高度变化的动画即可:

heightConstraint.constant = 100;
[UIView animateWithDuration:1.0 animations:^{
    [self.view layoutIfNeeded];
}];

因此:

现在，您也可以使用容器高度的 x% 的高度来执行此操作，但是使用 VFL 无法轻松做到这一点，但它应该可以正常工作。您也可以通过设置其顶部约束的动画来滑入“ View 中的幻灯片”(但这很麻烦，因为您必须重新计算旋转的顶部约束，这是我不想在这个简单的模型中做的事情)。

但是你明白了。只需将容器 View 的高度或底部约束定义为与 View 中的幻灯片相关，然后通过调整其约束为 View 中的幻灯片设置动画，如果您已正确定义所有约束，它将优雅地为所有内容设置动画在更改幻灯片 View 的约束后为 layoutIfNeeded 设置动画时，四个 View (容器、 View 中的幻灯片和容器的两个 subview )正确。