Segues and Navigation in iOS (IV): The Unwind Segue - Digital Leaves
2525
page-template-default,page,page-id-2525,qode-social-login-1.0,qode-restaurant-1.0,ajax_fade,page_not_loaded,,select-theme-ver-4.1,wpb-js-composer js-comp-ver-5.2,vc_responsive

Segues and Navigation in Swift. Push, Modals and Exit Segues. Digital Leaves. Define Segues Programmatically, pass data to destination view controllers. The Unwind Segue.Welcome back! This is the last episode of the “Segues and Navigation in iOS” tutorial series. In the previous episode, we talked about how to implement a bootstrap modal in iOS. In this last episode, we are going to delve into The Unwind Segue, what it is and how to implement it in Swift.

Motivation

Imagine an e-commerce application with a checkout flow involving several steps. Somewhere near step 4, your user realizes that some important data in step 1 was wrong and she need to fix it.

Now imagine a social network where the user can upload pictures, apply some filters, add a caption and publish. These are modeled as a series of steps. However, when the user is adding a caption she notices that the pic is not that good and needs to go back to the beginning.

Both scenarios share a common issue. The users have been navigating through a series of related screens, probably part of a multipart process. Then, they realize that they need to get back to an initial screen. Thus, you need to be able to take the user back several view controllers at once.

Indeed, these kind of screen flows have become more and more prominent. The complexity reduction trend has favored shorter, easy to handle screens linked sequentially.

The Unwind Segue in iOS

The Unwind Segue was introduced in iOS 6, in the 2012 WWDC. Before that, if we wanted to go back several view controllers at once, we needed to implement it by means of custom hacks.

As you might imagine, that situation was less than optimal, and subject to bugs and regular tweaking. Luckily for us, Apple introduced the Unwind Segue. Let’s have a look at how to implement it in our applications.

Origin And Destination of an Unwind Segue

Before getting into its implementation, let’s clarify some concepts about the unwind segues.

Contrary to normal segues, where you have an origin view controller that directly segues into the destination view controller “left-to-right”, in an unwind segue, we have a reverse situation.

Digital Leaves. Segues And Navigation in iOS. The Unwind Segue.As a result, the origin of the segue will be one of the last presented view controllers, at the right in the storyboard hierarchy.

Conversely, the destination view controller is probably one of the first view controllers in the hierarchy. Thus, visually, an unwind segue goes “right-to-left” in an storyboard.

This visual representation, depicted in the figure above, may be useful to help you understand how unwind segues work.

Implementing The Unwind Segue

We will use the same sample code project where we defined the different types of segues.

In fact, we will use the modal segue we defined as the initial step for a sequence of modal transitions. At the end of this sequence, there would be a button to allow the user to go back to the initial step.

Preparing Our User Interface In Interface Builder

First, you need to create some modal steps. For the shake of simplicity, we will duplicate our ModalViewController. Copy and paste or duplicate it three times. Then, add a “Show another modal” button and link them together via a modal segue triggered by that buttons.

Pro tip: You can easily duplicate view controllers in Interface Builder by selecting them and pressing Cmd+D.

Our goal is having a series of view controllers appearing modally like steps in a screen flow.

Finally, create a new swift file, subclass of UIViewController, and name it “ModalWithUnwindSegueViewController”. Then, in Interface Builder, change the class of the last view controller in the sequence to that new view controller subclass.

Also, change the title of the “Show another modal” button to “Exit to main screen”. We will use this button to trigger the unwind segue.

Your configuration should look similar to this one:

Digital Leaves. Segues And Navigation in iOS. The Unwind Segue.

Notice how the “Show another modal” button is directly tied to a modal segue to the next view controller.

Defining The Unwind Segue Action

Once our design is in place, we need to define an action that will be the target of the unwind segue. This action needs to be performed in the destination view controller. Remember that this means one of the initial view controllers at the left.

In our case, let’s select our root view controller (ViewController) as the destination of the unwind segue. This view controller contained all the buttons to trigger the different segues. Thus, we expect to be taken back to this view controller when we trigger the unwind segue.

Defining the unwind segue action is as simple as creating an empty IBAction function. Give a descriptive name to that function, like “unwind to main screen”.

Binding The Button With The Unwind Segue

Next, it’s time to bind the button in our origin view controller (i.e: the last modal) to the unwind segue.

To do so, ctrl+click on the button and drag to the “Exit” button in the view controller’s top bar.

Digital Leaves. Segues And Navigation in iOS. The Unwind Segue.

While holding Ctrl, release the click. A dialog with the name of the IBAction we defined for our destination view controller will appear. Click on it and, voila! The unwind segue will be created.

Now run the application and navigate to the modal segue, click on “Show another modal” until you reach the last view controller. Then, click on “Exit to main screen”. You will be taken to the first view controller.

Can We Define The Unwind Segue Programmatically?

Of course we can! As we learned earlier, being able to perform a segue programmatically has multiple advantages.

In order to do so, just hold control and drag and drop from the view controller icon to the “Exit” icon at its right. The same dialog will appear so you can choose the name of the action from the view controller to unwind to.

Digital Leaves. Segues And Navigation in iOS. The Unwind Segue.Then, once you choose that action, go to the view hierarchy at the left. As shown in the picture below, a new segue will appear for the view controller called “Unwind segue”. Click on it and, in the attributes inspector, choose an identifier for the segue.

Digital Leaves. Segues And Navigation in iOS. The Unwind Segue.

Then, it’s just a matter of performing the segue programmatically with the same method we saw earlier for the normal segues.

Where To Go From Here

This is the final episode for the “Segues and Navigation in iOS” tutorial series. In this article, we learned about unwind segues, and how to implement them.

I hope you found it useful. Don’t hesitate to share your thoughts in the comments section.

Before you continue...

Hi there! I created the Digital Tips List, the newsletter for Swift and iOS developers, to share my knowledge with you.


It features exclusive weekly tutorials on Swift and iOS development, Swift code snippets and the Digital Tip of the week.


Besides, If you join the list you'll receive the eBook: "Your First iOS App", that will teach you how to build your first iOS App in less than an hour with no prior Swift or iOS knowledge.

I hate spam, and I promise I'll keep your email address safe.