Add Blur Effect in iOS8 with Swift

In iOS8, the UIVisualEffectView class is introduced to apply visual effects to a view. In this tutorial a darkened blur effect will be applied to an image. This tutorial is built with iOS 8.1 and Xcode 6.1.

Open Xcode and create a new Single View Application. For product name, use IOS8SwiftBlurEffectTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Select Swift as Language and make sure iPhone is selected in Devices.

For this tutorial we need a image to apply the blur effect to. Download the zip file containing the image. Extract it and add the file to the project. Make sure you check the "Copy items if needed" checkbox.

Go to the Storyboard.  Drag a Image View to the Storyboard. Go to the Size Inspector and make the Height and Width 256 points. Select the "Resolve AutoLayout Issues" button on the bottom-right of the StoryBoard (3rd button) and select Add Missing Constraints.

Go to the Attributes Inspector and in the ImageView section choose the image file at the Image field.

Drag a Button to the Storyboard and place it below the Image View. Give the button a title of "Blur".  Again add the missing constraints.The Storyboard should look like this.

Open the Assistant Editor and make sure the ViewController.swift file is visible. Ctrl + drag from the Image View to the ViewController class and create the following Outlet.

Ctrl + drag from the Button to the ViewController class and create the following Action.

Go to the ViewController.swift file. Change the blurImage method to

@IBAction func blurImage(sender: AnyObject) {
    // 1
    var darkBlur = UIBlurEffect(style: UIBlurEffectStyle.Dark)
    // 2
    var blurView = UIVisualEffectView(effect: darkBlur)
    blurView.frame = imageView.bounds
    // 3
  1. the dark blur effect is assigned to the darkBlur variable.
  2. The VisualEffectView is created containing the darkened blur effect.
  3. the blurView is added as a subview of the Image View.

Build and Run the project, click the Blur button and the darkened blur affect will be applied to the image.

You can download the source code of the IOS8SwiftBlurEffectTutorial at the ioscreator repository on Github.