Elegant Custom UIViewController Transitions

Tim Moose Tutorials

If you’ve ever implemented a custom view controller transition by adopting UIViewControllerTransitioningDelegate and UIViewControllerContextTransitioning in your view controller, you may have found that the result added unwelcome clutter to your view controller and wasn’t very reusable. This tutorial will show you how to build a reusable, standalone view controller transition by subclassing UIStoryboardSegue. You’ll see how the segue conveniently integrates with Interface Builder as a custom segue type and can be used in any UIKit app — no storyboard required.

A SwiftMessages custom segue demo

The image above shows this technique in action in the SwiftMessages demo app. The transitions you see where done using a custom segue that I introduced in SwiftMessages 5 to utilize SwiftMessages layouts, animations, and more for modal view controller presentation and dismissal.

For this tutorial, we’re going to reproduce the bottom card-style transition. To keep it simple, some of the non-essential functionality, like background dimming and dismissal gestures, will be left to you as an exercise.

The full source of the final project can be found on our CustomSegueDemo GitHub repo. Let’s get started.

Step 1: Create a custom segue.

Start by creating a subclass of UIStoryboardSegue called BottomCardSegue.

The segue’s action happens inperform(), which we override and do a modal presentation.

At this stage, BottomCardSegue is already a fully-functional custom segue. It just doesn’t do anything interesting yet.

Step 2: Set up the storyboard.

Taking a look at main.storyboard, the initial view controller consists of a “Show” and “Show Programmatically” buttons. The destination view controller is a simple navigation stack (copied directly from the SwiftMessages demo app). We define our storyboard segue (highlighted blue) using the standard procedure:

  1. Control-drag from “Show” to the navigation controller.
  2. Select “bottom card” from the segue type prompt.

Interface Builder has conveniently included BottomCardSegue in the segue type prompt using the autogenerated (and oddly lower-cased) name “bottom card”.

Step 3: Prepare for segue.

Next, we add a “Done” button to the root view controller. I would normally recommend having the “Done” button trigger an unwind segue. However, in order to point out that a custom segue experiences the same lifecycle as a built-in segue, we’ll add the button and configure its action in prepare(for:sender:).

The dismissal action is done in the hide() function by calling dismiss(animated:completion:).

You can now run the app to verify that “Show” and “Done” are working. What you’ll see is the default full-screen modal transition — the one that slides up and down from the bottom.

Configuration Options

Suppose that we added an option to BottomCardSegue to specify whether or not to dim the background. In an ideal world, Interface Builder would support @IBInspectable on UIStoryboardSegue, allowing us to set the dim option directly on the segue’s Attribute Inspector panel. Alas, this is not the world we live in, so I’ll suggest a couple of for configuring segues.

  1. Subclass BottomCardSegue and configure options in init(identifier:source:destination:). For example, we could define BottomCardDimmedSegue with the hypothetical background dimming option enabled. Interface Builder would add a “bottom card dimmed” option to the segue selection prompt.
  2. Downcast segue in prepare(for:sender:) to BottomCardSegue and configure options there.

While you’re considering which path to take, ask Apple to support @IBInspectable on UIStoryboardSegue!

Step 4: Add the custom transition.

We’re ready to add the custom transition by having BottomCardSegue adopt UIViewControllerTransitioningDelegate and UIViewControllerContextTransitioning. We need to add a few more steps to perform() before calling present().

First, set the destination view controller’s transitioning delegate to self to gain control over the transition.

UIKit doesn’t automatically retain instances of UIStoryboardSegue. Therefore, in order to stay around long enough to perform the dismissal transition, we need to create a strong reference to self. We’ll set it to nil after dismissal to avoid leaking memory.

Finally, we set the modal presentation style to .overCurrentContext to allow the presenting view controller to remain visible under the presented content.

Our job as transitioning delegate is to vend the instances of UIViewControllerAnimatedTransitioning that perform the actual presentation and dismissal animations. In a moment, we’ll introduce nested classes Presenter and Dismisser and have each of them adopt UIViewControllerAnimatedTransitioning. But first, let’s adopt UIViewControllerTransitioningDelegate on BottomCardSegue by returning Presenter and Dismisser instances when asked.

The segue’s final task is to vend the dismissal component. So we are free to release the strong self reference just before returning Dismisser().

The Presenter and Dismisser classes adopt UIViewControllerTransitioningDelegate as follows.

We won’t step through the above layout and animation code in detail because transition mechanics are not the focus of this tutorial. Many existing resources do a great job covering UIViewControllerAnimatedTransitioning (try Apple’s documentation, AppCoda, or objc.io).

However, it’s worth noting one layout detail found in Presenter. When setting up the Auto Layout constraints on toView, we respect the view controller’s preferredContentSize.height property by adding an explicit height constraint if preferredContentSize.height >= 0.

No height is specified when preferredContentSize.height == 0 (the default). Instead, Auto Layout is left to work out toView‘s height based on its constraints.

A word of caution about UINavigationController. In our testing, the intrinsic height of a navigation controller does not reflect the Auto Layout constraints of its content. It is therefore necessary to specify a value for preferredContentSize.height. Without it, our navigation stack would have zero height. So let’s specify 200pt in the navigation controller’s Attribute Inspector panel in main.storyboard.

With that out of the way, we’re done! We now have a reusable UIStoryboardSegue subclass that utilizes custom view controller transitioning APIs to present a modal view controller using a card-style layout. Try it out.

Programmatic Transitioning

We’ll conclude by showing how apps that don’t use storyboards can use BottomCardSegue. For simplicity, we’re going to use the view controllers in main.storyboard. The important point is that the transition will be performed programmatically without an associated segue in the storyboard itself.

To set this up, we introduce an @IBAction in the main view controller and connect it to the “Show Programmatically” button.

Instantiate the destination view controller.

Use this to initialize BottomCardSegue.

Call prepare(for:sender:) to configure the “Done” button. I don’t advocate calling this in general, but UIKit doesn’t seem to mind.

Finally, perform the segue.

Cool!

Here’s what the final result looks like.

The custom segue in action

Custom UIViewController transitions can be a great way make your app unique and enjoyable. We hope this tutorial has inspired you to give it a try. Thanks for reading and happy coding.