Transparent UITableView with Custom Background UIView and Tap Gestures

In order to create a custom background for a transparent UITableView you'll need to do a few things. I've got the basic code below after a lot of tinkering. I've also included how to make it so you can hide the UITableView when you tap in the transparent areas below the rows using a UITapGestureRecognizer. In the images below you can see the custom view in action.

UITableView with custom backgroundView
UITableView with Custom Background

[caption id="attachment_1101" align="aligncenter" width="159" caption="Hidden UITableView Showing Custom Background"]Hidden UITableView with Custom Background[/caption]

Key Points:

  • Don't subclass UITableView, instead use it as a instance variable in your own custom UIViewController subclass.
  • Create a custom UIView subclass to use as the background view, this will be visible when the UITableView is hidden or has a transparent background view.
  • On iPad make sure you clear the UITableView's backgroundView and set it to nil in addition to setting the background color to[UIColor clearColor]
  • Register a UITapGestureRecognizer with the viewController's view and then set the attribute cancelsTouches to NO so that the touches from the gesture propagate to both the UITableView and the custom background view.
  • In the -(void)handleTapGesture: method you'll want to send taps that don't touch a row to toggle the UI so that the UITableView hides or unhides.

Notes:

  • I show a UINavigationBar, so my UITableView frame needs to take into account the size of the navigation bar.
  • Set the UILabel's or custom views backgroundColor in the table's cells to have [UIColor clearColor] so that they animate and fade correctly.

See the sample code below: