Translucent TableView in iOS 7

Make it easy and simple

Liangjun Jiang
May 2, 2014 · 2 min read

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];

Where does [UIImage applyLightEffect] come from? Oh, I have used some code from Apple WWDC2013. You can also get some other solutions from stackoverflow such here.

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:

Image credits to golfdigest.com

This is how it shows in the iPhone simulator.

You can grab the full code from github.

    Liangjun Jiang

    Written by

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade