Blur an UIView & how to use them in Extension in Swift

Photo by Kevin Ku on Unsplash

To get an easy blue effect all we have to do is get an instance of UIBlurEffect and assign it to an instance of UIVisualEffectView as the effect. Then we just add the instance of UIVisualEffectView as a subview to our UIView or UIImageView.

This tutorial is made with Xcode 10.2 and built for iOS 12.The below GIF image will show the demo of how blur works.

Above image shows how Blur effect will affect the UIImageView

Let the coding begin..!
First we need to design the above image and actions button to add blur effect to UIImageView

The below image shows the storyboard design using AutoLayout. This is a simple designing screen where UIImageView and two button is designed to add and remove blur effect from UIImageView.

StoryBoard Designing in AutoLayout

there are only two IBActio and nthree IBOutlets in this project.In ViewController.swift file:

File → ViewController.Swift

import UIKit
class ViewController: UIViewController {

@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var buttonAddBlur: UIButton!
@IBOutlet weak var buttonRemoveBlur: UIButton!

override func viewDidLoad() {
super.viewDidLoad()
}

//Function will call when Add Blur Effect button is Pressed
@IBAction func addBlurEffect(_ sender: UIButton) {
}

//Function will call when Remove Blur Effect button is Pressed
@IBAction func removeBlurEffect(_ sender: UIButton) {
}
}

The above code is basic setup in ViewController.swift File before adding blur to imageView.

File → UIView+Extension.Swift

Before implement blur actions in ViewController,we are going to implement blur logic in new UIView+Extension.swift file for better undestanding and easy implementation.

UIView+Extension file which implements bluring an UIView or UIImageView

• First we are going to implement addBlurToView() and removeBlurFromView() under UIView extension.By implementing this function we can access easily through our whole projects and for better understanding of how to use extension.

addBlurToView()

• Initialize blurEffect as UIBlurEffect and different bluring style to blurEffect.
• There are some bluring style not available for previous iOS releases,so we need to handle them properly.
• Add blurEffect to UIVisualEffectView and set the frame size of whichever UIView we will use them.
• Alpha makes the width of the blur which is to applied to the UIView.The more the alpha,more the blur of the UIView.
• We make the autoresizingMask as FlexibleWidth and FlexibleHeight and the blurEffectView to the subView of the UIView which we want to Blur.

removeBlurFromView()

• When calling removeBlurFromView ,first we check how many subviews the blurred view have.
• Remove all subview which has UIVisualEffectView by using removeFromSuperview() method.

Back to ViewController.Swift

The below image will show complete code of ViewController.Swift and how blur View is implemented.

Complete Code of ViewController.Swift which implements blur an UIImageView.

addBlurEffect(_ sender: UIButton)

• We just used imageView.addBlurToView() line to add blur to imageView.
• We implemented addBlurToView() in UIView’s Extension which can be used by any view to add bluring to either UIView or UIImageView
• I just make remove blur button visible in Line:25.

removeBlurEffect(_ sender: UIButton)

• In here , also we just used imageView.removeBlurFromView() line to remove blur from imageView.
• We implemented removeBlurFromView() in UIView’s Extension which can be used by any view to remove blur from either UIView or UIImageView.
• In next line I hide the remove Blur button after action is called in Line:31 and make Add blur button Visible to add blur to UIViews in Line:32.

Wrapup

In this article, we learned how to add and remove blur from a UIView or UIImageView and how to access these methods easily by implementing them in extension.Thanks for reading :)

Let’s connect!

You can find me on Twitter | LinkedIn | GitHub