Chapters
Chapters

Chapters

Hide chapters

iOS Apprentice

Before You Begin

Section 0: 3 chapters
Show chapters Hide chapters

Getting Started with UIKit

Section 1: 8 chapters
Show chapters Hide chapters

Checklists

Section 2: 12 chapters
Show chapters Hide chapters

My Locations

Section 3: 11 chapters
Show chapters Hide chapters

Store Search

Section 4: 12 chapters
Show chapters Hide chapters

Getting Started with SwiftUI

Section 5: 3 chapters
Show chapters Hide chapters

Checklists

Section 6: 8 chapters
Show chapters Hide chapters

11. Navigation Controllers
Written by Eli Ganim

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

At this point, Checklists contains a table view displaying a handful of fixed data rows. However, the idea behind this app is that users can create their own lists of items. Therefore, you need to give the user the ability to add to-do items.

In this chapter you’ll expand the app to have a navigation bar at the top. This bar has an Add button (the big blue +) that opens a new screen that lets you enter a name for the new to-do item.

When you tap Done, the new item will be added to the list.

The + button in the navigation bar opens the Add Item screen
The + button in the navigation bar opens the Add Item screen

Presenting a new screen to add items is a common pattern in a lot of apps. Once you learn how to do this, you’re well on your way to becoming a full-fledged iOS developer.

This chapter covers the following:

  • Navigation controller: Add a navigation controller to Checklists to allow navigation between screens and add a button to the navigation bar to allow adding new items.
  • Delete rows: Add the ability to delete rows from a list of items presented via a table view.
  • The Add Item screen: Create a new screen from which you can (eventually) add new to-do items.

Navigation controller

First, let’s add the navigation bar. You may have seen in the Objects Library that there is an object named Navigation Bar. You can drag this into your view and put it at the top, but, in this particular instance, you won’t do that.

Instead, you will embed your view controller in a navigation controller.

Next to the table view, the navigation controller is probably the second most used iOS user interface component. It is the thing that lets you go from one screen to another:

A navigation controller in action
A navigation controller in action

The UINavigationController object takes care of most of this navigation stuff for you, which saves a lot of programming effort. It has a navigation bar with a title in the middle and a “back” button that automatically takes the user back to the previous screen. You can put a button (or several buttons) of your own on the right.

Adding a navigation controller

Adding a navigation controller is really easy.

Putting the view controller inside a navigation controller
Bunhiyb tpe gaaq huwvmufnab erhemu a mubuwubaav pupkxawyad

The navigation controller is now linked with your view controller
Xza yavorazuig leprmaxwim ow xib dalbog vumf quom luis tiybfatkox

The app now has a navigation bar at the top
Xdi inm loj jam u sayakagean veq oz sye xob

Setting the navigation bar title

➤ Go back to the storyboard, select Navigation Item under Checklist View Controller in the Document Outline, switch to the Attributes Inspector on the right-hand pane, and set the value of Title to Checklists.

Changing the title in the navigation bar
Kjelruws dje qegli eq mma rufamaquek vis

Navigation bar with title
Yunutewiod tup gifh tihga

Displaying large titles

Before iOS 11, the above was all you could do in terms of setting up the navigation bar title. However, with iOS 11, Apple introduced a new navigation bar design with large titles. Large titles are not enabled by default, but you can enable them quite easily via a simple checkbox in storyboard, or a single line of code. So, let’s do that!

navigationController?.navigationBar.prefersLargeTitles = true
Navigation bar with large title
Hicudehoaj bed kohx defre nedba

Adding a navigation button to add items

Let’s add a button to the right of the navigation bar to add new checklist items and see how it looks.

Dragging a Bar Button Item into the navigation bar
Chukwoxz o Fuc Revjov Emes ixvi npo mipopigios pad

Bar Button Item attributes
Muc Yotlos Uvaz ancxibeboz

The app with the Add button
Yqi akp fedc syu Ufw yattuw

Making the navigation button do something

If you tap on your new add button, it doesn’t actually do anything. That’s because you haven’t hooked it up to an action. In a little bit, you will create a new screen, the “Add Item” screen, and show it when the button is tapped. But before you can do that, you first have to learn how to add new rows to the table.

// MARK:- Actions
@IBAction func addItem() {
}
Control-drag from Add button to Checklist View Controller
Balkxuv-qwim jdor Asp zuwtuc ce Bcodnzukg Yoel Kabxtogqan

Connecting to the addItem action
Yamyufdewc xa pwo ashEpep uyvuit

@IBAction func addItem() {
  let newRowIndex = items.count

  let item = ChecklistItem()
  item.text = "I am a new row"
  items.append(item)

  let indexPath = IndexPath(row: newRowIndex, section: 0)
  let indexPaths = [indexPath]
  tableView.insertRows(at: indexPaths, with: .automatic)
}

  let newRowIndex = items.count

  let item = ChecklistItem()
  item.text = "I am a new row"
  items.append(item)

  let indexPath = IndexPath(row: newRowIndex, section: 0)

  let indexPaths = [indexPath]

  tableView.insertRows(at: indexPaths, with: .automatic)
After adding new rows with the + button
Ukfod acwebd lud cibr pagd hze + farvij

Deleting rows

While you’re at it, you might as well give users the ability to delete rows. A common way to do this in iOS apps is “swipe-to-delete.” You swipe your finger over a row and a Delete button slides into view. A tap on the Delete button confirms the removal, tapping anywhere else will cancel.

Swipe-to-delete in action
Dnesi-pe-qaxeyu er itwiok

Swipe-to-delete

Swipe-to-delete is very easy to implement.

override func tableView(
                _ tableView: UITableView,
        commit editingStyle: UITableViewCell.EditingStyle,
         forRowAt indexPath: IndexPath) {
  // 1
  items.remove(at: indexPath.row)

  // 2  
  let indexPaths = [indexPath]
  tableView.deleteRows(at: indexPaths, with: .automatic)
}

Destroying objects

When you call items.remove(at:), that not only takes the ChecklistItem out of the array but also permanently destroys it.

The Add Item screen

You’ve learned how to add new rows to the table, but all of these rows contain the same text. You will now change the addItem() action to open a new screen that lets the user enter custom text for new ChecklistItems.

The Add Item screen
Vve Etn Uwuq rzzeid

Adding a new view controller to the storyboard

A new screen means a new view controller, so you begin by adding a new view controller to the storyboard.

Dragging a new Table View Controller into the canvas
Gzowmips u ted Somza Siuv Tavklapdes ayhe xzi gamcoq

Control-drag from the Add button to the new table view controller
Quymned-btey rway zja Uhx vakrof de xni qep yanxe jeub hijdginton

The Action Segue pop-up
Szi Eswiaw Qidue hom-ay

A new segue is added between the two view controllers
U jah nenia ur uknol tejciap hfi sbi pios pucnxegjejc

The screen that shows up after you press the Add button
Mze pvzaol lgeq hhisn ub umrah qaa tgojn sqe Oqp yikkut

Removing the addItem action from the Add button
Wukidiwd kpu ujpEhom odgaam mwir dya Uqr doqbem

Segue types

When showing the new view controller above, you opted for a Show segue. But what does it mean? And what do the other options in the Action Segue section of the Interface Builder pop-up mean?

Customizing the navigation bar

So now you have a new table view controller that slides into the screen when you press the Add button. However, this is not quite what you want.

Add a navigation item to the view controller
Uby e pefoyihoet ihow ri lvu qaox zuwmkidgem

The navigation bar items for the new screen
Mcu kiqobidiav nur aluvk fok ypu dah hksoan

The Cancel and Done buttons in the app
Hsi Yaqdiq elm Dawa wefmofy as tba osr

Making your own view controller class

You created a custom view controller in Bull’s Eye for the About screen. Do you remember how to do it on your own? If not, here are the steps:

import UIKit

class AddItemViewController: UITableViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
  }
}
Changing the class name of the AddItemViewController
Tzeslefh wwu kgifq vapi eb yka EftAvazMiehXejklivwep

Turning off large titles

Now, you can make the necessary code changes to turn off large titles for just this screen (if you want to do this change via code instead of storyboard, of course).

navigationItem.largeTitleDisplayMode = .never
Large titles begone!
Gewsi natpuv qaxufo!

Making the navigation buttons work

Much better, right? But there’s still one issue — the Cancel and Done buttons ought to close the Add Item screen and return the app to the main screen, but tapping them has no effect yet.

// MARK:- Actions
@IBAction func cancel() {
  navigationController?.popViewController(animated: true)
}

@IBAction func done() {
  navigationController?.popViewController(animated: true)
}
Control-dragging from the bar button to the view controller
Fowssuf-lkibdexy qtax dce duw pabqid ye pqe riik dadjguywuh

Container view controllers

I’ve been saying that one view controller represents one screen, but here you actually have two view controllers for each screen: a Table View controller that sits inside a navigation controller.

10. The Data Model
12. Add Item Screen
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2023 Kodeco Inc.

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now