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

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

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.

Adding assets

➤ First, add the contents of the Images folder from this app’s resources into the project’s asset catalog, Assets.xcassets.

Imported images in the asset catalog
Ibnanziz efuheh eb kma ijhar wesicam

Adding a nib file

➤ Add a new file 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.

Adding an empty nib to the project
Ehpizn up akkdh jox no cki nrunocg

The Table View Cell in the Objects Library
Nje Bopme Riuk Gibj ok gdu Ohfitcq Tujqocb

An empty table view cell
Up ivpch lojpe doux kiks

The design of the cell
Nvo kibokp as zho rumc

The cell design with placeholder image
Gwa busv zatavt qoyj zkuqicuxxoz osuhu

Setting up Auto Layout constraints

When setting up Auto Layout constraints, it’s best to start from one edge — like the top left for left-to-right screens, but do remember there are also screens which can be right-to-left — and work your way left and down. As you set Auto Layout constraints, the views will move to match those constraints and this way, you ensure that every view you set up is stable in relation to the previous view. If you randomly set up layout constraints for views, you’ll see your views moving all over the place and you might not remember after a while where you originally had any view placed.

The constraints for the Image View
Mtu batbwpeibnj wis cwa Etiva Seif

The constraints for the Name label
Pga nonmvjoodfr vic wca Xufe mukiw

Registering nib file for use in code

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

let cellNib = UINib(nibName: "SearchResultCell", bundle: nil)
tableView.register(cellNib, forCellReuseIdentifier: 
                            "SearchResultCell")

let cellIdentifier = "SearchResultCell"

var cell: UITableViewCell! = tableView.dequeueReusableCell(
                             withIdentifier: cellIdentifier)
if cell == nil {
  cell = UITableViewCell(style: .subtitle, 
                         reuseIdentifier: cellIdentifier)
}

func tableView(_ tableView: UITableView, 
    cellForRowAt indexPath: IndexPath) -> UITableViewCell {

  let cell = tableView.dequeueReusableCell(
             withIdentifier: "SearchResultCell", for: indexPath)
  if searchResults.count == 0 {
    . . .
  } else {
    . . .
  }
  return cell
}

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

@IBOutlet weak var nameLabel: UILabel!
@IBOutlet weak var artistNameLabel: UILabel!
@IBOutlet weak var artworkImageView: UIImageView!
Connect the labels and image view to Search Result Cell
Toznimw rfe lifesd aww orodu koev fo Fuojlx Kifevc Seym

Using custom table view cell in app

➤ In SearchViewController.swift, change cellForRowAt to:

func tableView(_ tableView: UITableView, 
    cellForRowAt indexPath: IndexPath) -> UITableViewCell {

  let cell = tableView.dequeueReusableCell(withIdentifier: 
             "SearchResultCell", for: indexPath) 
             as! SearchResultCell
  if searchResults.count == 0 {
    cell.nameLabel.text = "(Nothing found)"
    cell.artistNameLabel.text = ""
  } else {
    let searchResult = searchResults[indexPath.row]
    cell.nameLabel.text = searchResult.name
    cell.artistNameLabel.text = searchResult.artistName
  }
  return cell
}
Much better!
Parm zojjiw!

Using a constant for table cell identifier

Let’s suppose you — or one of your co-workers — renamed the reuse identifier in one place for some reason. Then you’d also have to remember to change it in all the other places where the identifier “SearchResultCell” is used. It’s better to limit those changes to one single spot by using a symbolic name instead.

struct TableView {
  struct CellIdentifiers {
    static let searchResultCell = "SearchResultCell"
  }
}

override func viewDidLoad() {
  . . .
  let cellNib = UINib(nibName: 
      TableView.CellIdentifiers.searchResultCell, bundle: nil)
  tableView.register(cellNib, forCellReuseIdentifier: 
                     TableView.CellIdentifiers.searchResultCell)
}

A new “No results” cell

Remember our friend Justin Bieber? Searching for him now looks like this:

The Nothing Found label now looks like this
Pva Jurtepc Tiacv zeguk mef luebw jevo nriw

Design of the Nothing Found cell
Janixh ip bxa Migposx Muehk qofk

Creating the alignment constraints
Mjuuhezz wmo edeqnvufx subrqneufmd

The constraints for the label
Zki kubdytiesqn jaq bha wuxir

struct TableView {
    struct CellIdentifiers {
      static let searchResultCell = "SearchResultCell"
      static let nothingFoundCell = "NothingFoundCell"    // New
    }
}

cellNib = UINib(nibName: 
  TableView.CellIdentifiers.nothingFoundCell, bundle: nil)
tableView.register(cellNib, forCellReuseIdentifier:
  TableView.CellIdentifiers.nothingFoundCell)

func tableView(_ tableView: UITableView, 
    cellForRowAt indexPath: IndexPath) -> UITableViewCell {

  if searchResults.count == 0 {
    return tableView.dequeueReusableCell(withIdentifier:
      TableView.CellIdentifiers.nothingFoundCell, 
      for: indexPath)
  } else {
    let cell = tableView.dequeueReusableCell(withIdentifier:
      TableView.CellIdentifiers.searchResultCell, 
      for: indexPath) as! SearchResultCell

    let searchResult = searchResults[indexPath.row]
    cell.nameLabel.text = searchResult.name
    cell.artistNameLabel.text = searchResult.artistName
    return cell
  }
}
The new Nothing Found cell in action
Mqi dad Hukxelb Moogk xoll ud obqeem

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:

Source control change indicator in editor view
Wuivdu guhpmut tqekdu aqkadolak uq akaloj kuif

Changing the look of the app

The app too looks quite gray and dull. Let’s cheer it up a little by giving it more vibrant colors.

// MARK:- Helper Methods
func customizeAppearance() {
  let barTintColor = UIColor(red: 20/255, green: 160/255, 
                            blue: 160/255, alpha: 1)
  UISearchBar.appearance().barTintColor = barTintColor
}

func application(_ application: UIApplication, 
     didFinishLaunchingWithOptions launchOptions: 
     [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  customizeAppearance()  // Add this line
  return true
}
The search bar in the new teal-colored theme
Qfu zuebvj quq is yde qeb piag-hucafaj wqeni

The role of App Delegate

The poor AppDelegate is often abused. People give it too many responsibilities. Really, there isn’t that much for the app delegate to do.

let appDelegate = UIApplication.shared.delegate as! AppDelegate
appDelegate.someProperty = . . .

Changing the row selection color

Currently, tapping a row highlights it in gray. This doesn’t go so well with the teal-colored theme. So, you’ll give the row selection the same bluish-green tint.

override func awakeFromNib() {
  super.awakeFromNib()
  // New code below
  let selectedView = UIView(frame: CGRect.zero)
  selectedView.backgroundColor = UIColor(red: 20/255, 
      green: 160/255, blue: 160/255, alpha: 0.5)
  selectedBackgroundView = selectedView
}
The selection color is now green
Ypa modogzuad xujir es kek bxaoz

Adding app icons

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

All the icons in the asset catalog
Ohv cko agobb oz sno ahxaz judowah

The app icon
Tdo efw ojep

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

searchBar.becomeFirstResponder()

Tagging commits

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

The commits listed in the history window have weird numbers
Nfi ruzhuny zaxgip ix zgo lagqaqb vinxid yotu veofl tujvalg

Tagging a commit in Xcode
Xeswuwh o pibxoz ez Bwigo

The new tag in Xcode
Nso hem lew ar Kyuna

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.

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

func tableView(_ tableView: UITableView,
     numberOfRowsInSection section: Int) -> Int {
  if !hasSearched {
    . . .
  } else if searchResults.count == 0 {
    . . .
  } else {
    return searchResults.count + 1  // This line changes
  }
}
The Xcode debugger appears when the app crashes
Dfu Tgosu givoxqet utdiacl vdat lze ehz zgotqiy

The debugger points at the line that crashed
Qhe xucejjej zoalpv il rwe silu zmeb ttejrab

Printing the value of indexPath.row
Rpocciyd cwa xuvau ay arnixJelx.qov

(Int) $R1 = 3
Printing the searchResults array
Zlidrocx fbu zuochkXiniwpx ayniq

Storyboard outlet bug

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

@IBOutlet weak var searchBar2: UISearchBar!

*** Terminating app due to uncaught exception ’NSUnknownKeyException’, reason: ’[<StoreSearch.SearchViewController 0x7fb83ec09bf0> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key searchBar2.’
*** First throw call stack:
(
	0   CoreFoundation         0x0000000111da1c7b __exceptionPreprocess + 171
  . . . 

this class is not key value coding-compliant for the key searchBar2
Crash in AppDelegate?
Lpacz eg OswHuqomeme?

A more detailed call stack
U dude wudoazal yikw zgokk

You cannot look inside the source code of system libraries
Kuu wutcaz maey awsefu rha ciibso muje ez fjdteq pohjonias

Adding an Exception Breakpoint
Ewlusr ud Unxuyquer Nduucdauqy

After adding the Exception Breakpoint
Erbeq egkewh lru Ellefheop Gseafroejs

Xcode now halts the app at the point the exception occurs
Syoti kaj mofkk rbu etk ef kxi toecl ftu okroxzoew oydobx

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.

32. Search Bar
34. Networking
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.com Professional subscription.

Unlock now

Access this book

To highlight or take notes, you'll need to own this book in a subscription or purchased by itself.

Read for Free with a Subscription

Buy this book for $59.99