Custom Navigation Transition

One of the cool feature introduce by Apple in iOS7 is custom view controller transitions which make it possible for developer to create own animated transition from one view controller to next view controller.
By default UINavigationController provide right to left animation transition switching one view controller to next view controller and left to right animation transition for back to parent view controller.

But from iOS7, we can add  better interface experience within the app and can give own animation transition for switching one view controller to another view controller.

Here we will create a simple project and  use custom  transition for switching between view controller using UINavigationController Delegate.

Create a new project and embed storyboard in UINavigationController.

Create a new class, subclass of UIVIewController(named ImageCollectionViewController)
ImageCollectionViewController display collection of images in UICollectionView, so switch to ImageCollectionViewController.xib file and add UICollectioView.

Go to main storyboard add a button and set IBAction method
import ImageCollectionViewController to ViewController class and define Button IBAction method.
inside IBAction method  write the code for push to ImageCollectionViewController.

Go to ImageCollectionViewController.h file and add following delegates.
1. UICollectionViewDelegate
2. UICollectionViewDataSource

also add a IBOutlet property for UICollectionView and a property of NSArray for containing all images.

Switch to ImageCollectionViewController.xib file and connect UICollectionView outlet.

Now, go to ImageCollectionViewController.m file

inside viewDidLoad() method set navigationController delegate.
and add images to collectionArrray.

viewDidLoad() will be look like this

Implement UICollectionViewDataSource methods.

Now run the app, we can see the all images.

next step is add another UIViewController subclass(named DetailViewController)
within this class we will display selected image in full screen
Switch to DetailViewController.h file add property for UIImageView and for a UImage.

 go to DetailViewController.xib a add UIImageView and set outlet.

Switch to ImageCollectionViewController.m class, import newly created controller.

Now add UICollectionView Delegate method didSelectItemAtIndexPath:  

Run the app and click on any images we can switch to next view controller(DetailsViewController) with default navigation.

Now go to ImageCollectionViewController.h file and add another delegate UINavigationControllerDelegate 

Add new class , subclass of NSObject(named CustomTransition)
We will add our whole transition code in this class.
UIViewControllerAnimatedTransitioning protocol implement the animations for a custom view controller transition.

Switch to CustomTransition.m file and add delegate methods of UIViewControllerAnimatedTransitioning.

1. set the duration for the transition animation.
-(NSTimeInterval) transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{
    return 0.4;
}

 add another another delegate method animateTransition:()
Its perform the transition animations for switching between view controllers.
-(void) animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
   
   
}


Transition context object is created by the system and contain both controller details.

Now its time to add our own code for custom transition
it will be better to write present and dismiss transition inside two different methods.
so add a method for present animation

Above code will perform custom transition for presenting next view controller
Let's go over this step by step
1. get controller to present after transition.
2. get current controller
3. get the view in which the animated transition should take place.
4. Set frame for next controller view
5.add next controller view to animation container view.
6. Scale next controller view to 0.1, so its reduce the size of view 10 times, so it will look too small when transition will start.
7. Animation block for transform next view to original scale.
  after completion the transition remove parent controller view and call method complete transition.

call the presentWithContextTransitioning: from animateTransition:  methos.


Now time to execute our own custom transition, go to ImageCollectionViewController.m file and import our CustomTransition class and add UINavigationControllerDelegate method
-(id<UIViewControllerAnimatedTransitioning>) navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC{
     return [[CustomTransition alloc] init];
}
and in viewDidLoad() set navigation controller delegate
Now run the app and check own cool stuff for switching between two controller.

In the same way we can writer custom transition for dismiss a controller
Here code snap

declare another method in CustomTransition.h and a BOOL variable
@interface CustomTransition : NSObject<UIViewControllerAnimatedTransitioning>
{
    BOOL isReverse;
}
-(instancetype) initWithReverse:(BOOL)value;
@end

define the method inside CustomTransition.m file
-(instancetype) initWithReverse:(BOOL)value;{
    self = [super init];
    if (self) {
        isReverse = value;
    }
    return self;
}

Update animateTransition: method with the following code:

-(void) animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
    if (isReverse == YES) {
        [self dismissWithContextTransitioning:transitionContext];
    }
    else{
        [self presentWithContextTransitioning:transitionContext];
    }
}

Now switch to ImageCollectionViewController and update UINavigationController delegate method

Now run the App and check.

Click here for complete project.