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.
You will be surprise to learn that it’s not possible to simply write something like:
self.view.backgroundColor = UIColor().transparentBlur()
so implementing this effect is a little bit complicated.
Here’s how I usually do it.
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:
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)
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.
let blurEffect = UIBlurEffect(style: .ExtraLight) let blurEffectView = UIVisualEffectView(effect: blurEffect) blurEffectView.frame = self.view.frame self.view.insertSubview(blurEffectView, atIndex: 0)
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:
self.tableView.backgroundColor = UIColor.clearColor() let blurEffect = UIBlurEffect(style: .ExtraLight) let blurEffectView = UIVisualEffectView(effect: blurEffect) blurEffectView.frame = self.view.frame self.tableView.backgroundView = blurEffectView
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:
self.tableView.separatorEffect = UIVibrancyEffect(forBlurEffect: blurEffect)
Here you can find the open source example project related to this article.