Question

I’m trying to add a view (messageView) to my menu item (messageViewMenu) so that when the menu item is tapped, this new view is added just above it and they both slide down the screen together one behind the other – Evernote 5.1.2 has something similar.

I’m using an NSLayoutConstraint to attach the new view to what I assume is the top of the menu item. I then animate the menu item’s existing vertical constraint to a header UIView (_headerMessageConstraint) to grow to size 300. I would expect the new view to be attached vertically with its trailing edge to the leading edge of the menu item and they slide down the screen together.

However, the new view slides down with the menu item and then continues on behind it until it seems the top edges are aligned.

Can anyone tell me where I’m going wrong?
Thanks in advance for your help

Steve

EDIT. Since I posted this I’ve learnt that that when I add the new view (MessageViewController’s mvc.view) it’s placed by default at 0,0. I don’t want it at 0,0 though so it seems like I have to either set a frame for it at the location I want it to appear at – which seems wrong when using auto layout – or add this new view to a subview and animate the subviews height, perhaps… though I may be talking myself into a dark place here.

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

I’m not sure exactly what you’re trying to do, but you need to add the line [self.view layoutSubviews] just above your animation block. The main view needs to layout your new view in its starting position, before you animate.

You also need to take out the dash in “V:[messageView(200)]-[messageViewMenu]” if you want the 2 views right on top of each other with no space.