Understanding UIVisualEffect and UIVisualEffectView

As a developer, it’s not uncommon to come across situations where you want to add a visually appealing effect to your app’s user interface. One such effect is the blur effect, which can make certain elements or backgrounds stand out from the rest of the screen. However, implementing this effect can sometimes be tricky.

In this article, we’ll explore how to use UIVisualEffect and UIVisualEffectView in iOS development to create a blurred background.

What are UIVisualEffect and UIVisualEffectView?

UIVisualEffect is an abstraction that allows developers to add various visual effects to their app’s user interface. It provides a way to apply different types of visual effects, such as blur, shadow, or glow, to specific views or elements on the screen.

On the other hand, UIVisualEffectView is a view class that wraps around an UIVisualEffect. It allows developers to use the UIVisualEffect with ease and provides a convenient way to apply visual effects to their app’s UI components.

Creating a Blurred Background

To create a blurred background using UIVisualEffect, we need to follow these steps:

1. Create a new view controller or modify an existing one.
2. Add a main view to the view controller using self.view.
3. Create a new view with a yellow background color and set its alpha value to 0.90.
4. Add this view as a subview of the main view.
5. Create a new UIVisualEffect instance with the desired blur style (e.g., .extraLight).
6. Create a new UIVisualEffectView instance and pass the UIVisualEffect instance to its initializer.
7. Set the frame of the UIVisualEffectView to match the frame of the main view.

Here’s an example code snippet that demonstrates how to create a blurred background:

{
  # Create a new view controller
}
let backg = UIView(frame: self.view.frame)
backg.backgroundColor = UIColor.yellow
backg.alpha = 0.90

// Add the yellow background view as a subview of the main view
self.view.addSubview(backg)

// Create a new UIVisualEffect instance with the desired blur style
let blurEffect = UIBlurEffect(style: .extraLight)

// Create a new UIVisualEffectView instance and pass the UIVisualEffect instance to its initializer
let blurredEffectView = UIVisualEffectView(effect: blurEffect)

// Set the frame of the UIVisualEffectView to match the frame of the main view
blurredEffectView.frame = self.view.frame

// Add the UIVisualEffectView as a subview of the main view
self.view.addSubview(blurredEffectView)

Adding Constraints to the Blurred Background

To center the blurred background on the screen, we need to add constraints to its width and height anchors. We can do this by calling widthAnchor.constraint(equalToConstant: 250).isActive = true and heightAnchor.constraint(equalToConstant: 250).isActive = true.

Here’s an updated code snippet that demonstrates how to add constraints to the blurred background:

{
  # Create a new view controller
}
let backg = UIView(frame: self.view.frame)
backg.backgroundColor = UIColor.yellow
backg.alpha = 0.90

// Add the yellow background view as a subview of the main view
self.view.addSubview(backg)

// Set the constraints for the width and height anchors
backg.widthAnchor.constraint(equalToConstant: 250).isActive = true
backg.heightAnchor.constraint(equalToConstant: 250).isActive = true

// Create a new UIVisualEffect instance with the desired blur style
let blurEffect = UIBlurEffect(style: .extraLight)

// Create a new UIVisualEffectView instance and pass the UIVisualEffect instance to its initializer
let blurredEffectView = UIVisualEffectView(effect: blurEffect)

// Set the frame of the UIVisualEffectView to match the frame of the main view
blurredEffectView.frame = self.view.frame

// Add the UIVisualEffectView as a subview of the main view
self.view.addSubview(blurredEffectView)

Conclusion

In this article, we explored how to use UIVisualEffect and UIVisualEffectView in iOS development to create a blurred background. We created a new view controller, added a main view, and created a new view with a yellow background color. We then applied the desired blur style using UIVisualEffect and passed it to the initializer of UIVisualEffectView. Finally, we set the frame of the UIVisualEffectView to match the frame of the main view.

By following these steps, you can create a blurred background in your iOS app that stands out from the rest of the screen.

Last modified on 2023-11-23