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


Hidden UITableView with Custom Background

Hidden UITableView Showing Custom Background

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:

Tagged with:
 

6 Responses to Transparent UITableView with Custom Background UIView and Tap Gestures

  1. David DelMonte says:

    If you select one of your cells, I presume that would take the app to a detailView. Does the custom background also show in these subViews?

    Thanks

  2. Paul Solt says:

    I actually move to a new view when you press one of the cells. Checkout my app, Artwork Evolution, on the App Store.

    I experimented with transparency to make my opening screen more interesting and interactive.

    The downsides are that it’s not recommended since it uses a lot of transparency, which can lead to sluggish app responses.

  3. This led me out of a dark corner, thanks!

  4. Paul Solt says:

    @Jeffery glad to help!

  5. Calvin says:

    Curious as to the reason for calling [super loadView] when the documentation for loadView specifically says not to?

    “Your custom implementation of this method should not call super.” – Apple documentation

  6. Paul Solt says:

    Hi Calvin,

    Good point. The reason was that loadView would create the default self.view, otherwise it crashed. The fix is to change it to the code:

    // [super loadView]; // remove loadView call and create a view for the current main screen with resizing masks

    UIView *myView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].applicationFrame];
    myView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth;

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>