How do I display a placeholder image when my UITableView has no data yet?

Question

Hi,

I have an application that, on load, displays a UITableView with the user's data in it.

However, when the user first loads the application (before they've created any data), I'd like to display, instead of an empty table, a background image (with an arrow pointing to the 'add a record' navbar button). Once the user has added their first record, the tableview is displayed instead. I've seen numerous apps do this - the only example I can think of at present is Cha-Ching, before you have any budgets/etc set up. I can't for the life of me work out how to do this, though.

I initially added a navigationcontroller to the main window's xib, the rootViewController of which was a custom viewcontroller/xib. This rootViewController contained the background image with a hidden tableview above it, and a custom tableviewcontroller that managed the tableview. This seemed to work just fine, and if there was data it would load and display in the table. However, if I was to scroll the data offscreen, the app would crash, with this error:

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason:
'*** -[UITextEffectsWindow tableView:cellForRowAtIndexPath:]: unrecognized selector sent to instance 0xd2d130'

I have no clue what a UITextEffectsWindow is, or why it was trying to manage my tableview. I presume something may be hooked up incorrectly in my view hierarchy...

If there's a much simpler/more straightforward way of doing this, I'd be very grateful if someone could explain it. How would you do this?

Thanks in advance.

Answer 1

Here's one solution that I've been satisfied with so far.

First, I created a transparent view that was the same size as my TableView. I add this view as a sibling of the TableView whenever the TableView's data source has no data in it. I completely remove the view when data is available because transparency can affect the smoothness of the scrolling animation with TableViews.

I simply added a transparent label to this view that says something to the effect of "No Data Available". Adding a little shadowing to this label really helped to reinforce the concept that the label was 'floating' over top of the empty TableView.

I like your method of using an image though. Done properly, it might save you some work if you don't have to localize a string like I currently do.

Answer 2

If you use Three20, you can easily set any image you want as a place holder prior to your table being populated.

Answer 3

So, to solve this I did as discussed in the comments above:

I created a normal UIViewController subclass, which contained a UIImageView and a UITableView. The viewController conforms to the UITableViewDelegate and UITableViewDatasource protocols, and looks after the tableView. The viewController class simply shows or hides the imageView depending on whether data is available.

I was going wrong before by trying to manage both these views with a UITableViewController. A UITableViewController has to have a tableView as its view, whereas, with this solution, a viewController can contain both the image and the tableView, and implement the necessary protocols to manage the tableView.

Thanks for all the help!

Answer 4

To achieve this using a UITableViewController subclass as my only view (within a UINavigationController as per the Apple template) I used the following approach:

1. Create a UIView of the size of my tableView in the XIB that contains your UITableViewController and tableView.

2. Add an ImageView set with my placeholder image to the UIView.

3. Wire up the UIView as an IBOutlet (in the example code below, I called it emptyTableView)

4. When it is time to show the placeholder from within the UITableViewController subclass :

   [self.tableView addSubView:emptyTableView]; [self.tableView setScrollEnabled:FALSE];

Disabling the scroll is necessary otherwise the user will be able to move the placeholder image up and down. Just remember to enable it once the user adds an item.

1. To remove the image view

   [emptyTableView removeFromSuperview];