• 20 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 3/6/20

Complete the transitions

Log in or subscribe for free to enjoy all this course has to offer!

Now we have a detail view which contains some useful information, but no way for the user to reach it! 😕

To transition to it, we are going to use a navigation controller!

So, let’s finish off our app interface!

Utilizing segues

We've got a navigation controller attached to our initial view controller - the media list.

To implement a transition from each media item cell to the detail view, we have a couple of options:

  • programmatically processing cell selection event, or

  • using segues attached to the cell.

Processing cell selection

To process cell selection, we could use the  didSelectItemAtIndexPath  delegate method to fetch the item that's corresponding to the cell, get the detail view controller from the storyboard, assign a media item to it, and go with it. 

You can try implementing this solution; however, there are a few implications with using this approach.

Firstly, we need to incorporate a navigation bar to display the title and back button. We could achieve this by either manually laying out the necessary navigation elements in the storyboard, or embedding the detail view controller into another navigation controller just like the list view controller so that the navigation bar layout is managed automatically (this approach is acceptable).

Using segues

As an alternative, I'd recommend using segues. We're going to assign a segue to our collection view cell, so that when the user clicks on a cell, the segue will automatically be processed and lead the user to the new controller - the media detail view controller.

To create a segue, right click on the cell prototype of the list view and create a new connection in the Triggered Segues section by dragging it onto the detail view controller:

Create a segue
Create a segue

As you let go, select the Show option from the dropdown menu:

Configure display mode
Configure display mode

This will automatically display the secondary view controller when a user taps on a cell. Notice that a navigation bar appeared at the top of our detail view. Let's change its title. To do so, select the navigation bar on the Details view controller and change the title attribute:

Changing navigation title
Changing navigation title

Now, we want to change the back button, and instead of saying Back we want it to say List. You can see the Back button attribute on the attribute inspector, and it may appear logical to change it right there. However, doing so will have no effect on the title of the back button on this detail view. 😱

This is because we need to change this attribute on the controller that we are referring to, which is  the presenting controller. The presenting view controller in this case is our list view controller.

Configuring Back button
Configuring Back button

Why are we setting the back button title on the presenting view controller? 

Setting the back button on presenting view controller ensures consistency for the UI. No matter what view controller our list view controller will call, the back button will read as List. At the same time, if some other controller calls our detail view controller, the back button will refer to that other presenting view controller.

Back to our segue!

To be able to access this segue programmatically, we need to assign an identifier to it; we do that in the storyboard on attribute inspector.

Configure segue identifier
Configure segue identifier

Next, we need to pass a corresponding media object. We can interrupt the segue processing and work with involved components prior to the completion of the transition. For that, we are going to override a preparation method -  prepare(for segue: , sender: ) .

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if segue.identifier == "ShowMediaDetails",
let cell = sender as? ListCollectionViewCell,
let indexPath = collectionView.indexPath(for: cell),
let mediaDetailViewController = segue.destination as? MediaDetailViewController {
let mediaBrief = dataSource[indexPath.item]
mediaDetailViewController.mediaId = mediaBrief.id
}
}

This method is called before the transition to the destination view controller. Let's review what we are doing here:

  • Firstly, we need to make sure we've got all the variables right, so we are verifying a composition of the following conditions:

    • Making sure that we are handling the correct segue - ShowMediaDetails, as there might be other segues present within a view controller prepared using the same method that will require a different handling procedure.

    • Attempting to identify a corresponding cell.

    • Calculating indexPath for the cell.

    • Getting access to the destination view controller and typecasting it to MediaDetailViewController.

  • Once all the components are present, we can safely get our data source - media object - and pass it to the controller.

Now we can safely play with the app! 🤩

Segue transition
Segue transition

If you try to tap on either the iTunes button or swag view, 😟 you'll get an alert:

Unable to open URL
Unable to open URL

Not for long! Improvements are on the horizon! 💪

Let's recap!

  • Segues are used to implement transitions between view controllers.

  • prepare(for segue: , sender: )  method can be used to configure the view controller that's about to be displayed in segues. 

Example of certificate of achievement
Example of certificate of achievement