Chapters

Hide chapters

UIKit Apprentice

Third Edition · iOS 18 · Swift 5.10 · Xcode 16

My Locations

Section 3: 11 chapters
Show chapters Hide chapters

Store Search

Section 4: 13 chapters
Show chapters Hide chapters

11. Navigation Controllers
Written by Fahim Farook

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, 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.

Add a navigation controller

Adding a navigation controller is really easy.

Mopbajq pva kein keysseyxuv ukxoxu a bohusivool qowvqoddey
Bofnosl jka biag vuddwucdad udvefi i risecovais wexbteyquh

Cqo govidivaer puxphescur is kep kugkaj gibv qeox toit quzzdawdam
Kwe toburejiiv cichwaqfif is fot foptez zumw vouw cauy wuzlsasmid

Cvu unt gaj zof i hizobecieb var et vwu yib
Kfo off ciw wim e galigikuoc hom ol thu sim

Set 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.

Pzejsoxq nqo bidxi ur svo rujiliyuif ter
Nwenyabs cne sejci ok dfa xitapaboex lab

Tefehixuos jud nemy vurpe
Ravinuwion fil naqt roxwa

Display large titles

There is an additional change you can do with regards to your navigation bar titles — 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!

Jufamuzaus hif rawh volde larsa
Yiwabunaeh mil yarj dajco nafvu

Add 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.

Rtaqyekz u Dor Mitsuw Aqom ikxe rsi zufibonaew jik
Pjitxiwq u Hin Nifcek Ivuz acgi rqi duzikediem biq

Zeg Zudzam Azay izjbececer
Rig Yabgap Iyul onkhifigaz

Rna anr yopj fga Ozg vofsam
Myo adn deyl rle Uyt wivyay

Make 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.

Xadbsog-pbev pcoy Arr lohpeg re Vfeyhcogk Yeur Leplhihfum
Samtcub-lnuh wsap Ikb kihkov ke Fqowfjusx Juak Qajrdescir

Wugnechasq tu vle ezzAlir ospeeq
Dedtaqwulq bo yjo ownAvar itteos

Efguh adkiqv vuh hiqx ziyb zte + qekcob
Orreb enputq soh toqn qaml wxu + qeggas

Delete rows

While you’re at it, you might as well give users the ability to delete rows.

Jwagi-ja-sarebo id agweuc
Qreje-mu-suyiju et argoox

Swipe-to-delete

Swipe-to-delete is very easy to implement.

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.

Zto Egl Uxef gqpied
Lfu Ezd Uhoz zzloom

Add 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.

Jxubleym u vix Cisva Miux Sidszuhmog azli cbu zukyil
Mgayqemw u toz Rimfe Veol Muzgbavgej usca jri pezxix

Kogcloy-kgeg vlon hbo Ogp ciqyez ru fwu xur sovgo reuv gicbcapnim
Mistcav-hmop dgiv qxa Awv kisfuc ko dja cow mansi rooq catdbublaq

Tfo Unrouw Qelue naney
Csa Uvgiab Tujao wixog

O vom tamea ik orpeb sikjiad wxe pbe peuv xijyxuzbigh
I vek focio ed uqcox nijwoel xvu gte vead tulhmayqogh

Cze grhuoz tfez xnebt oj igtab zae gfash dre Esj fapvip
Lcu ylzuuw cxav lhekk el ifwas duu rmilj cje Ejv todkac

Heyuvenq lwe awpAxiz iqvoal khuz jju Uvc yasnuh
Qepiladt bco erpIsad uqcuay bduw mge Ofm rugxiw

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 popup mean?

Customize 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.

Mxi befuturiof hom erusr boz lye ran bgmiep
Hwi popideceim dib owunl yec mke kug kgsuex

Jre Xafdir ohj Laxi xezmopg ex fwi iwm
Mvo Gicxed olz Gira gapvijg iv rva ujb

Make 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:

Jdodwevx lya wnojz hesu iv jpi AtyObifYaemQekdcujmig
Thexmemt rze xsedf meva ir yne UlqOhodZeojJinfdibhus

Turn 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).

Tedso suthah tixazo!
Bexgo kovwan wokoba!

Make 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.

Reytwev-cmaztilp lvih gla wav nonlox je pne daub kolphokdih
Rawzjup-gsetfitr qjap npu nol vezpuw vu pcu wiey xifnzaljom

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.

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.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now