在添加具有简单动画的子视图时使用NSLayoutConstraints

Question

我正在尝试向我的菜单项（messageViewMenu）添加一个视图（messageView），这样当点击菜单项时，这个新视图就会添加到它的正上方，它们会一个接一个地在屏幕上向下滑动-Evernote 5.1.2有类似的功能。

我使用NSLayoutConstraint将新视图附加到我假定的菜单项顶部。然后，我将菜单项的现有垂直约束设置为标题UIView（\u headerMessageConstraint）的动画，使其大小增加到300。我希望新视图垂直连接到菜单项的后缘和前缘，然后它们一起滑下屏幕。

但是，新视图随菜单项向下滑动，然后继续在其后面，直到顶部边缘对齐为止。

谁能告诉我哪里错了？先谢谢你的帮助

史蒂夫

编辑。自从我发布这篇文章以来，我了解到，当我添加新视图（MessageViewController的mvc.view）时，它默认设置为0,0。我不希望它位于0,0，尽管如此，似乎我必须在我希望它出现的位置为它设置一个帧-这在使用自动布局时似乎是错误的-或者将此新视图添加到子视图并设置子视图高度的动画，也许。。。虽然我可能会把自己带到一个黑暗的地方。

MessageViewController *mvc = [[MessageViewController alloc] init];
[mvc.view setTranslatesAutoresizingMaskIntoConstraints:NO];
UIView *messageView = mvc.view;
[self.view addSubview:messageView];

UIView *messageViewMenu = self.messageViewMenu;

NSDictionary* views = NSDictionaryOfVariableBindings(messageViewMenu, messageView);

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

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[messageView(200)]-[messageViewMenu]"
                                                                    options:0
                                                                    metrics:nil
                                                                    views:views]];
[self.view layoutSubviews]; // UPDATE - THIS IS THE CODE THAT WAS MISSING - IT DISPLAYS THE SUBVIEWS BEFORE THE ANIMATION STARTS. THANKS @RDELMAR 

[UIView animateWithDuration:0.9 animations:^{
                        _headerMessageConstraint.constant = 200;
                        [self.view layoutIfNeeded];
                        } completion:^(BOOL finished){}];

Answer 1

我不确定您到底想做什么，但您需要在动画块上方添加一行[self.view layoutSubviews]。在设置动画之前，主视图需要在其起始位置布局新视图。

如果你想让两个视图在没有空间的情况下相互重叠，你还需要在“V:[消息视图（200）]-[消息视图菜单]”中去掉破折号。