Blur Effect iOS Tutorial

For product name, use iOSBlurEffectTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

For this tutorial we need a image to apply the blur effect to. Download the zipfile containing the image. Open the Assets Library and drag the image into it.

Go to the Storyboard .  Drag an Image View to the Storyboard. Go to the Size Inspector and make the Height and Width 256 points.

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 Resolve Auto Layout Issues button and select Reset to Suggested 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 Action method to

@IBAction func blurImage(_ sender: Any) {
    // 1
    let darkBlur = UIBlurEffect(style: .dark)
    // 2
    let blurView = UIVisualEffectView(effect: darkBlur)
    blurView.frame = imageView.bounds
    // 3
    imageView.addSubview(blurView)
}

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