Even if you’re not familiar with the term, you’ve probably run into empty states before in apps you’ve used:

It’s a nice little detail that accomplishes two goals:

1. It’s a nice little detail that tells your users you care about the nice little things.
2. It’s a nice little detail that tells your users that they don’t have to spend five minutes waiting for a screen to load because there’s just nothing there.

I wanted to implement this in Barback for the edge case that a user had no active favorites. StackOverflow yielded a bunch of different results, most of them revolving around throwing another UIView together in Interface Builder and doing a bunch of gross conditionals to toggle off its hidden attribute.

I thought that was sort of gross and, more importantly, I am a lazy person. Thankfully, I found a tidy little solution: the backgroundView attribute of any good old-fashioned UITableView.

All you have to do is throw something looking like the bottom into your viewDidAppear ¹:

    // Load empty state view if necessary.
    if tableView(tableView, numberOfRowsInSection: 1) == 0 {
        let emptyStateLabel = UILabel(frame: tableView.frame)
        emptyStateLabel.text = "When you mark a recipe as a favorite, it'll show up here."

        // style it as necessary

        tableView.backgroundView = emptyStateLabel
    } else {
        tableView.backgroundView = nil
    }

And now you get something like this!

Hope this helped! And, if you’d excuse me, I’m off to fix the three animation issues revealed by recording that gif. ²

---

1. I put this in viewDidAppear because the number of rows in this particular table can only change within a separate view controller. If that’s not true, you’ll need to place it in a more appropriate location – ideally its own separate function. ^[return]
2. This is the part where I grumble about animation delays in UIKit, but that’s a much longer and much more unpleasant post. ^[return]

Liked this post? Follow me!

Twitter • RSS • Email