A guide to using blur-effects on iOS April 11, 2019

Image for A guide to using blur-effects on iOS

A blur-effect is when visuals or in this case an image loses its focus and the definition gets lost. When turning my designs into reality, I stumbled upon the fact that you can’t use a blur visual image over another image. I’m talking about one specific design : 

As you can see in my design from Sketch, I used a background blur effect on each image in my cells as an overlay. This to make the text clear on every image. The background blur was also meant to add some darkness to the image, so the white text will always be readable even when the image is white. When further analyzing this view, there is also a problem that we want this blur as a trapezoid and not as a rectangle.

This means we will have to custom draw the trapezium and we cannot use the standard frame of a UIView we have set in the xib/storyboard. 

Adding a UIBlurEffect on top of the UIImageView

For this, we will still use a standard UIView as the frame for our UIVisualEffectview. 

 

So we first clear our standard blurImageView if the accessibility feature isn’t turned on. Then we just need to create a UIBlurEffect and use it as the base of our UIVisualEffectView. After we set the frame of our effectView and add it to the contentView of our cell and that’s about it. 

When looking at the result, we can say it looks pretty bad.
But now we know how to add a blur-effect as an overlay on a UIImageView, but this looks nowhere near the gaussian-blur effect from Sketch.
We can adjust the alpha of our UIVisualEffectView but this still doesn’t give the effect we initially wanted.

 

 

 

 

Adding a Gaussian blur on top of the UIImageView

Gaussian blur is a type of image filter used to blur an object by making use of the Gaussian function.

 

To have a Gaussian blur filter on an image you can use CIFilter which is a part of CoreImage. This puts the filter itself on an image, so it’s different from an overlay. 

To make our design happen we need to add a copy of our image above the base image and make a mask out of it. For the dark effect, we just add a view over the blurView with the desired color and opacity and use the same mask on it. Please keep in mind that the .toHomeScreenTrapezoid() method will get explained later in this tutorial. The problem with using Gaussian blur is that it requires a lot of processing power. This is not a problem when using it for a still image, but it is when you want to use it in a UICollectionViewCell. This is why I looked into a more performant option. On a new device this doesn’t seem a problem, but on Simulator or older devices, it is.

 

Our Solution

You can also use third party libraries to apply blur effects to an image. Most of them are GPU-accelerated which makes scrolling through the UICollectionView smoother.

I used the library SwiftImageEffects from Antoine Cœur. It’s a small library which you can use to apply blur and tint effects to an image. It’s available through Cocoapods by adding the following line to your podfile.

If everything is configured well after installing the pod, the method from the library we’re going to use is:

After applying the method to our image it will return a blurred UIImage we can place in our blurView. We will again set the blurred UIImage in our blurView and apply the mask to it.

You can see that it looks almost the same but with the last method we have a huge performance benefit. This is why I have chosen to use a library instead of the CIGaussionBlur.

Making the overlay a trapezoid

The results we have shown used the method .toHomeScreenTrapezoid. Without this method the overlay would just get set in the UIView and it would be square, just like in the example with UIBlurEffects. To get the trapezoid effect on a view we make use of masking. To be able to use this on every UIView, we write an extension on UIView.

Masking in iOS is essentially defining which part of the UIView will be shown and which part won’t.

 

The code looks as follows:

Creating a mask isn’t that difficult. We first need to create a Layer, then we make a new path which will describe the figure of the mask. After making the path of our trapezoid we set the path of our layer to the path we just created.
Last but not least, we set the mask of the layer from the UIView to the layer we created and we have our Trapezoid UIView.

Blog post by Brent Van Vosselen ©