Getting blurred: Quick iOS tips for blurtastic table view cells

I just released my weather app Celsius and Fahrenheit in the app store, which was super exciting and will get a blog post of it’s own, but before that, I wanted to put down some words about a cool feature I was excited to use while building my app.

UIBlurEffect

I had illustrated a cool looking space background scene and like any reasonable person building a table view with a cool background, didn’t want all the awesomeness to disappear completely behind solid color table view cells. I tried adjusting the alpha, but it was missing some of the radiating effect I was looking for. I had seen great blurs before in the today extension or the spotlight search, but didn’t yet know how to make them my own and put them into table vies cells. In walked in UIVisualEffect and UIBlurEffect.

Here is a screen shot of a demo project I built to demonstrate some blurs. I used a background with bright colors and a spaceship to help better see the effects.

Yes. PaintCode is fun.

Using default table view cells the result is this. You can see why it needs some help. For my own amusement, I’ve chosen to populate the table view with astronauts’ names and the names of the spacecrafts they flew in. I’ve split up the rows giving each their own sections to allow for adjustment of the empty space between consecutive cells.

Now, if I simply drop a UIVisualEffectView with blur into a prototype cell content view in storyboard, I see this.

Adding the the UIVisualEffectView to the table view in storyboard only adds the blur above or below the cells.

I decided to programmatically add the visual effects view and blur effect in tableView: cellForRowAtIndexPath: method, and thought I was good to go after seeing the result.

code
result

But don’t be fooled!!! As the table view is scrolled out and into view again a new visual effect view will be added each time tableView: cellForRowAtIndexPath: gets called. Check out the bottom cell with Gherman Titov and his ship Orel (Eagle). It gets brighter and brighter!!!

We confirm this using the Debug View Hierarchy button in Xcode and can see all the added visual effects views stacked up above the bottom cell.

After a few attempts at adding logic to test if the cell had visual effect view and only add one if it didn’t, I decided to tackle this by subclassing UITableViewCell and building the UIVisualEffectView with the UIBlurEffect in code in the initialization of my custom cell.

First, I initialized the blur effect on line 19 and there are three different blurs to choose from UIBlurEffectStyleExtraLight, UIBlurEffectStyleLight, and UIBlurEffectStyleDark. With the blur effect initialized, I used the convenient initWithEffect: instancetype method for the visual effect view on line 21, set the view’s frame to the cells’s bounds on line 23 and added the subview on line 26.

Finally, I headed back to set the cell prototype class in storyboard to my custom class and run the project.

Success!

In Celsius and Fahrenheit, my weather app (available in the App Store (shameless plug!)), I used a regular view control and added a table view so that I could set a background image and the cells would move over the still background. It gave me the aesthetic I wanted, but came with some unexpected complications. I’ll add a blog post soon to show how you can quickly solve these issues when you know what to look for. Stay tuned!!!