UIViewController with blur background in Swift – iOS

The blur effect is often used in Apple’s official apps. The bad news is that Apple doesn’t provide any native API in the UIViewController Class to implement the blurred background.

In fact it’s not possible to simply write something like:

so implementing this effect is a little bit complicated.

Here’s how I usually do it.

Apple Components

The good news is that the iOS SDK provides some general-purpose components that can have blur effects. These components are the UIBlurEffect and the UIVisualEffectView:

UIBlurEffect

The UIBlurEffect object applies a blurring effect to the content layered behind a UIVisualEffectView. Views added to the contentView of a UIVisualEffectView are not affected by the blur effect. (Apple doc)

UIVisualEffectView

A UIVisualEffectView object gives you an easy way to implement some complex visual effects. Depending on the desired result, the effect may affect contents layered behind the view or contents added to the visual effect view’s contentView. (Apple doc)

UIViewController with blur

 

 

Using these two components it’s possible to implement a blurred background into an UIViewController. We’ll have to work on the background view of the UIViewController and on how the UIViewController is presented.

You will need to create the blur effect using the UIBlurEffect Class in the viewDidLoad method. After that you’ll need to apply the effect to the UIVisualEffectView.

The UIVisualEffectView needs to have the container dimensions defined, and it will be the first view of the stack of the view controller.

In order to make it work, it’s necessary to modify how the UIViewController is presented by using the   modalPresentationStyle  property. That’s because we want the view we are presenting in front of the previous one.

The value of the property that you will need to use is  OverCurrentContext 

OverCurrentContext is a presentation style where the content is displayed over a view controller’s content whose definesPresentationContext property is YES. UIKit may walk up the view controller hierarchy to find a view controller that wants to define the presentation context. The views beneath the presented content are not removed from the view hierarchy when the presentation finishes. So if the presented view controller does not fill the screen with opaque content, the underlying content shows through.

UITableViewController with blur

To have the same effect on a UITableViewController we’ll need to modify a little bit the code shown above. The first thing to do is making the background of the tableView transparent. Then we need to set the blurEffectView  as the background of the UITableView:

Cell separator effect

The last step is to make the cell division line of the UITableView visible with the blurred background, to do this you have to set a specific property of the UITableView:

 

Here you can find the open source example project related to this article.

Want to see an awesome app we developed using this effect? Here you can find the App case study!

 

Category

  • Blog
  • iOS

Tecnologie utilizzate

  • Swift