UIVisualEffectView: Blur View and Vibrancy View

Updated 30 April 2021

Save

UIVisualEffect

There are only two kinds of UIVisualEffect- Blur, and Vibrancy. blur view is applied to, revealing the content underneath. A blur effect can be Extra Light, Light, or Dark. Vibrancy effects depend on the blur effect of the view they are added to. They are used to dynamically adjust the contrast of labels and icons, positioned on top of a blurred view, making them look sharper.

We use these effects by initializing a visual effect view and passing the effect as a parameter. UIVisualEffectView is a subclass of UIView, but in order for everything to work as expected, you should add subviews to its contentView.We can achieve this by using interface builder and also programmatically.

Step 1
Open Xcode and create a new project of single view application.

Step 2
Drag an image view on the storyboard.

imageview for visualeffect

Blur View:

Now, add blur in imageview.

After that run code, we will get the visual effect on the image.

Blurview

lets you add a “vibrancy” effect to your views – this is a translucency effect designed to ensure that text is readable when it’s over any kind of blurred background, and it’s used to create that soft glow effect you see in the notification center.

We could extend the previous example so that it adds a segmented control in the middle of the view, using a vibrancy effect.

This is accomplished by creating a second UIVisualEffectView inside the first one, this time using UIVibrancyEffect to create the glow.

Note that you need to use the same blur type for both your visual effect views, otherwise the glow effect will be incorrect.

Vibrancy view:

Now, let’s add a text label with a vibrancy effect.

Now, run the app.

Vibrancy effect

What if the user has blur disabled?

In the simulator or on your device, open the Settings app and go to Accessibility ▸ Display & Text Size, and enable Reduce Transparency.

This code checks to see if Reduce Transparency is on. If it is, ignore all the code you just wrote and go back to the original layout without any blurring.

For other blogs Please click here

author
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Start a Project


    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home