Implementation of the iOS blur effect (frosted glass effect)

The glass effect was used in the previous project, when a part of the two classes of Uiblureffect and Uivisualeffectview were understood. But at that time did not go to special in-depth research, until the project was finished, just calm down to study a good. Record it.

After iOS8, Apple added the three kinds of Uiblureffect class,Uivibrancyeffect class, and Uivisualeffectview class for the purpose of blurring the background color, which is what we call the "frosted glass effect". The next step is to analyze the specific use.

In fact, Apple has a good package for this special effect, so we don't need any steps to use it. Have to admire Apple's strength.

1, about the Uiblureffect class

We look at the Uiblureffect class first, only one method is given in the Apple documentation:

+ (uiblureffect *) Effectwithstyle: (uiblureffectstyle) style;

The same is true for us:

/* * *    Three styles of blur effect     *     *  @param uiblureffectstyle            uiblureffectstyleextralight,//extra Brightness, (Highlight style)       uiblureffectstylelight,//bright style       uiblureffectstyledark//dark style     *         */ // achieve blur effect    Uiblureffect *blureffrct =[uiblureffect Effectwithstyle:uiblureffectstylelight];

2, about the Uivibrancyeffect class

A method is also given in the documentation:

+ (uivibrancyeffect *) Effectforblureffect: (uiblureffect *) blureffect;

The official explanation is this.

/* Uivibrancyeffect amplifies and adjusts the color of content layered behind the view, allowing content placed inside the Contentview to become more vivid. It is intended to being placed over, or as a subview of, a uivisualeffectview that have been configured with a uiblureffect. This effect is affects content added to the Contentview. Because the vibrancy effect is a color dependent, subviews added to the Contentview need to be tintcolordidchange aware and Must is prepared to update themselves accordingly. Uiimageview would need its image to has a rendering mode of uiimagerenderingmodealwaystemplate to receive the proper EFFEC T.

*/

Translate as follows:

Uivibrancyeffect's role is to magnify and adjust the color of the contents of the Uivisualeffectview content view so that the contents of Uivisualeffectview's Contentview appear more vivid. It is placed above the Uivisualeffectview as a sub-view, to connect the uiblureffect. This effect affects only the content that is added to the Uivisualeffectview Contentview. Because the vitality effect is color-dependent ...

As we can see, uivibrancyeffect objects are usually used with uiblureffect and are mainly used to handle some of the effects on uiblureffect effects.

Here's a look at the implementation code:

 //  implement Blur effect  Uiblureffect *blureffrct        =[uiblureffect Effectwithstyle:uiblureffectstylelight]; Uivibrancyeffect  *vibrancyeffect = [Uivibrancyeffect Effectforblureffect:        BLUREFFRCT]; Uivisualeffectview  *visualeffectview = [[Uivisualeffectview alloc]   Initwitheffect:vibrancyeffect];  //  Visualeffectview.backgroundcolor = [ Uicolor Graycolor];  

Visualeffectview. Contentview. Frame = CGRectMake (ten, +, + );

     [Self.view Addsubview:visualeffectview];

Now let's add a view to Uivisualeffectview's contentview to see the effect.

UILabel *label = [[UILabel alloc]initwithframe:cgrectmake (280]];         @" I 've had a test, hhhhhhhhhhhhhhh. " ;     = nstextalignmentleft;     = [Uifont systemfontofsize:+];     = [Uicolor yellowcolor];     0 ;    [Visualeffectview.contentview Addsubview:label];

As can be seen in the above code, I change the color of the text in the label is used: Tintcolor, which is also particularly important to note, the document has been specifically presented and explained: Because The vibrancy effect is color dependent , Subviews added to the Contentview need to be tintcolordidchange aware and must is prepared to update themselves Accordin Gly. So we use label.textcolor to change the color is completely ineffective.

Run as follows: (cuts only the effect portion)

As for the color is not set yellowcolor, I do not need to say more, this is the function of Uivibrancyeffect.

3, Uivisualeffectview class

The usual first look at the document: There are also a few four kinds, which is worth mentioning is: Contentview. Here is a clear telling: Do not add sub-views directly to Uivisualeffectview, but to add to Contentview.

ReadOnly // Do not add subviews directly to Uivisualeffectview, use the This view instead.  *effect; -(Instancetype) Initwitheffect: (Nullable Uivisualeffect *) effect Ns_designated_initializer; -(Nullable Instancetype) Initwithcoder: (Nscoder *) Adecoder Ns_designated_initializer;

Here I give a more complete code (let's take a look at the effects of the Uiblureffect class and the Uivisualeffectview Class):

Self.view.backgroundColor= [Uicolor colorwithpatternimage:[uiimage imagenamed:@"6.jpg"]]; /** * three styles of blur effect * * @param uiblureffectstyle uiblureffectstyleextralight,//extra brightness, (highlight style) U iblureffectstylelight,//light style uiblureffectstyledark//dark style **/    //achieve Blur effectUiblureffect *BLUREFFRCT =[Uiblureffect Effectwithstyle:uiblureffectstylelight]; //Frosted Glass ViewUivisualeffectview *visualeffectview =[[Uivisualeffectview ALLOC]INITWITHEFFECT:BLUREFFRCT]; Visualeffectview.frame= CGRectMake ( -, -, -, -); Visualeffectview.alpha=0.9; [Self.view Addsubview:visualeffectview];

See if it's what you want:

Before iOS8, you can go to GitHub to see some of the packaging libraries. There are a lot of good three-party library good, here is not listed.

Implementation of the iOS blur effect (frosted glass effect)