Whenever you're building or designing an application, you're probably thinking of something with at least a couple of screens. Maybe you have a UITableView or UICollectionView and a detail view or maybe users will drill down into your app's contents in some other way. Instead of drilling down, users could also access a settings screen or a screen where they can add something to a current list.

Every time your user moves from one screen to another, they're navigating. This means that navigation is a very important aspect of building your app, and it's essential that you understand the possibilities and patterns for navigation on the iOS platform. The easiest way to get started with navigation and to explore the way it works is to experiment inside of your Main.storyboard file.

Up until now, we've used the storyboard to create the layout for just a single screen. However, as the name implies, your storyboard isn't there for just a single screen. The purpose of the storyboard is to lay out and design the entire flow of your app. Every screen and transition can be designed right inside of your storyboard file. We'll use the storyboard to add a new UIViewController that will function as a detail page for contacts. The actual contents won't be added right away; so, a single UILabel will have to do for now so that you can explore different kinds of transitions in your app.

After opening the Main.storyboard, drag a UIViewController from the Object Library on the right side of your Interface Builder screen. Drop it next to the view controller that has the current layout in it. You'll see that you now have two separate screens that you can design. Also, drag a UILabel out from the Object Library and drop it inside the new view controller. Place the UILabel in the center of the view and enter some text in the label so you can easily identify this as your second view controller later. Then, add some constraints to the UILabel by clicking on the Pin button in the bottom-right corner and selecting the Horizontal center and Vertical center constraints.

Now that we have a second view controller to display, and some content added to it, let's connect the first and second screens in our app. To do this, we'll create a selection segue. A segue is the transition from one screen to the next. This transition does not necessarily have to be animated. Any time you use a storyboard to move from one screen to the next, you're using a segue. Some segues are triggered whenever a button is tapped. These are called action segues. Segues that can only be triggered through code are called manual segues. You can also connect a cell in a UITableView or UICollectionView to the next screen. This is called a selection segue; it is triggered whenever a cell is selected. A segue that you've already seen is called the relationship segue, which is the connection between UINavigationController and UIViewController that contains the UICollectionView with contacts.

To display that second view controller in the app, we'll use the selection segue; we want the second view controller to display when the user taps on a contact in the collection view. In the Main.storyboard, select the contact collection view cell. Now, press the Ctrl key while you drag it from the cell to the second view controller. After doing this, a list of options will pop up where you can pick how to present this new view controller. For example, try the Present modally segue. This will animate the new view controller up from the bottom of the screen.

This isn't really the style we're looking for in this app. A new contact should be pushed on to the current navigation stack. It shouldn't create a new navigation context like the present modally does. Ideally, we want a back button to appear in the top-left corner so users can go back to the contacts overview very easily.

The Show segue will do this for you. Whenever the presenting view controller is embedded inside of a navigation controller, the Show segue will push the presented view controller on to the current navigation stack. This means that the back button will automatically be displayed, which is exactly what we're looking for. Go ahead and try it out.

Even though this behavior is perfect for HelloContacts, the transition from the overview to the next screen just isn't quite what it should be. If you look closely, the bounce animation on the collection view cell doesn't get a chance to finish before the new view controller is pushed. This looks sloppy, and it's a shame our animation doesn't get enough time to shine. This is a perfect time to use a manual segue; a segue we'll trigger from the code whenever we want to.

In the Main.storyboard, select the connection between the overview and the second view controller and press the Backspace key to delete it. Create a new, manual, segue by dragging from the yellow circle in the top section of your overview view controller to the new view controller. When the modal comes up, select the Manual segue. Now, select the segue you just created and provide detailViewSegue as a value for the identifier field in the Attributes Inspector.

To trigger the segue at the right time, open ViewController.swift and update the following code in the collectionView(_:didSelectItemAt:) method: the updated code is highlighted:

func collectionView(_ collectionView: UICollectionView,  
  didSelectItemAt indexPath: IndexPath) { 
 
    guard let cell = collectionView.cellForItem(at: indexPath) as? 
      ContactCollectionViewCell else { return } 
 
    UIView.animate(withDuration: 0.1,  
        delay: 0,  
        options: [.curveEaseOut],  
        animations: { 
            cell.contactImage.transform = CGAffineTransform(scaleX: 0.9, y: 0.9) 
        }, completion: { finished in 
            UIView.animate(withDuration: 0.1,  
                delay: 0,  
                options: [.curveEaseIn], 
                animations: { 
                    cell.contactImage.transform = CGAffineTransform.identity 
                }, 
                completion: { [weak self] finished in 
                    self?.performSegue(
withIdentifier: "contactDetailSegue", 

                      sender: self)} 
            ) 
        } 
    ) 
} 

By adding a completion handler to the animation that resets the contact image back to its original size, you can trigger the manual segue after the entire animation is complete. A manual segue can be triggered by calling the performSegue(withIdentifier:sender:) method.

This method is implemented in UIViewController and is used to programmatically trigger segues. If you build and run the app now, you'll see that the entire animation on the contact image will complete and only after the animation is done, the segue is performed.

Now that you know how to use a storyboard for designing multiple screens and visually connecting them with segues, it's time to learn more about Auto Layout. Let's add some actual details to the contact detail screen.