IOS achieves glass wool effect, and ios implements glass wool

Source: Internet
Author: User
Tags deprecated notification center

IOS achieves glass wool effect, and ios implements glass wool

In other words, after Apple's iOS, many system interfaces use the glass wool effect, enhancing the interface aesthetics, such as the notification center interface;

However, the iOS7.0 SDK does not provide developers with APIs to implement the frosted glass effect. Therefore, many developers use some frameworks encapsulated by others. I will discuss one later;

In fact, there are still systematic classes before iOS7.0 (including) that can achieve the glass effect, that is, the UIToolbar class, And the use is quite simple, just a few lines of code can be done.

The following is code implementation:

Create a UIToolbar instance and set its frame or add constraints.

Then, UIToolbar has a property: barStyle, which sets the corresponding enumerated value to display the pattern of the frosted glass, and adds it to the view that requires the frosted glass effect.

1/* 2 pattern (enumeration) 3 UIBarStyleDefault = 0, 4 UIBarStyleBlack = 1, 5 UIBarStyleBlackOpaque = 1, // Deprecated. use UIBarStyleBlack 6 UIBarStyleBlackTranslucent = 2, // Deprecated. use UIBarStyleBlack and set the translucent property to YES 7 */8 UIImageView * bgImgView = [[UIImageView alloc] initWithFrame: self. view. bounds]; 9 bgImgView. image = [UIImage imageNamed: @ "huoying4.jpg"]; 10 [self. view addSubview: bgImgView]; 11 12 UIToolbar * toolbar = [[UIToolbar alloc] initWithFrame: CGRectMake (0, 0, bgImgView. frame. size. width * 0.5, bgImgView. frame. size. height)]; 13 toolbar. barStyle = UIBarStyleBlackTranslucent; 14 [bgImgView addSubview: toolbar];

:

Let's take a look at the view structure:

The view structure shows that the UIToolbar contains three sub-views.

One background image, one background view, and one special background view are combined to achieve the glass effect.

======================================== ====================================

After iOS8.0, Apple added a class of uivisualcomputview, which achieves the same effect as the above UIToolbar and is very efficient and easy to use, several lines of code. UIVisualEffectView is an abstract class and cannot be used directly. It must be implemented using the three sub-classes below it (UIBlurEffect, UIVisualEffevt, UIVisualEffectView );

The subclass UIBlurEffect has only one class method to quickly create a glass effect. The parameter is an enumeration that is used to set the style of the glass,

Uivisualiztview has two more attributes and two constructor methods to quickly add the glass to the uivisualiztview.

Note: This class is applicable only after iOS8.0. If the project is compatible with iOS7.0, consider the other two methods.

Let's take a look at the implementation code:

Similarly, we first quickly instantiate UIBlurEffect and set the pattern of the frosted glass, and then add the UIBlurEffect instance through the constructor of uivisualizer tview.

Finally, set the frame or add constraints to the view control to achieve the effect of the glass, which is the same as the above.

1 UIImageView * bgImgView = [[UIImageView alloc] initWithFrame: self. view. bounds]; 2 bgImgView. image = [UIImage imageNamed: @ "huoying4.jpg"]; 3 bgImgView. contentMode = UIViewContentModeScaleAspectFill; 4 // [bgImgView setImageToBlur: [UIImage imageNamed: @ "huoying4.jpg"] blurRadius: 20 completionBlock: nil]; 5 bgImgView. userInteractionEnabled = YES; 6 [self. view addSubview: bgImgView];/* 9 pattern (enumeration) 10 Gbit/s, 11 UIBlurEffectStyleLight, 12 Gbit/s */14 UIBlurEffect * effect = [UIBlurEffect explain twithstyle 15 uivisualcomputview * effectView = [[uivisualcomputview alloc] initWithEffect: effect]; 16 effectView. frame = CGRectMake (0, 0, bgImgView. frame. size. width * 0.5, bgImgView. frame. size. height); 17 [bgImgView addSubview: effectView];

But let's take a look at the view structure and we will find that it is different from the Toolbar!

In fact, this is because of the uivisualiztview class. The constructor helps us to create a view, which we have processed for it and then overwritten it on the background image.

======================================== ====================================

Well! Finally, I would like to introduce you to the classification of the UIImageView encapsulated by a foreign god. No matter how it is implemented, it is very easy to use. You only need to use a single code.

The Code is as follows:

1 UIImageView * bgImgView = [[UIImageView alloc] initWithFrame: self. view. bounds]; 2 // bgImgView. image = [UIImage imageNamed: @ "huoying4.jpg"]; 3 bgImgView. contentMode = UIViewContentModeScaleAspectFill; 4 // The blurRadius parameter is set to 20 by default. The callback of the last parameter block can be nil5 [bgImgView setImageToBlur: [UIImage imageNamed: @ "huoying4.jpg"] blurRadius: 20 completionBlock: nil]; 6 bgImgView. userInteractionEnabled = YES; 7 [self. view addSubview: bgImgView];

:

Let's take a look at the view structure after the glass effect is added:

Hahaha, You should have understood it. This is a Gaussian blur of the background image.

Well, there are several ways to process the frosted glass effect in iOS. Let's look at your needs and use what you like.

The demo above includes the classification of the great god encapsulation. If you need detailed source code, you can Clone it on my gitHub! If you have any questions, please leave a message for further study.

My gitHub: https://github.com/Kejiasir/EffectViewDemo

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.