How to do a view controller transition where the selected view stays in place and fades out

Question

I am interested in doing a transition where it is a standard push transition but that the fromViewController will persist the selected UIView over the top of the toViewController while the toViewController slides into place. I have tried to mock this up below.

The boxes on the left hand side represent UIViews and the third one (the brown one_ is the one that is clicked. In the middle figure, the fromViewController slides to the left (eve as the toViewController slides in. The selected UIView stays in place and has an animation that fades it out.

I am not so familiar with Custom Transitions but am thinking this is how it woulf be done. Possibly in the context of a Container View Controller but, honestly, not that sure. Any ideas on how to achieve this effect? I'm hoping it's also possible to run the effect in reverse when the user hits the 'Back' button.

Answer 1

It is very easy to implement. First of all, create a custom Container Controller. Do you need Navigation-controller-like controllers stack? If yes, implementation will be quite more complicated. Anyway, it will look something like this:

- (void)showViewController:(UIViewController *)viewController
              selectedView:(UIView *)selectedView
{
    // Tell prev. controller about pending removing
    [_currentController willMoveToParentViewController:nil];

    // Add the next controller
    [self addChildViewController:viewController];

    // Move selected view to the Containers view
    [self.view addSubview:selectedView];

    // Add toView below fromView
    [self.view insertSubview:viewController.view 
                belowSubview:_currentController.view];

    // Animate whatever you need
    [UIView animateWithDuration:0.25
                     animations:^
     {
         // Move from view
         CGPoint fromViewCenter = viewController.view.center;
         fromViewCenter.x = -0.5 * viewController.view.frame.size.width;
         viewController.view.center = fromViewCenter;

         // Fade out the selected view 
         selectedView.alpha = 0;
     }
                     completion:^
     {
         // Clean
         [_currentController.view removeFromSuperview];

         // Finally remove prev. controller from the hierarchy
         [_currentController removeFromParentViewController];

         // Notify 
         [viewController didMoveToParentViewController:self];
     }];

}

Hope you will manage to make reverse by yourself.