Enrich your iOS apps with dynamic content and advanced presentation

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:

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

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:

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.

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.

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! 🤩

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

Not for long! Improvements are on the horizon! 💪

• 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.