How to animate addSubView: using Autolayout - ios

Question

Setup: have a containerView on screen inside a UIViewController (for the sake of simplicity let's say containerView takes up the whole screen).
Problem: create and add an overlayView as a subView to containerView and animate the appearance so that it would animate into position from the right as a response to a user action.
UIView *overlayView = [[UIView alloc] initWithFrame:containerView.frame];
overlayView.translatesAutoresizingMaskIntoConstraints = NO;
[containerView addSubview:overlayView]; // Can't add constraints before inserting into view hierarchy
Approach: tie the leading edge of the overlayView to the leading edge of the containerView with a constraint that I'll call overlayLeadingConstraint. Set overlayLeadingConstraint.constant to the width of containerView so that it would be initially positioned just off screen to the right.
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"|[overlayView(width)]" options:0 metrics:metrics views:views];
[containerView addConstraints:constraints];
NSLayoutConstraint *overlayViewLeadingConstraint = [constraints objectAtIndex:0];
overlayViewLeadingConstraint.constant = containerView.frame.size.width;
// Height constraint not shown for simplicity
Animation: now onto the real problem; animate overlayView into position from the right. First approach is something like this:
overlayViewLeadingConstraint.constant = 0.0;
[UIView animateWithDuration:1.0 animations:^{
[containerView layoutIfNeeded];
}];
But this does not work as all the code above would execute on the same run loop and so only the end result would be shown.
Second approach: try to defer the animation to a future run loop until after the initial layout after addSubview: has already taken place.
dispatch_async(dispatch_get_main_queue(), ^{
overlayViewLeadingConstraint.constant = 0.0;
[UIView animateWithDuration:1.0 animations:^{
[containerView layoutIfNeeded];
}];
});
This does not work either and it hints that addSubview: and the setup of constraints can take up multiple run loops.
Third approach: try to delay the animation even further: several run loops into the future.
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
overlayViewLeadingConstraint.constant = 0.0;
[UIView animateWithDuration:1.0 animations:^{
[containerView layoutIfNeeded];
}];
}];
The time delay is small, but it allows several run loops to complete before the animation and this seems to achieve the desired effect.
Questions:
The above approach seems to be a workaround and not the real solution. So I'm wondering if there is a better approach to this. I have thought about using the hosting viewController's viewDidLayoutSubviews method to get to know when overlayView is in place and it's ok to fire up the animation, but the documentation explicitly advises against this:
However, this method being called does not indicate that the individual layouts
of the view's subviews have been adjusted. Each subview is responsible for
adjusting its own layout.
I'm starting to think that Apple's idea was to have all subViews added at initialization time and just hide those that you don't need immediately. So that when the time comes to animate a subView it would already be a member of the view hierarchy tied up properly with constraints.
How would you do it? Any input is much appreciated.

Answer 1

I'm not sure what you're doing with some of the things you don't show, but this code, worked fine for me. I made a view in IB (containerView) that was 200 x 200, and used this code,
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
UIView *overlayView = [UIView new];
overlayView.backgroundColor = [UIColor redColor];
overlayView.translatesAutoresizingMaskIntoConstraints = NO;
[containerView addSubview:overlayView];
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:#"|[overlayView]|" options:0 metrics:nil views:#{#"overlayView":overlayView}];
NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|[overlayView]|" options:0 metrics:nil views:#{#"overlayView":overlayView}];
[containerView addConstraints:constraints];
[containerView addConstraints:constraints2];
NSLayoutConstraint *overlayViewLeadingConstraint = [constraints objectAtIndex:0];
overlayViewLeadingConstraint.constant = containerView.frame.size.width;
[containerView layoutIfNeeded];
overlayViewLeadingConstraint.constant = 0.0;
[UIView animateWithDuration:1.0 animations:^{
[containerView layoutIfNeeded];
}];
}
This animated correctly. Notice that I put in a call to layoutIfNeeded before the animation block. That may or may not be necessary in your case, depending on some aspects of your code that you didn't show.
I don't know if using [constraints objectAtIndex:0] to get the constraint you want to modify is safe; it worked in this case, but I don't know if the order of the constraints set up with the visual format is guaranteed.

Answer 2

You have not added anything to the animations block that will animate. The animations block is generally considered to be the "I want my UI to end up in this state; animate stuff to make that happen" block.
[UIView animateWithDuration:1.0 animations:^{
overlayViewLeadingConstraint.constant = 0.0;
}];