How to use Auto Layout with container transitions? - ios

Question

How can you use Auto Layout with the UIViewController container transition method:
-(void)transitionFromViewController:(UIViewController *)fromViewController
toViewController:(UIViewController *)toViewController
duration:(NSTimeInterval)duration
options:(UIViewAnimationOptions)options
animations:(void (^)(void))animations
completion:(void (^)(BOOL finished))completion;
Traditionally, using Springs/Struts, you set the initial frames (just before calling this method) and set up the final frames in the animation block you pass to the method.
That method does the work of adding the view to the view hierarchy and running the animations for you.
The problem is that you we can't add initial constraints in the same spot (before the method call) because the view has not yet been added to the view hierarchy.
Any ideas how I can use this method along with Auto Layout?
Below is an example (Thank you cocoanetics) of doing this using Springs/Struts (frames)
http://www.cocoanetics.com/2012/04/containing-viewcontrollers
- (void)transitionFromViewController:(UIViewController *)fromViewController toViewController:(UIViewController *)toViewController
{
// XXX We can't add constraints here because the view is not yet in the view hierarchy
// animation setup
toViewController.view.frame = _containerView.bounds;
toViewController.view.autoresizingMask = _containerView.autoresizingMask;
// notify
[fromViewController willMoveToParentViewController:nil];
[self addChildViewController:toViewController];
// transition
[self transitionFromViewController:fromViewController
toViewController:toViewController
duration:1.0
options:UIViewAnimationOptionTransitionCurlDown
animations:^{
}
completion:^(BOOL finished) {
[toViewController didMoveToParentViewController:self];
[fromViewController removeFromParentViewController];
}];
}

Answer 1

Starting to think the utility method
transitionFromViewController:toViewController:duration:options:animations:completion can not be made to work cleanly with Auto Layout.
For now I've replaced my use of this method with calls to each of the "lower level" containment methods directly. It is a bit more code but seems to give greater control.
It looks like this:
- (void) performTransitionFromViewController:(UIViewController*)fromVc toViewController:(UIViewController*)toVc {
[fromVc willMoveToParentViewController:nil];
[self addChildViewController:toVc];
UIView *toView = toVc.view;
UIView *fromView = fromVc.view;
[self.containerView addSubview:toView];
// TODO: set initial layout constraints here
[self.containerView layoutIfNeeded];
[UIView animateWithDuration:.25
delay:0
options:0
animations:^{
// TODO: set final layout constraints here
[self.containerView layoutIfNeeded];
} completion:^(BOOL finished) {
[toVc didMoveToParentViewController:self];
[fromView removeFromSuperview];
[fromVc removeFromParentViewController];
}];
}

Answer 2

The real solution seems to be to set up your constraints in the animation block of transitionFromViewController:toViewController:duration:options:animations:.
[self transitionFromViewController:fromViewController
toViewController:toViewController
duration:1.0
options:UIViewAnimationOptionTransitionCurlDown
animations:^{
// SET UP CONSTRAINTS HERE
}
completion:^(BOOL finished) {
[toViewController didMoveToParentViewController:self];
[fromViewController removeFromParentViewController];
}];

Answer 3

There are two solutions depending on whether you simply need to position the view via auto layout (easy) vs. needing to animate auto layout constraint changes (harder).
TL;DR version
If you only need to position a view via auto layout, you can use the -[UIViewController transitionFromViewController:toViewController:duration:options:animations:completion:] method and install the constraints in the animation block.
If you need to animate auto layout constraint changes, you must use a generic +[UIView animateWithDuration:delay:options:animations:completion:] call and add the child controller regularly.
Solution 1: Position a view via Auto Layout
Let's tackle the first, easy case first. In this scenario, the view should be positioned via auto layout so that changes to the status bar height (e.g. via choosing Toggle In-Call Status Bar), among other things, will not push things off the screen.
For reference, here is Apple's official code regarding the transition from one view controller to another:
- (void) cycleFromViewController: (UIViewController*) oldC
toViewController: (UIViewController*) newC
{
[oldC willMoveToParentViewController:nil]; // 1
[self addChildViewController:newC];
newC.view.frame = [self newViewStartFrame]; // 2
CGRect endFrame = [self oldViewEndFrame];
[self transitionFromViewController: oldC toViewController: newC // 3
duration: 0.25 options:0
animations:^{
newC.view.frame = oldC.view.frame; // 4
oldC.view.frame = endFrame;
}
completion:^(BOOL finished) {
[oldC removeFromParentViewController]; // 5
[newC didMoveToParentViewController:self];
}];
}
Rather than using frames as in the example above, we must add constraints. The question is where to add them. We cannot add them at marker (2) above, since newC.view is not installed in the view hierarchy. It is only installed the moment we call transitionFromViewController... (3). That means we can either install the constraints right after the call to transitionFromViewController, or we can do it as the first line in the animation block. Both should work. If you want to do it at the earliest time, then putting it in the animation block is the way to go. More on the order of how these blocks are called will be discussed below.
In summary, for just positioning via auto layout, use a template such as:
- (void)cycleFromViewController:(UIViewController *)oldViewController
toViewController:(UIViewController *)newViewController
{
[oldViewController willMoveToParentViewController:nil];
[self addChildViewController:newViewController];
newViewController.view.alpha = 0;
[self transitionFromViewController:oldViewController
toViewController:newViewController
duration:0.25
options:0
animations:^{
newViewController.view.translatesAutoresizingMaskIntoConstraints = NO;
// create constraints for newViewController.view here
newViewController.view.alpha = 1;
}
completion:^(BOOL finished) {
[oldViewController removeFromParentViewController];
[newViewController didMoveToParentViewController:self];
}];
// or create constraints right here
}
Solution 2: Animating constraint changes
Animating constraint changes is not as simple, because we are not given a callback between when the view is attached to the hierarchy and when the animation block is called via the transitionFromViewController... method.
For reference, here is the standard way of adding/removing a child view controller:
- (void) displayContentController: (UIViewController*) content;
{
[self addChildViewController:content]; // 1
content.view.frame = [self frameForContentController]; // 2
[self.view addSubview:self.currentClientView];
[content didMoveToParentViewController:self]; // 3
}
- (void) hideContentController: (UIViewController*) content
{
[content willMoveToParentViewController:nil]; // 1
[content.view removeFromSuperview]; // 2
[content removeFromParentViewController]; // 3
}
By comparing these two methods and the original cycleFromViewController: posted above, we see that transitionFromViewController takes care of two things for us:
[self.view addSubview:self.currentClientView];
[content.view removeFromSuperview];
By adding some logging (omitted from this post), we can get a good idea of when these methods are called.
After doing so, it appears that the method is implemented in a manner similar to the following:
- (void)transitionFromViewController:(UIViewController *)fromViewController toViewController:(UIViewController *)toViewController duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion
{
[self.view addSubview:toViewController.view]; // A
animations(); // B
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(duration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[fromViewController.view removeFromSuperview];
completion(YES);
});
}
Now it is clear to see why it's not possible to use transitionFromViewController to animate constraint changes. The first time you can initialize constraints is after the view is added (line A). The constraints should be animated in the animations() block (line B), but there is no way to run code between these two lines.
Therefore, we must use a manual animation block, along with the standard method of animating constraint changes:
- (void)cycleFromViewController:(UIViewController *)oldViewController
toViewController:(UIViewController *)newViewController
{
[oldViewController willMoveToParentViewController:nil];
[self addChildViewController:newViewController];
[self.view addSubview:newViewController.view];
newViewController.view.translatesAutoresizingMaskIntoConstraints = NO;
// TODO: create initial constraints for newViewController.view here
[newViewController.view layoutIfNeeded];
// TODO: update constraint constants here
[UIView animateWithDuration:0.25
animations:^{
[newViewController.view layoutIfNeeded];
}
completion:^(BOOL finished) {
[oldViewController.view removeFromSuperview];
[oldViewController removeFromParentViewController];
[newViewController didMoveToParentViewController:self];
}];
}
Warnings
This is not equivalent to how the storyboard embeds a container view controller. For example, if you compare the translatesAutoresizingMaskIntoConstraints value of the embedded view via a storyboard vs. the method above, it will report YES for the storyboard, and NO (obviously, since we explicitly set it to NO) for the method I recommend above.
This can lead to inconsistencies in your app, since certain parts of the system seem to depend on UIViewController containment to be used with translatesAutoresizingMaskIntoConstraints set to NO. For example, on an iPad Air (8.4), you may get strange behavior when rotating from portrait to landscape.
The simple solution seems to be to keep translatesAutoresizingMaskIntoConstraints set to NO, then set newViewController.view.frame = newViewController.view.superview.bounds. However, unless you are very careful with when this method is called, it most likely will give you an incorrect visual layout. (Note: The way that the storyboard ensures the view sizes properly is by setting the embedded view's autoresize property to W+H. Printing out the frame right after adding the subview will also reveal a difference between the storyboard vs. programatic approach, which suggests that Apple is setting the frame directly on the contained view.)

Answer 4

I hope your question gains some traction because I think it's a good one. I don't have a definitive answer for you, but I can describe my own experiences with situations similar to yours.
Here's the conclusion I have drawn from my experiences: you can't use auto layout directly on the root view of a view controller. As soon as I set translatesAutoresizingMaskIntoConstraints to NO on a root view, I start getting bugs–or worse.
So I use a hybrid solution instead. I set frames and use autoresizing to position and size the root view in a layout that is otherwise configured by auto layout. For example, here's how I load a page view controller as child view controller in viewDidLoad in an app that uses auto layout:
self.pageViewController = ...
...
[self addChildViewController:self.pageViewController];
[self.view addSubview:self.pageViewController.view];
// could not get constraints to work here (using autoresizing mask)
self.pageViewController.view.frame = self.view.bounds;
[self.pageViewController didMoveToParentViewController:self];
This is the way Apple loads a child view controller in the Xcode "Page-Based Application" template–and this is performed in an auto layout enabled project.
So if I were you, I would try setting frames to animate the view controller transition and see what happens. Let me know how it works.