NSLayoutConstraint子视图不会自动调整大小以适应容器视图

时间:2013-07-31 17:31:11

标签: ios uiviewcontroller autolayout nslayoutconstraint

我有一个简单的布局,其中有containerView从整个屏幕开始。在里面,我有两个垂直子视图 - topView (green), botView (orange),它们需要相等的高度,并且应该有containerView高度的50%。

发布后,我从底部向上滑动一个视图(蓝色),从而导致containerView调整到更短的高度。

我期望发生的事情是topViewbotView会变得更短,在containerView内保持均匀的高度,但实际发生的是内部视图是尽管有限制,但没有调整大小。

enter image description here

由于此代码具有一些基于代码的约束和一些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];

和调整大小视图代码:

- (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));

        }];
    });

}

我在这里做错了什么?

1 个答案:

答案 0 :(得分:4)

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

例如,假设您对容器的子视图的约束是这样定义的(为简单起见,因为两个视图应该占据容器的50%,最容易通过将两个子视图定义为相同来完成高度):

[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]];

而且,为了简单起见,定义容器之间的关系,视图中的幻灯片与其超级视图的关系如下:

[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];

然后,当你想在“视图中滑动”中滑动时,只需相应地改变它的高度:

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

因此:

two views

现在,你可以用容器高度x%的高度来做到这一点,但你不能用VFL轻松做到这一点,但它应该可以正常工作。你也可以通过设置其顶部约束来滑动“滑入视图”(但这是一个麻烦,因为那时你必须重新计算旋转的顶部约束,这是我在这个简单的模型中不想做的事情。) / p>

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