Blur Effect iOS Tutorial

The UIVisualEffectView class can be used to apply visual effects to a view. In this tutorial a darkened blur effect will be applied to an image. This tutorial is made with Xcode 8.3.2 and built for iOS 10.3

Project Setup

Open Xcode and create a new Single View Application.

For product name, use iOS10BlurEffectTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only 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 an Image View to the Storyboard. Go to the Size Inspector and make the Height and Width 256 points.

Select the Image View and select the Auto Layout align button. Select the "Horizontally in Container" checkbox and click "Add 1 Constraint".

Select the Image View and select the Auto Layout pin button. Pin the label to the top and select the Width and Height checkboxes. Click "Add 3 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".  Select the button and Ctrl + drag to the Image View. Hold down the Ctrl button and select "Vertical Spacing" and "Center Horizontally".

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 Action method to

@IBAction func blurImage(_ sender: Any) {
    // 1
    let darkBlur = UIBlurEffect(style: UIBlurEffectStyle.dark)
    // 2
    let blurView = UIVisualEffectView(effect: darkBlur)
    blurView.frame = imageView.bounds
    // 3
    imageView.addSubview(blurView)
}
  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 iOS10BlurEffectTutorial at the ioscreator repository on Github.