Translucent TableView in iOS 7
Make it easy and simple
Everyday I spend a few minutes on looking at the features apps in App Store. It probably has been a while that a blur image as the background across the whole apps draw my attention. There are some examples such as Breeze, You&Me — Messaging for Couples, etc.
I love this pattern. It looks wonderful, and the well-chosen image makes an app colorful and dynamic.
I am wondering how I could implement this if I want this pattern in my application. A few days ago, I sit down and gave it a shot. This is probably an easy task. We set the background image as a blurred one, we set the foreground UI Controls with transparent background colors. We are set to go.
Personally, I like TableView. I like most about the TableView is that it helps present structured content so easily which quite fits how I look at things. And there is also so much room the we can custom the tableviewcell as we wish.
To my knowledge, the view hierarchy around tableview is not so straight-forward. Let’s say for a plain-style UITableView, we want to achieve the goal of a blur image background across the whole app, including navigation bar, how can we do?
Taking advantage of UIAppearance is my solution.
UILabel *headerLabelAppearance = [UILabel appearanceWhenContainedIn:[UITableViewHeaderFooterView class], nil]; [headerLabelAppearance setBackgroundColor:[UIColor clearColor]]; UITableViewCell *tableViewCellAppearance = [UITableViewCell appearanceWhenContainedIn:[UITableView class], nil]; [tableViewCellAppearance setBackgroundColor:[UIColor clearColor]]; UIView *contentViewAppearance = [UIView appearanceWhenContainedIn:[UITableViewCell class], nil]; [contentViewAppearance setBackgroundColor:[UIColor clearColor]]; [[UITableView appearance] setBackgroundColor:[UIColor clearColor]];// [[UITableView appearance] setBackgroundView:[[UIImageView alloc] initWithImage:[[UIImage imageNamed:@”Baby.png”] applyLightEffect]]]; [[UITableView appearance] setBackgroundView:[[UIImageView alloc] initWithImage:[[UIImage imageNamed:@”golf.jpeg”] applyLightEffect]]]; [[UINavigationBar appearance] setBackgroundColor:[UIColor clearColor]]; [[UINavigationBar appearance] setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
Just a few lines code, put it into AppDelegate, now I can set ONLY the blur background image of UITableview. A sample image like this:
This is how it shows in the iPhone simulator.
You can grab the full code from github.