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 Background
[caption id="attachment_1101" align="aligncenter" width="159" caption="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
UIViewsubclass to use as the background view, this will be visible when theUITableViewis hidden or has a transparent background view. - On iPad make sure you clear the UITableView's
backgroundViewand set it tonilin addition to setting the background color to[UIColor clearColor] - Register a
UITapGestureRecognizerwith the viewController's view and then set the attributecancelsTouchestoNOso that the touches from the gesture propagate to both theUITableViewand 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 theUITableViewhides or unhides.
Notes:
- I show a
UINavigationBar, so myUITableViewframe 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:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * The MIT License | |
| * | |
| * Copyright (c) 2011 Paul Solt, PaulSolt@gmail.com | |
| * | |
| * Permission is hereby granted, free of charge, to any person obtaining a copy | |
| * of this software and associated documentation files (the "Software"), to deal | |
| * in the Software without restriction, including without limitation the rights | |
| * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| * copies of the Software, and to permit persons to whom the Software is | |
| * furnished to do so, subject to the following conditions: | |
| * | |
| * The above copyright notice and this permission notice shall be included in | |
| * all copies or substantial portions of the Software. | |
| * | |
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
| * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
| * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |
| * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
| * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |
| * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | |
| * THE SOFTWARE. | |
| * | |
| */ | |
| #import <UIKit/UIKit.h> | |
| @interface MyTransparentTableViewController : UIViewController <UITableViewDataSource, UITableViewDelegate> { | |
| CustomView *backgroundView; | |
| UITableView *tableView; | |
| } | |
| @property (nonatomic, retain) PolaroidView *backgroundView; | |
| @property (nonatomic, retain) UITableView *tableView; | |
| - (void)handleTapGesture:(UITapGestureRecognizer *)tapGesture; | |
| - (void)toggleGUI:(id)sender; | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * The MIT License | |
| * | |
| * Copyright (c) 2011 Paul Solt, PaulSolt@gmail.com | |
| * | |
| * Permission is hereby granted, free of charge, to any person obtaining a copy | |
| * of this software and associated documentation files (the "Software"), to deal | |
| * in the Software without restriction, including without limitation the rights | |
| * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| * copies of the Software, and to permit persons to whom the Software is | |
| * furnished to do so, subject to the following conditions: | |
| * | |
| * The above copyright notice and this permission notice shall be included in | |
| * all copies or substantial portions of the Software. | |
| * | |
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
| * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
| * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |
| * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
| * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |
| * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | |
| * THE SOFTWARE. | |
| * | |
| */ | |
| #import "MyTransparentTableViewController.h" | |
| @implementation MyTransparentTableViewController | |
| @synthesize backgroundView, tableView; | |
| -(void)loadView { | |
| self.view = [[UIView alloc] initWithFrame:[UIScreen mainScreen].applicationFrame]; | |
| self.view.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleWidth; | |
| backgroundView = [[CustomView alloc] initWithFrame:self.view.bounds]; | |
| [self.view addSubview:backgroundView]; | |
| CGRect tableBounds = self.view.bounds; | |
| // Note: Need to lower the content below the UINavigationbar if it's present | |
| tableBounds.origin.y = self.navigationController.navigationBar.frame.size.height ; | |
| tableBounds.size.height -= tableBounds.origin.y; | |
| self.tableView = [[UITableView alloc] initWithFrame:tableBounds style:UITableViewStyleGrouped]; | |
| // Make the tableview transparent to see the background | |
| [self.tableView setBackgroundColor:[UIColor clearColor]]; | |
| tableView.backgroundView = nil; // Must clear on iPad to get it to be transparent | |
| [self.view addSubview:self.tableView]; | |
| self.tableView.delegate = self; | |
| self.tableView.dataSource = self; | |
| UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)]; | |
| tapGesture.numberOfTapsRequired = 1; | |
| tapGesture.cancelsTouchesInView = NO; // Must pass through the tap to the UITableView, otherwise we can't touch the rows | |
| [self.view addGestureRecognizer:tapGesture]; | |
| [tapGesture release]; | |
| } | |
| - (void)handleTapGesture:(UITapGestureRecognizer *)tapGesture { | |
| CGPoint location = [tapGesture locationInView:self.tableView]; | |
| if([tableView indexPathForRowAtPoint:location] && [tableView alpha] != 0) { | |
| // Do nothing, tap handled by the UITableView delegate method or the custom background uiview | |
| } else { | |
| // Inside | |
| [self toggleGUI:nil]; | |
| } | |
| } | |
| // Hide show the tableview | |
| - (void)toggleGUI:(id)sender { | |
| if(self.tableView.alpha == 1) { | |
| [UIView beginAnimations:nil context:nil]; | |
| [UIView setAnimationDuration:.5]; | |
| [self.tableView setAlpha:0.0]; | |
| [UIView commitAnimations]; | |
| } else { | |
| [UIView beginAnimations:nil context:nil]; | |
| [UIView setAnimationDuration:.5]; | |
| [self.tableView setAlpha:1.0]; | |
| [UIView commitAnimations]; | |
| } | |
| } | |
| // Clean up | |
| - (void)viewDidUnload { | |
| [tableView setDelegate:nil]; | |
| [tableView setDataSource:nil]; | |
| [tableView release]; | |
| tableView = nil; | |
| [backgroundView release]; | |
| backgroundView = nil; | |
| [super viewDidUnload]; | |
| } | |
| - (void)dealloc { | |
| [tableView setDelegate:nil]; | |
| [tableView setDataSource:nil]; | |
| [tableView release]; | |
| [backgroundView release]; | |
| [super dealloc]; | |
| } |