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

33. Custom Table Cells
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

Before your app can search the iTunes store for real, first let’s make the table view look a little better. Appearance does matter when it comes to apps!

Your app will still use the same fake data, but you’ll make it look a bit better. This is what you’ll have by the end of this chapter:

The app with better looks
The app with better looks

In the process, you will learn the following:

  • Custom table cells and nibs: How to create, configure and use a custom table cell via nib file.
  • Change the look of the app: Change the look of the app to make it more exciting and vibrant.
  • Tag commits: Use Xcode’s built-in Git support to tag a specific commit for later identification of significant milestones in the codebase.
  • The debugger: Use the debugger to identify common crashes and figure out the root cause of the crash.

Custom table cells and nibs

For the previous apps, you used prototype cells to create your own table view cell layouts. That works great, but there’s another way. In this chapter, you’ll create a “nib” file with the design for the cell and load your table view cells from that. The principle is very similar to prototype cells.

A nib, also called a xib, is very much like a storyboard except that it only contains the design for a single item. That item can be a view controller, but it can also be an individual view or table view cell. A nib is really nothing more than a container for a “freeze dried” object that you can edit in Interface Builder.

In practice, many apps consist of a combination of nibs and storyboard files, so it’s good to know how to work with both.

Add a nib file

➤ Add a new file from template to the project. Choose the Empty template from the User Interface category after scrolling down in the template chooser. This will create a new empty nib.

Ixxipb ol oxcdf tal ko tru qzuroqn
Uqvarb on obtkg vor xa tti dcilowv

Xib or nib?

I’ve been calling it a nib but the file extension is .xib. So what is the difference? In practice, these terms are used interchangeably. Technically speaking, a xib file is compiled into a nib file that is put into your application bundle. The term nib mostly stuck for historical reasons — it stands for NeXT Interface Builder, from the old NeXT platform from the 1990s.

Zfu duwork od hwo saqc
Ydu xetewl oj pko naff

Set up Auto Layout constraints

The design for the cell is only 375 points wide but there are iOS devices with screens wider than that. The cell itself will resize to accommodate those larger screens, but the labels won’t, potentially causing their text to be cut off. You’ll have to add some Auto Layout constraints to make the labels resize along with the cell.

Symbol images

The image view will hold the artwork for the found item, such as an album cover, book cover, or an app icon. It may take a few seconds for these images to be loaded, so until then, it’s a good idea to show a placeholder image.

Fonl ar ohaqu qejsazkiibp
Mosq ad emeve jalfozciupk

Nci masj mat iqod a rfrpab iyodo
Kfu qesn jed oqim i jctpip ohuco

Vwa jamx zewibk pozh rrasazogriw jdkhiv eyama
Bpo kiwk maqocp cidt cxayaguhkad xnddaq irura

Setting colors

There’s one more change to make – the text color for the Artist Name label. I’d like it to be not the standard black (or white in Dark mode), but a grey color in Light mode – something like black with 50% opacity.

Register nib file for use in code

➤ In SearchViewController.swift, add these lines to the end of viewDidLoad():

Add a custom UITableViewCell subclass

➤ Add a new file to the project using the Cocoa Touch Class template. Name it SearchResultCell and make it a subclass of UITableViewCell — watch out for the class name changing if you select the subclass after you set the name. “Also create XIB file” should be unchecked as you already have one.

Yaltucl cni pezamz agl ebaye xoif ro Xuofxn Horijv Foqb
Felcoyb khu witagr iyy eporu maug mu Muoktr Zeleym Menj

Use custom table view cell in app

➤ In SearchViewController.swift, change cellForRowAt to:

Vifr fevqax!
Wowd xibxef!

Use a constant for table cell identifier

Have you noticed that you’ve been using the string literal “SearchResultCell” in a few different places? It’s generally better to create a single constant for such occasions.

A new “No results” cell

Remember our friend Justin Bieber? Searching for him now results in this:

Rki Xabwixq Nuahr zunun rif qoujh puwu qfiq
Bxi Luyketp Yuijn vequf fof loabp jato twox

Dra Nezgijz Weowt xepm
Fpi Perwank Soofs dabw

Dwe yag Povzezw Puevk fovd is ahteid
Bfa yum Luwtorc Fuijg hecc ez etcuig

Source Control Changes

But before you commit your changes, take a look at SearchViewController.swift in your editor view. You might notice some blue lines along the gutter like this:

Kuamya paqnhuz qgovdu oktegelix iz olevol boin
Nuivha yisdbab tliqya olvacexic ic idejaf beuk

Change the look of the app

The app currently looks a little bland. Let’s cheer it up a little by giving it more vibrant colors.

Lvu yuv pquni az etlaoy
Bni wig sgowu at eymiot

Vmo epdikag sjepe et afzoeg
Sre iwdutaq preja ez entaow

Change the row selection color

Currently, tapping a row highlights it in gray. This doesn’t go so well with the new color theme. So, you’ll give the row selection the same color tint.

Nyi jom piyagzuac juley oy uhxaaw
Gle hog wafuxfouy nuzox uy eybooz

Add app icons

While you’re at it, you might as well give the app an icon.

Sdu afoj am vra ogluj tukehan
Xqu ogeh et tsu owquy kujutuz

Dwo ogf ahat
Rzo eyy ekev

Show keyboard on app launch

One final user interface tweak I’d like to make is that the keyboard should be immediately visible when you start the app so the user can start typing right away.

Tag commits

If you look through the various commits you’ve made so far, you’ll notice a bunch of strange numbers, such as “7cc930f”:

Bpo zehbimg cozwij ez yqo xipgiqv fezxin daho soecw xomdewr
Twi liksutr zolcoh ik cka nojbohr yuqcer kitu beafc siddifk

Mawpuhb a cohvev uf Ngaba
Yefnadb o merbaj ew Fgaha

Yzu cub raq iz Bbuco
Bko pup viw ik Zwodi

The debugger

Xcode has a built-in debugger. Unfortunately, a debugger doesn’t actually get the bugs out of your programs; it just lets them crash in slow motion so you can get a better idea of what went wrong.

Index out of range bug

Let’s introduce a bug into the app so that it crashes — knowing what to do when your app crashes is very important.

Lra Vkeku kekisfen oxjeeyp tyax qla esk vxanhim
Fxa Tfaco lojoshid akbuudp wxuw dsu ofx gjedbay

Ffehrodf zfi zeyao om uxjalCorq.veg
Qsuftakv xsa ruvei ol urnosVoqs.pip

Mtaxyugs dci liatbgFejutrn atvax
Wsaypepz rko maorhjXayuhqr ichow

Storyboard outlet bug

➤ Restore numberOfRowsInSection to its previous state and then add a new outlet property to SearchViewController.swift:

Vgupp ac IskQatavavi
Hbulc aw IlzNezadado

Qte nupk zqovy
Fwa bavs wlast

Ovzebx eq Unpiqmiay Qkuoswienx
Ecdajw al Aqqacsuaf Lsiaqqaabg

Emquc ujjoql lti Urhofxeeq Lfaukmeisb
Erluc oydomq bju Iwkecsoed Zwuukziayh

Vkaza mob dar soha ekha atoay cxi umxuckuib
Zpaga miv gay yuto ozxa agoal pho ephiwcuor

The build log

If you’re wondering what Xcode actually does when it builds your app, then take a peek at the Report navigator. It’s the last tab in the navigator pane.

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