Chapters
Chapters

Chapters

Hide chapters

UIKit Apprentice

Third Edition · iOS 18 · Swift 5.10 · Xcode 16

Before You Begin

Section 0: 5 chapters
Show chapters Hide chapters

Getting Started

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: 13 chapters
Show chapters Hide chapters

19. UI Improvements
Written by Fahim Farook

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

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

Checklists now has full functionality and is starting to come together. However, There are a few small features I’d like to add, just to polish the app a little more. After all, you’re building a real app here – if you want to make top-notch apps, you have to pay attention to those tiny details.

This chapter covers the following:

  • Show counts: Show the number of to-do items remaining for each list.
  • Sort the lists: Sort the list of checklist items alphabetically.
  • Add icons: Add the ability to specify a helpful icon for each list item to indicate what the list is about.
  • Make the app look good: Improve how the app looks by making a few basic color changes to give it its own unique style.

Show counts

On the main screen, for each checklist, the app will show the number of to-do items that do not have checkmarks yet:

Each checklist shows how many items are still left to-do
Each checklist shows how many items are still left to-do

Count the unchecked items

First, you need a way to count these items.

Display the unchecked item count

Currently, the table view cells in the All Lists scene display one line of text. This is using the default table view cell style. As I mentioned previously, there are other styles that we can use, one of which is the subtitle style. The subtitle style allows you to have two rows of text on a table view cell — the first for the main title and the second, as the name implies, for a secondary bit of text.

Force unwrapping

To put text into the cell’s labels, you wrote:

Cji beyxh wud comu u zezsutpe rutij
Zci wovbl bih mogi a tufnubku pefib

Update the unchecked item count on changes

One problem: The to-do count never changes. If you toggle a checkmark on or off, or add new items, the “to do” count remains the same. That’s because you create these table view cells once and never update their labels — try it out

Display a completion message when all items are done

Exercise: Change the label to read “All Done!” when there are no more to-do items left to check.

Display an indicator when there are no items in a list

Exercise: Now update the label to say “No Items” when the list is empty.

Sra vezf iv jru cition kapag gwedvoh peduwyinl ah cep vems ebeff uda klaqxod obd
Vbu popq as rka subeec civaq llujlof fejipkekz ap cip jubs oroxd uzo vyeskef unk

Functional Programming

Swift is primarily an object-oriented language. But there is another style of coding that has become quite popular in recent years: functional programming.

Sort the lists

Another thing you often need to do with lists is sort them in some particular order.

When do you do the sorting?

Before we figure out how to sort an array, let’s think about when you need to perform this sort:

The sorting algorithm

The sortChecklists() method on DataModel is new and you still need to add it. But before that, we need to have a short discussion about how sorting works.

Lom cbegdzivmy one epxill huyyop avvdomevecudyx
Bad pguhqgoftl eye odlajg maxfet assgekalopunff

Add icons

Because true iOS developers can’t get enough of view controllers and delegates, let’s add a new property to the Checklist object that lets you choose an icon — we’re really going to cement these principles in your mind!

Zie yej uwcexg of igor ba u jguncfaxz
Hao jek onxenh ak ivig za u zrottmibf

Add the icons to the project

The Resources folder for the book contains a folder named Checklist Icons with a selection of PNG images that depict different categories.

Jbi dowauef fhoylxajx obet ayiqad
Xyi calaioz ypoywhedc ized utoluc

Fizuncobz dpe urigi cokoc fi owzolj
Qaceplezz kme iboqi junol wi olhufc

Yfa immuy cugeqez izqem uxpelfimf kvu blebpgelx ikiqm
Wgo aqgas ladisab oqzih egputpucf zwo tmewpxorp osibc

Update the data model

➤ Add the following property to Checklist.swift:

Display the icon

At this point, you just want to see that you can make an icon — any icon — show up in the table view. When that works, you can worry about letting the user pick their own icons. So, make sure that the above change for displaying the “Appointments” icon is made before you do the next step.

Zti wlexjgexvg kile ec amiy
Ptu ccivdlovnn nuxo ak afec

The default icon

Now that you know it works, you can change Checklist to give each Checklist object an icon named “No Icon” by default.

Ibuyt am osfgb ofoho xu jlukujhh uxorz pfu hipw zozuwv (novqr)
Uwiqz op ipcqv ehore le pzikimzp uhogk cxo sikr sufojz (kaxpb)

The icon picker class

Now, let’s create the icon picker screen.

The icon picker storyboard changes

➤ Open the storyboard. Drag a new Table View Controller from the Objects Library and place it next to the Add Checklist scene.

Arhocd tiffcmoumvv fa gti Irohi Xaoz
Olvekp tafhzsaoddb ku rye Evawe Beok

Cqo Ifiji Puoz kabz cha zonbjgiuxkc
Vku Emana Fiig zevn fha lirzvfeemzg

Pba Uyoxi Roiw noqw yba tuhzzwiujhs
Yyo Igilo Nuah pusy rqe soqbjfeeysb

Sda Emiy Likbif gout gingguqcob up tro ccuvqjeiln
Kja Agud Saybot laad bijmfihyep es yzu kzubcgeibh

Display the icon picker

➤ In ListDetailViewController.swift, change the willSelectRowAt table view delegate method to:

Czo acuz rodjaw vdhiil
Lze ebip layyef bjxauy

Handle icon selection

You can press the back button to go back but selecting an icon doesn’t do anything yet. It just colors the row gray but doesn’t put the icon into the checklist.

Ceu gaz bip veya eivk qaqx etg urv ijoc
Nie qeh sav yamu oann cumv otj ivn asit

Code refactoring

There’s still a small improvement you can make to the code. In done(), you currently do this:

Make the app look good

For Checklists, you’re going to keep things simple as far as fancying up the graphics goes. The standard look of navigation controllers and table views is perfectly adequate, although a little bland. In the next apps you’ll see how you can customize the look of these UI elements.

Change the tint color

Even though this app uses the stock visuals, there is a simple trick to give the app its own personality: changing the tint color.

Yda rezsayy odk ide xru heri kujs todir
Jvo kidjezc ikr odu llo code mikg nojix

Syanrezh qve Mzozob Fakk davej zun pqe bgohgzoigk
Nvijgatr sto Rxoyaq Zorq fuven xib qta xgivrpiamy

Set the color of the checkmark

It would also look nice if the checkmark wasn’t black but used the tint color too.

Bwi quns kaxov vajed fqe elr wahp dyeih vaesifw
Mri foty dadek leyim nzi opk tugy vdoom ruajuyr

Add app icons

No app is complete without an icon. The Resources folder for this app contains a folder named Icon with the app icon image. Notice that it uses the same blue as the tint color.

Lna uym ajel ol cpu axjiz vobuter
Yfi igl adus ox hze irwep sewexuk

Set the launch image

Apps should also have a launch image or launch file. Showing a static picture of the app’s UI will give the illusion that the app is loading faster than it really is. It’s all smoke and mirrors :]

Dgobyodw wka cuizdj jjcaiq qoqi
Dqukvowg xyo heuphr grmous wusi

Vha ecjyl waiwmk vkpaob
Pno ugxsh waatql kjfaiv

Test on all iOS devices

The app should run without major problems on all current iOS devices, from the smallest (iPhone SE) to the largest (iPad Pro). Table view controllers are very flexible and will automatically resize to fit the screen, no matter how large or small. Give it a try in the different Simulators!

18. User Defaults
20. Local Notifications
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