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.
[caption id="attachment_1101" align="aligncenter" width="159" caption="Hidden UITableView Showing 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 theUITableView
is hidden or has a transparent background view. - On iPad make sure you clear the UITableView's
backgroundView
and set it tonil
in addition to setting the background color to[UIColor clearColor]
- Register a
UITapGestureRecognizer
with the viewController's view and then set the attributecancelsTouches
toNO
so that the touches from the gesture propagate to both theUITableView
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 theUITableView
hides or unhides.
Notes:
- I show a
UINavigationBar
, so myUITableView
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: