With our new DisplayNoteViewController set up, we can implement the functionality for our UINavigationController to navigate between view controllers.

A navigation controller uses segues (pronounced seg-way) to navigate from one view controller to another. A segue allows us to push and pop view controllers on and off the navigation stack.

Creating A Segue

In our Notes app, when a user taps on a ListNotesTableViewCell in our table view controller, we want to trigger a segue to our DisplayNoteViewController.

Segues can be triggered programmatically and in storyboard with Interface Builder. This tutorial will focus on creating segues in storyboard.

In Main.storyboard, create a segue that's triggered when a user taps on a notes cell:

Step-by-step:

  1. Select the storyboard cell in your table view controller.
  2. With your notes cell selected, control-click and drag to the DisplayNoteViewController.
  3. In the popup, select a Selection Segue of Show to create your new segue.

After creating your new segue, you'll see a segue arrow connecting the table view controller and DisplayNoteViewController. You can also see this segue in the Document Outline.

New Segue

You'll also notice that since we setup our text field with auto-layout constraints using our Safe Area, when our UINavigationController added a navigation bar to our DisplayNoteViewController, our subviews re-positioned themselves automatically. This is because the Safe Area now registers it's top edge as the bottom of the navigation bar. Neat!

Adding A Segue Identifier

Segue identifiers, similar to the table view cell identifiers we previously used, allow us to uniquely identify a storyboard segue in our Swift code.

Let's add a segue identifier to our new segue.

Add a segue identifier to the segue between our table view controller and display notes view controller:

Set Segue Identifier

Step-by-step:

  1. Select the segue by clicking on it.
  2. With the segue selected, navigate to the Attributes Inspector in the Utilities area.
  3. Set the Identifier field to displayNote.

Now, we're able to reference this specific segue in our code using it's new identifier that we've just setup.

Preparing For Segues

Right before a segue is completed, we can use a built-in UIViewController method named prepare(for:sender:) to execute code just before the new view controller is pushed on to the navigation stack.

You should never called prepare(for:sender:) yourself. Each UIViewController will automatically notify you with the prepare(for:sender:) when segues are about to happen.

This allows us to, as the name suggests, prepare for a segue. This will be especially useful for passing data from one view controller to the next.

Let's test it out!

Open ListNotesTableViewController with your Project Navigator, and add the following code below your table view data source methods:

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    // 1
    guard let identifier = segue.identifier else { return }

    // 2
    if identifier == "displayNote" {
        print("Transitioning to the Display Note View Controller")
    }
}

In the code above:

  1. Check that the segue has a identifier.
  2. If so, check if the identifier is equal to displayNote. If yes, add a print statement to our debug console.

Running the App

In this section, we setup a segue for when a user taps on a note cell in our ListNotesTableViewController. We've also implemented code that override our table view controller's prepare(for:sender:) and print to the debug console each time the segue is triggered.

Let's test that our new segue works!

Build and run the app. In the table view controller, click on a note cell. To pop off the DisplayNoteViewController off the navigation stack, we can tap the back button. Navigate back and forth between the two view controllers and check that prepare(for:sender:) is printing to the debug console correctly.

If everything looks correct, let's segue on to the next section and learn about how to add new bar button items to our navigation bar.

Feedback

If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more