Adding Blur Effects to Views Using UIVisualEffectView - iOS, Swift

Adding blur effects to various UI components on your application is easy.

This Article Covers All Related questions  :

Adding blur effect to background in swift.
Creating a blurring overlay view.
UIVisualEffectView Tutorial: Getting Started.
Add blur and vibrancy using UIVisualEffectView.

We can achieve this using following two classes.

UIBlurEffect :

This is a class that represents a blur effect. You can initialize an instance of this class with its designated constructor and pass a value of type UIBlurEffectStyle to it. This value will then decide what type of blur effect you want to create.

UIVisualEffectView :

This is a simple UIView subclass that can accept and apply a visual effect of type UIVisualEffect. Because the UIBlurEffect class is a subclass of the UIVisualEffect, you can simply create a blur effect and pass it to your visual effect view. Once you have the visual effect view, you can add it to any other existing view that you have on or off screen.

Example project:

In this example we are going to add blur effect on imageView.

First create a new project  open Xcode -> File -> New -> Project -> Single View App, then tap next button. Type product name as 'BlurEffect' then tap next and select the folder to save project.

We are going to add UIImageView on the ViewController.

Open ViewController.swift file, then add following method for adding imageView as subview.

func addImageView() {
    let imageView = UIImageView()
    view.addSubview(imageView)
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.heightAnchor.constraint(equalToConstant: 250).isActive = true
    imageView.widthAnchor.constraint(equalToConstant: 250).isActive = true
    imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    imageView.image = UIImage(named:"flower.jpg")
    imageView.contentMode = .scaleAspectFill
    imageView.clipsToBounds = true
}

We added imageView using autoLayouts but not used storyBoards. Call addImageView() method in viewDidLoad().

Download a sample flower image for testing and name it as 'flower.jpg'.

Build and Run, we see an flower image in center of view.

What we want to do now is add a blurred view on top of this image view. As we learned before in this article, we are going to create our blur effect and then create a visual effect view on top of our current view, like so :

func addBlurView() {
    
    let blurEffect = UIBlurEffect(style: .light) // 1
    
    let blurView = UIVisualEffectView(effect: blurEffect) // 2
    
    view.addSubview(blurView)
    blurView.translatesAutoresizingMaskIntoConstraints = false
    
    blurView.heightAnchor.constraint(equalToConstant: 200).isActive = true
    blurView.widthAnchor.constraint(equalToConstant: 200).isActive = true
    blurView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    blurView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
}

Call addBlurView() method in viewDidLoad().

The UIBlurEffect class can be initialized with any of the blur styles that are specified in the UIBlurEffectStyle enumeration like so:

enum UIBlurEffectStyle : Int {

    
    case extraLight

    case light

    case dark

    
    @available(iOS 10.0, *)
    case regular // Adapts to user interface style

    @available(iOS 10.0, *)
    case prominent // Adapts to user interface style
}

1. In our example code, we used a light blur effect, but you can use any of the ones just listed.

2. Once you have your blur effect, you can add it to the UIVisualEffectView class. This class itself can accept any visual effect of type UIVisualEffect.

Another class of the aforementioned type  is  the UIVibrancyEffect.  This  class  is  very  similar  to  the UIBlurEffect class,  and  in  fact  under  the  hood  uses  a  blur  effect  as  well. UIVibrancyEffect brings out the colors on the layers that are behind it.

For instance, if you have a  popup  window  that  is  about  to  appear  on  top  of  another  view  that  contains  many colorful photos on it, it is best to add a UIVibrancyEffect to a visual effect view and construct your popup using this visual effect view.

That way, the colors underneath the popup (colors that come from the photos) will be more appealing to the user and the user will be able to get a better understanding of the content under your popup.

Build and Run, Great we see blurEffect on the image.

Download sample project with examples :