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


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:

6 Comments

  1. 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. 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. @Jeffery glad to help!

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

*

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>

© 2014 Paul Solt

Theme by Anders NorenUp ↑