Use UIVisualEffectView to add special effects to views

Use UIVisualEffectView to add special effects to views

After iOS 8, Apple opened up a number of interfaces for creating special effects, including an interface for creating frosted glass (blur).

Usually, if you want to create a special effect (such as blur effect), you can create a UIVisualEffectView view object, which provides a simple way to achieve complex visual effects. This object can be regarded as a container for the effect. The actual effect will affect the content under the view object, or the content added to the contentView of the view object.

Let's take an example to see how to use UIVisualEffectView:

 let bgView: UIImageView = UIImageView(image: UIImage(named: "visual" ))
 bgView.frame = self.view.bounds
 self.view.addSubview(bgView) 
 
 let blurEffect: UIBlurEffect = UIBlurEffect(style: .Light)
 let blurView: UIVisualEffectView = UIVisualEffectView(effect: blurEffect)
 blurView.frame = CGRectMake( 50.0 , 50.0 , self.view.frame.width - 100.0 , 200.0 )
 self.view.addSubview(blurView)

This code adds a UIImageView as the background image to the current view controller.

We can see that UIVisualEffectView is very simple. It should be noted that subviews should not be added directly to the UIVisualEffectView view, but should be added to the contentView of the UIVisualEffectView object.

In addition, try to avoid setting the alpha value of the UIVisualEffectView object to a value less than 1.0, because creating a semi-transparent view will cause the system to perform blending operations on the UIVisualEffectView object and all related subviews during off-screen rendering. This not only consumes CPU/GPU, but may also cause many effects to display incorrectly or not display at all.

We saw above that the method to initialize a UIVisualEffectView object is UIVisualEffectView(effect: blurEffect), which is defined as follows:

 init(effect effect: UIVisualEffect)

The parameter of this method is a UIVisualEffect object. Looking at the official documentation, we can see that in UIKit, several objects are defined specifically for creating visual effects, namely UIVisualEffect, UIBlurEffect, and UIVibrancyEffect. Their inheritance hierarchy is as follows:

 NSObject
 |--UIVisualEffect
 |--UIBlurEffect
 |--UIVibrancyEffect

UIVisualEffect is a base class for creating visual effects that inherits from NSObject. However, this class does not provide any new properties and methods other than those inherited from NSObject. Its main purpose is to initialize UIVisualEffectView, in which you can pass in UIBlurEffect or UIVibrancyEffect objects.

A UIBlurEffect object is used to apply a blur effect to the content below the UIVisualEffectView view, as shown in the example above. However, the effect of this object does not affect the content in the contentView of the UIVisualEffectView object.

UIBlurEffect mainly defines three effects, which are determined by the enumeration UIBlurEffectStyle, which is defined as follows:

 enum UIBlurEffectStyle : Int {
 case ExtraLight
 case Light
 case Dark
 }

It mainly determines the blending of the special effect view and the bottom view based on the hue.

Unlike UIBlurEffect, UIVibrancyEffect is mainly used to amplify and adjust the color of the content under the UIVisualEffectView view, while making the content in the contentView of UIVisualEffectView look more vivid. Usually the UIVibrancyEffect object is used together with UIBlurEffect, mainly used to process some display effects on the UIBlurEffect special effect. Following the above code, let's see how to add some new special effects to the blurred view, as shown in the following code:

 l et vibrancyView: UIVisualEffectView = UIVisualEffectView(effect: UIVibrancyEffect(forBlurEffect: blurEffect))
 vibrancyView.setTranslatesAutoresizingMaskIntoConstraints( false )
 blurView.contentView.addSubview(vibrancyView) 
 
 var label: UILabel = UILabel()
 label.setTranslatesAutoresizingMaskIntoConstraints( false )
 label.text = "Vibrancy Effect"  
 label.font = UIFont(name: "HelveticaNeue-Bold" , size: 30 )
 label.textAlignment = .Center
 label.textColor = UIColor.whiteColor()
 vibrancyView.contentView.addSubview(label) 
 

The vibrancy effect depends on the color value. All subviews added to contentView must implement the tintColorDidChange method and update themselves. It should be noted that when we use the UIVibrancyEffect(forBlurEffect:) method to create a UIVibrancyEffect, the parameter blurEffect must be the blurEffect we want to add the effect to, otherwise it may not be the effect we want.

In addition, UIVibrancyEffect also provides a class method notificationCenterVibrancyEffect, which is declared as follows:

class func notificationCenterVibrancyEffect() -> UIVibrancyEffect!

This method creates a vibrancy effect for the Today extension in the Notification Center.

refer to

UIVisualEffectView Class Reference

UIVisualEffect Class Reference

UIBlurEffect Class Reference

UIVibrancyEffect Class Reference UIVisualEffect – Swift Tutorial iOS 8: UIVisualEffect

Pointer is missing a nullability type specifier (nonnull or nullable) problem handling— Nullability Annotations