Applications are open for the Product College - Apply Now

X

In our Notes app, when a user taps on a note cell in our table view controller, we want our navigation controller to push our DisplayNoteViewController on to the top of the navigation stack.

In order for us to set this functionality up, first we'll need to set up our new DisplayNoteViewController. Let's get started by creating a new view controller object in our storyboard.

In Main.storyboard, create a new view controller:

  1. Drag a view controller from the Object Library into your storyboard. Position it on the right-side of your table view controller.
  2. Select your new view controller.
  3. With the view controller selected, navigate to the Identity Inspector in the Utilities area.
  4. In the Class field, set the view controller's custom class to DisplayNoteViewController. Auto-complete should help you select the correct class.

New View Controller

Displaying and Editing

Next, we'll need to create our UI layout for DisplayNoteViewController. Our view controller will contain the note's title and a body for each note's content. The user should be able to edit the title and content of the note.

To provide this functionality, we'll use two UIKit objects: the text field and text view.

We've already used a text field in our tip calculator app. In this app, we'll use the UITextField to edit and display the note's title.

As for the note's content, we'll need to introduce a new class we haven't used before: the UITextView. A text view provides an easy way to display and edit multiple lines of text.

Let's add both to our DisplayNoteViewController.

In Main.storyboard, add a text field and text view to the DisplayNoteViewController:

  1. Drag a text field from the Object Library to the top of your storyboard view controller. Make sure there's a little space between the top of the view controller and your text field. This will be important for setting up our auto-layout constraints next.
  2. Right under your text field, drag a text view from the Object Library and position it's frame so that it roughly covers the remaining view.

Display Note UI

Check that you've left some space between the top of the view controller and your text field. This will be important for setting up our auto-layout constraints next.

Adding Constraints

Let's add our auto-layout constraints to both of our new views.

In Main.storyboard, add the following constraints to the text field:

  • (Text Field) Top Edge 10pts from Safe Area Top Edge
  • (Text Field) Leading Edge 15pts from Safe Area Leading Edge
  • (Text Field) Trailing Edge 15pts from Safe Area Trailing Edge

Text Field Constraints

Next, let's do the same for our text view.

In Main.storyboard, add the following constraints to the text view:

  • (Text View) Top Edge 10pts from Text Field Top Edge
  • (Text View) Leading Edge 15pts from Safe Area Leading Edge
  • (Text View) Trailing Edge 15pts from Safe Area Trailing Edge
  • (Text View) Bottom Edge 15pts from Safe Area Bottom Edge

Text View Constraints

That's it! We've added our constraints for our DisplayNoteViewController subviews. You're getting pretty good at this...

Checkpoint

We've created a new view controller in storyboard, connected it's custom class to our Swift source file, added it's subviews and finally implemented each subview's auto-layout constraints.

Because our new view controller isn't yet connected to our UINavigationController, there's no way for us to check our progress other than comparing storyboards.

Your storyboard should now look like the following:

Storyboard Checkpoint

We'll setup our navigation controller to access our DisplayNoteViewController using segues in the next section. Onwards!

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