preface

Recently feel oneself always study network related, a little “fatigue”. So for a change today, try translating the blog of a foreign god. There is a bad place also please give advice!

The original link: www.raywenderlich.com/178486/uivi…

The body of the

Let’s take a look at how Apple uses the system.

The control center is a notable example. The fuzzy background provides the environment for the control center to operate – although the control center does not belong to a particular APP, it is shown above the active apps.

This effect is also used in the notification center, but instead of blurring the entire background, each extension or notification has its own blurring background. This not only looks pretty, but makes every element stand out.

So how do you reproduce these effects in your own APP? That’s right, using the UIVisualEffectView built into iOS! In this article, you’ll learn everything you can about using “blur effects” to make your APP stand out.

Facts you need to know about the blur effect

How to use gracefully and efficiently requires certain skills. Here you’ll see the general algorithm used for the blur effect.

How do blur effects work

All blur effects start with an image. To achieve this effect, you will need to apply a blurring algorithm to each pixel of the image to get a uniform copy of the blur. Different kinds of blur algorithms are very different and complex. Here we only discuss one commonly used Gaussian blur.

Typically, a blur algorithm generates a new color value for a pixel based on the pixels around it. Consider the following grid image:

Each grid cell above represents an individual pixel, and each pixel has a number between 1 and 10. When the fuzzy algorithm calculates the new value corresponding to the middle pixel, it will take the average value of the surrounding digits to fill it in. We get the following result:

You can do this for every pixel of the original image. The above procedure simply takes one pixel in each direction around a pixel and calculates the new value. You can increase the blur by enlarging the blur radius (the number of pixels outside the middle pixel in the above case). Here’s an example:

Note: In general, a larger blur radius means more resources are needed to process images, and iOS often offloads image processing to the GPU to keep the main thread open.

Fuzzy effect design strategy

People tend to focus on the elements that are clear rather than the ones that are not. Believe it or not, this is what our eyes do. The eye focuses as the object gets closer or farther away, Focusing on an object as it moves closer or further away from the eye is known as accommodation He helps you see the depth and distance of things around you.

APP designers have taken advantage of this fact, obscuring the less important elements on the screen so that people’s implementations remain on the clear ones. Here is an example, a screenshot from the Twitter client:

In the image above, the user interface behind it is almost indistinguishable, providing an environment for the user to identify which hierarchy they are in. For example, you may realize that once you select one of the listed accounts, you are returned to the view with the blurred effect behind it.

Note: Avoid overusing blur effects in your APP. Even if blur provides a nice look, it can be annoying if you use it incorrectly or too often. Follow the design standards and use blur directly to draw the user’s attention, so you’ll almost never fail. For more information, see the Designing for iOS section of the Apple Developer Center’s iOS Human Interface Guidelines Document.

start

To learn how to implement blur effects, you’ll need to add some to your GrimmAPP.

The APP shows users many fairy tales. When the user clicks on one, the APP reveals the entire story on the screen. Users can customize the font displayed, the way the text works on it, or the color theme (day or night).

You can download this project to start by opening Grimm. Xcodeproj. Click main.storyboard and you’ll see the following view:

You can ignore the original controller, which is the root navigation controller of your APP. Click on the numbered controllers one by one and you’ll see something like this:

  • The first controller is thetaStoryListController, which is a list of all the stories in the database.
  • Click on a story in the list and it will come toStoryViewControllerIt shows the title and details of the click story.
  • OptionsControllerIs included in theStoryViewControllerController, showing the supported fonts, text on its way, color and so on. To display it, just click the ellipsis button in the upper right corner of the details page.

Compile and run, and you should see the following initial screen:

Once you understand how the APP works, move on to the next section. Add a blur effect to the APP.

useUIVisualEffectViewAdd blur effect

UIKit provides a whole set of visual effects. UIBlurEffect(which is a subclass of UIVisualEffect), is relevant to your interest. UIBlurEffect provides nice visuals, as you can see in Navigation bars,Notification Center, and Control Center. You can also use it in your APP.

addUIBlurEffect

In this project, you will use the blur effect to make the OptionsController stand out at the top of the story. Let’s dive in!

Open optionsController.swift and add the following code to the end of the viewDidLoad: method:

/ / 1
view.backgroundColor = .clear
/ / 2
let blurEffect = UIBlurEffect(style: .light)
/ / 3
let blurView = UIVisualEffectView(effect: blurEffect)
/ / 4
blurView.translatesAutoresizingMaskIntoConstraints = false
view.insertSubview(blurView, at: 0)
Copy the code

Explain in turn:

  1. In order to be ableUIVisualEffectViewThe view’s contents are blurred, and its superview must be transparent. And to do that, you’re going toself.viewThe background is changed toclear
  2. useUIBlurEffectStyle.lightCreated aUIBlurEffect.This defines the style of ambiguity. Other supported styles include.extraLight..dark..extraDark.regular.prominentActually, I didn’t find anyextraDark).
  3. Created using the previous stepUIBlurEffectTo create aUIVisualEffectView. It isUIViewIts sole purpose is to depict complex blurred shapes and display it.
  4. Shut down theblurViewtheauto-resizingWhile the use ofconstraints, you will add it manually laterconstraintsAdd it to the bottom of view stack. If you add at the topblurView, which will blur all the elements below.

Now you need to make sure the blurView is in the right place. Add the following code to the end of the viewDidLoad: method:

NSLayoutConstraint.activate([
  blurView.heightAnchor.constraint(equalTo: view.heightAnchor),
  blurView.widthAnchor.constraint(equalTo: view.widthAnchor),
  ])
Copy the code

These constraints make the blurView frame the same as the OptionsController view.

Compile and run, select a story, click the ellipsis button, scroll through the text, and you’ll see the blur effect update in real time.

Now you have a dynamic blur effect in your APP that is not only simple to implement, but also beautiful to look at.

Liven up your blur effect

Blur is good, but Apple takes it to the next level with UIVibrancyEffect, which makes content more colorful.

The diagram below:

Note: UIVibrancyEffect must be added to the contentView of UIVisualEffectView (which is already properly placed, configured with UIBlurEffect)! Otherwise, “vivid effects” will not be added to any blurred effects.

Open optionsController.swift and add the following code to the end of the viewDidLoad: method:

/ / 1let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
// 2
let vibrancyView = UIVisualEffectView(effect: vibrancyEffect)
vibrancyView.translatesAutoresizingMaskIntoConstraints = false
// 3
vibrancyView.contentView.addSubview(optionsView)
// 4
blurView.contentView.addSubview(vibrancyView)
Copy the code

Explain in turn:

  1. Use the previous configurationblurEffectTo create aUIVibrancyEffect. UIVibrancyEffectisUIVisualEffectAnother subclass of.
  2. To create aUIVisualEffectViewUsed to containUIVibrancyEffectEffect. This step is the same as before to create the blur effect. Once you use itAuto LayoutTo determine theauto-resizingShut down.
  3. willoptionsViewAs a child view of the contentView in the vibrancyView. This will ensure that vividness is applied to every element it contains.
  4. Finally, add the vibrancyView to the blurView contentView for the final effect.

Next, you need to set the automatic layout constraints for the vibrancyView to be the same size as the blurView, and ensure that the optionsView is centered on the vibrancyView.

Add the following code to the end of the viewDidLoad: method:

NSLayoutConstraint.activate([
  vibrancyView.heightAnchor.constraint(equalTo: blurView.contentView.heightAnchor),
  vibrancyView.widthAnchor.constraint(equalTo: blurView.contentView.widthAnchor),
  vibrancyView.centerXAnchor.constraint(equalTo: blurView.contentView.centerXAnchor),
  vibrancyView.centerYAnchor.constraint(equalTo: blurView.contentView.centerYAnchor)
  ])

NSLayoutConstraint.activate([
  optionsView.centerXAnchor.constraint(equalTo: vibrancyView.contentView.centerXAnchor),
  optionsView.centerYAnchor.constraint(equalTo: vibrancyView.contentView.centerYAnchor),
  ])
Copy the code

One other thing you need to notice, if you look at the beginning of viewDidLoad:, is that you’re using optionsView as a child of self.view, and a view can only have one parent view.

Comment out the following code at the beginning of viewDidLoad:

view.addSubview(optionsView)
NSLayoutConstraint.activate([
  view.centerXAnchor.constraint(equalTo: optionsView.centerXAnchor),
  view.centerYAnchor.constraint(equalTo: optionsView.centerYAnchor)
  ])
Copy the code

Compile and run, and you should see the new effect in effect:

Unless there is a very different version, the effect will make the elements indistinguishable. What’s going on here?

Tell you what! The view below the blurView layer is slightly brighter and uses the UIBlureffectStyle.light effect. This will backfire, just like the effect above.

Modify the blurEffect initialization code as follows:

let blurEffect = UIBlurEffect(style: .dark)
Copy the code

This change makes the background and text a big difference again. Compile and run, and you should see the following:

further

One final note to note when using blur effects: What happens if the user disables blur effects?

In the simulator or on your device, open Settings, go to General\Accessibility\Increase Contrast, and open Reduce Transparency. Go back to the APP, open optionsView again, and you should see the following:

You can see it’s not working properly. In this case, you’d better go back to where you started.

Fortunately, you can use UIAccessibilityIsReduceTransparencyEnabled open () method to determine whether a auxiliary function. You can modify it as follows:

guard UIAccessibilityIsReduceTransparencyEnabled() == false else {
  view.addSubview(optionsView)
      
  NSLayoutConstraint.activate([
    view.centerXAnchor.constraint(equalTo: optionsView.centerXAnchor),
    view.centerYAnchor.constraint(equalTo: optionsView.centerYAnchor)
    ])
      
  return
}
Copy the code

OK, That’s all!

By the way, you can access the UIAccessibility class to see which switch states you can detect.

conclusion

In the whole process, the biggest feeling is that there is not the slightest difference between the style of writing at home and abroad. There is no foreign biased story style. Thanks for your company. Let’s make progress together!

note

  • Some pictures come from the network, if there is infringement, please inform.
  • Please point out any mistakes. ‘!
  • Your liking is the greatest compliment.