SHARE:
Uncategorized

iOS7 Custom View Controller Transitions

Flatiron School / 23 October 2013

The following is a guest post by Dasmer Singh and originally appeared on his blog. Dasmer is currently in the iOS-000 class at The Flatiron School. You can follow him on Twitter here.

iOS7 Custom View Controller Transitions

iOS7 Custom VC Transitions are one of the coolest additions for iOS developers. Unfortunately, there isn’t much proper documentation on how to use them to make the transitions in your app so much more magnificent.

There’s a lot of code behind making a simple transition, and to many, that may be confusing and intimidating. After playing with transitions over the past day, I came to realize that after following a simple setup procedure and copying+pasting some boilerplate code I created Custom VC Transitions are relatively simple to implement into your existing applications. I will be presenting my findings at The Flatiron School at 11 Broadway this Monday at 7:00pm. For more info about the event, check the MeetUp page:

http://www.meetup.com/NYC-NSTalks/events/145815152/

My presentation slides for the event are:

http://dasmersingh.com/flatiron/iOS7_VC_Transitions/presentation.pdf

If you do come to Monday’s MeetUp, definitely download the following Xcode Projects to follow along as I create Custom VC Transitions:

http://dasmersingh.com/flatiron/iOS7_VC_Transitions/VC_Transitions_FreshSetup.zip

http://dasmersingh.com/flatiron/iOS7_VC_Transitions/NavTransitions_FreshSetup.zipThe respective completed projects with extensive comments are posted on GitHub at:

https://github.com/Dasmer/vc_transitionshttps://github.com/Dasmer/navController-transitions

The presentation and commented code on GitHub fully explain my secret sauce to Custom View Controller Transitions. There really are just a few simple steps to creating your first iOS7 Custom View Controllers:

1. Start with a project with standard View Controller transitions (thats just about every application with more than one view controller)

2. Create an NSObject that implements the protocol. This will become the Animation Controller

3. Implement the protocol method ‘transitionDuration’ to return the length of the transition in seconds

4.Set the View Controller that presents the transition as a UIViewControllerTransitioningDelegate

5. Before presenting the nextVC, set the nextVC.transitioningDelegate = self

6. Import the Animation Controller’s .h file in the presenting VC’s .m file

7. Implement the UIViewControllerTransitioningDelegate methods in the presenting VC’s .m file to return an instance of the newly created Animation Controller

8. Go back to the .m file of the Animation Controller (the same file in which you implemented the ‘transitionDuration’ method) and start implementing the ‘animateTransition’ method using the following boilerplate code between the 3 dash lines:

—-

//get references to the to and from view controllers **BOILERPLATE

UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey]; UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];

//get a reference to the final frame of the toViewController **BOILERPLATE

CGRect finalFrame = [transitionContext finalFrameForViewController:toViewController];

//get a reference to the transtion context’s container view (where the animation actually happens) **BOILERPLATE

UIView *containerView = [transitionContext containerView];

//add the toViewController to the transition context’s container view **BOILERPLATE

[containerView addSubview:toViewController.view];

—-

Take a step back and try to understand everything we just did. Just about every custom VC we do has just about the same procedure up till here. The next and last step differentiates one custom animation from another. It’s the most difficult step, but if you can master the previous 8 simple steps, you’re in pretty good shape.

9. After copy+pasting the boiler plate code in ‘animateTransition’, do any other pre-animation setup specific to your transition, and then create a UIView Animation to actually animate transition. You can look at my slides/GitHub to see some examples of step9 code. I’ve commented my step9 code quite thoroughly, to make it easier to understand exactly what is going on. As iOS7 documentation and forums becomes more comprehensive, there will definitely be more examples of step9 code all over the web. That’s all for now! Follow me on twitter at @DazIsBoss

Check out my 3 apps on the AppStore:https://itunes.apple.com/us/app/instastamp/id704108902https://itunes.apple.com/us/app/babystamp/id721125816https://itunes.apple.com/us/app/findgurdwara/id686614180

Creating my first gem Previous Post HTTPrime: What Can We Learn About Http Request-Response From a Steakhouse? Next Post