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.
Main.storyboard, create a new view controller:
- Drag a view controller from the Object Library into your storyboard. Position it on the right-side of your table view controller.
- Select your new view controller.
- With the view controller selected, navigate to the Identity Inspector in the Utilities area.
- In the Class field, set the view controller's custom class to
DisplayNoteViewController. Auto-complete should help you select the correct class.
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
Main.storyboard, add a text field and text view to the
- 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.
- 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.
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.
Let's add our auto-layout constraints to both of our new views.
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
Next, let's do the same for our text view.
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
That's it! We've added our constraints for our
DisplayNoteViewController subviews. You're getting pretty good at this...
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:
We'll setup our navigation controller to access our
DisplayNoteViewController using segues in the next section. Onwards!
If you have feedback on this tutorial or find any mistakes, please open issues on the
GitHub Repository or comment below.