The realization of the effect of IOS hair glass and three methods of image blur effect _ios

App design often uses some fuzzy effects or a glass effect, and iOS has now provided some fuzzy APIs that we can use for convenience.

In the words of Apple after iOS7.0, many system interfaces have used the effect of the hair glass, increased the appearance of the interface, such as the following map of the notice center interface;

But its iOS7.0 SDK does not provide the developer to achieve the glass effect of the API, so many people are through some other packaging framework to achieve, I will also talk about one;

In fact, iOS7.0 (including) before there is a system of classes can achieve the effect of the hair glass, that is Uitoolbar this class, and use quite simple, a few lines of code can be done.

Here is the code implementation:

Create a Uitoolbar instance, set its frame, or you can add a constraint

Then Uitoolbar has an attribute: Barstyle, set the corresponding enumeration value to present the style of the hair glass, and then add it to the view that needs to be done with the glass effect.

/* Hair glass Style (enumeration)
Uibarstyledefault =,
uibarstyleblack =,
Uibarstyleblackopaque =,//deprecated. Use uibarstyleblack
uibarstyleblacktranslucent =,//deprecated. Use Uibarstyleblack and set the "translucent" to YES
* *
uiimageview *bgimgview = [[Uiimageview alloc] Initw IthFrame:self.view.bounds];
Bgimgview.image = [UIImage imagenamed:@ "huoying.jpg"];
[Self.view Addsubview:bgimgview];
Uitoolbar *toolbar = [[Uitoolbar alloc] Initwithframe:cgrectmake (,, bgimgview.frame.size.width*., BgImgView.frame.size.height)];
Toolbar.barstyle = uibarstyleblacktranslucent;

Effect Chart:

Let's take a look at the view structure again:

The view structure lets you see that Uitoolbar contains three child views

A background picture and a background view, as well as 1 background effects view, these views are combined to achieve the effect of the hair glass

After iOS8.0, Apple added a class of uivisualeffectview, through this class to achieve the effect of the glass and the above Uitoolbar, but also very high efficiency, the use is very simple, a few lines of code. Uivisualeffectview is an abstract class that cannot be used directly, and it needs to be implemented through the three subclasses below it (Uiblureffect, uivisualeffevt, Uivisualeffectview);

Subclass Uiblureffect has only one class method, which is used to quickly create a glass effect, the parameter is an enumeration, to set the style of the hair glass, and Uivisualeffectview is two more properties and two construction methods, Used to quickly add the created hair glass to this uivisualeffectview.

Special Note: This class is iOS8.0 to apply, so if the project is to be compatible with iOS7.0, there are two other ways to consider.

Here's how to implement the code:

It is also quick to instantiate the Uiblureffect and set the style of the hair glass, and then add the Uiblureffect instance through the Uivisualeffectview construction method to the last set frame or by adding a constraint, Add Effectview to the view control that implements the effect of the hair glass, as shown above.

Uiimageview *bgimgview = [[Uiimageview alloc] initWithFrame:self.view.bounds];
Bgimgview.image = [UIImage imagenamed:@ "huoying.jpg"];
Bgimgview.contentmode = Uiviewcontentmodescaleaspectfill;
[Bgimgview setimagetoblur: [uiimage imagenamed:@ "huoying.jpg"] blurRadius:completionBlock:nil];
bgimgview.userinteractionenabled = YES;
[Self.view Addsubview:bgimgview];
/* Hair glass Style (enumeration)
Uiblureffectstyleextralight,
uiblureffectstylelight,
Uiblureffectstyledark
*/
Uiblureffect *effect = [Uiblureffect Effectwithstyle:uiblureffectstyledark];
Uivisualeffectview *effectview = [[Uivisualeffectview alloc] initwitheffect:effect];
Effectview.frame = CGRectMake (,, bgimgview.frame.size.width*., bgImgView.frame.size.height);

But let's take a look at the view structure and you'll find that it's not like toolbar.

In fact, because Uivisualeffectview this class, the construction method helps us create a view, which we do with the hair glass and then cover it over the background image.

Well! Finally to introduce a foreign big God package of Uiimageview classification, inside no matter how to achieve, anyway, use very simple, as long as a code on the handle.

Let's look at the code first:

Uiimageview *bgimgview = [[Uiimageview alloc] initWithFrame:self.view.bounds];
Bgimgview.image = [UIImage imagenamed:@ "huoying.jpg"];
Bgimgview.contentmode = Uiviewcontentmodescaleaspectfill;
The processing parameters of the hair glass effect on the background picture Blurradius by default, you can specify that the last parameter block callback can be nil
[Bgimgview setimagetoblur: [UIImage imagenamed:@] Huoying.jpg "] blurRadius:completionBlock:nil];
bgimgview.userinteractionenabled = YES;

Effect Chart:

Take a look at the view structure after adding the effect of the hair glass:

hahaha, we should understand, this is directly to the background of the image of the Gaussian blur processing, the others do not explain.

Okay, anyway, iOS to do with the effect of hair glass in these ways, see the needs of everyone, like to use whichever kind of it.

The above demo, including the Great God package classification, if you need detailed source code, you can go to my github on clone! There are questions. Welcome to the message to discuss learning together.

Here are three ways to introduce the blur effect of the picture

The first uses core image to blur

-(UIImage *) Blurryimage: (UIImage *) Image 
Withblurlevel: (CGFloat) Blur {ciimage *inputimage 
= [ciimage Imagewithcgimage:image. Cgimage]; 
Cifilter *filter = [Cifilter filterwithname:@ "Cigaussianblur" Keysandvalues:kciinputimagekey, InputImage 
, 
@ "Inputradius", @ (Blur), 
]; Ciimage *outputimage = filter.outputimage; 
Cgimageref outimage = [Self.context createcgimage:outputimage 
fromrect:[outputimage extent]]; 
return [UIImage Imagewithcgimage:outimage]; }

The second use of the Vimage API for blurring

-(UIImage *) Blurryimage: (UIImage *) image withblurlevel: (CGFloat) Blur {if (Blur < 0.F | | Blur > 1.F) {blur = 0. 
5f; 
int boxsize = (int) (blur * 100); 
Boxsize = boxsize-(boxsize% 2) + 1; Cgimageref img = image. 
Cgimage; 
Vimage_buffer Inbuffer, Outbuffer; 
Vimage_error Error; 
void *pixelbuffer; 
Cgdataproviderref inprovider = Cgimagegetdataprovider (IMG); 
Cfdataref inbitmapdata = Http://www.open-open.com/code/view/CGDataProviderCopyData (Inprovider); 
Inbuffer.width = Cgimagegetwidth (IMG); 
Inbuffer.height = Cgimagegetheight (IMG); 
inbuffer.rowbytes = Cgimagegetbytesperrow (IMG); 
Inbuffer.data = (void*) cfdatagetbyteptr (inbitmapdata); 
Pixelbuffer = malloc (Cgimagegetbytesperrow (IMG) * Cgimagegetheight (IMG)); 
if (Pixelbuffer = NULL) NSLog (@ "No pixelbuffer"); 
Outbuffer.data = Pixelbuffer; 
Outbuffer.width = Cgimagegetwidth (IMG); 
Outbuffer.height = Cgimagegetheight (IMG); 
outbuffer.rowbytes = Cgimagegetbytesperrow (IMG); Error = vimageboxconvolve_argb8888 (&inbuffer, &outbuffer, NULL, 0, 0, boxsize, boxsize, NULL, kvimageedgeextend); 
if (Error) {NSLog (@ "error from convolution%ld", error); 
} cgcolorspaceref ColorSpace = Cgcolorspacecreatedevicergb (); 
Cgcontextref CTX = cgbitmapcontextcreate (Outbuffer.data, Outbuffer.width, Outbuffer.height, 8, OutBuffer.rowBytes, 
ColorSpace, Kcgimagealphanoneskiplast); 
Cgimageref imageref = Cgbitmapcontextcreateimage (CTX); 
UIImage *returnimage = [UIImage imagewithcgimage:imageref]; 
Clean up cgcontextrelease (CTX); 
Cgcolorspacerelease (ColorSpace); 
Free (pixelbuffer); 
Cfrelease (Inbitmapdata); 
Cgcolorspacerelease (ColorSpace); 
Cgimagerelease (IMAGEREF); return returnimage;  }

The third method is found on the web (glass effect)

Internal method, core code, encapsulated glass effect parameters: radius, color, color saturation-(UIImage *) Imagebluredwithradius: (cgfloat) Blurradius tintcolor: (Uicolor *) Tintcolor saturationdeltafactor: (cgfloat) saturationdeltafactor maskimage: (uiimage *) maskimage {CGRect ImageRect = { 
Cgpointzero, self.size}; UIImage *effectimage = self; 
BOOL Hasblur = blurradius > __flt_epsilon__; BOOL Hassaturationchange = Fabs (saturationDeltaFactor-1.) > __flt_epsilon__; if (Hasblur | | hassaturationchange) {uigraphicsbeginimagecontextwithoptions (self.size, NO, [[UIScreen MainScreen] 
Scale]); 
Cgcontextref Effectincontext = Uigraphicsgetcurrentcontext (); 
CGCONTEXTSCALECTM (Effectincontext, 1.0,-1.0); 
CGCONTEXTTRANSLATECTM (effectincontext, 0,-self.size.height); Cgcontextdrawimage (Effectincontext, imagerect, self. 
Cgimage); Vimage_buffer Effectinbuffer; 
Effectinbuffer.data = Http://www.open-open.com/code/view/CGBitmapContextGetData (Effectincontext); 
Effectinbuffer.width = Cgbitmapcontextgetwidth (Effectincontext); Effectinbuffer.height = CGbitmapcontextgetheight (Effectincontext); 
Effectinbuffer.rowbytes = Cgbitmapcontextgetbytesperrow (Effectincontext); 
Uigraphicsbeginimagecontextwithoptions (Self.size, NO, [[UIScreen mainscreen] scale]); 
Cgcontextref Effectoutcontext = Uigraphicsgetcurrentcontext (); 
Vimage_buffer Effectoutbuffer; 
Effectoutbuffer.data = Cgbitmapcontextgetdata (Effectoutcontext); 
Effectoutbuffer.width = Cgbitmapcontextgetwidth (Effectoutcontext); 
Effectoutbuffer.height = Cgbitmapcontextgetheight (Effectoutcontext); Effectoutbuffer.rowbytes = Cgbitmapcontextgetbytesperrow (Effectoutcontext); 
if (Hasblur) {cgfloat Inputradius = Blurradius * [[UIScreen mainscreen] scale]; 
Nsuinteger radius = Floor (Inputradius * 3 * sqrt (2 * m_pi)/4 + 0.5); 
if (radius% 2!= 1) {radius = 1;//force radius to is odd so this three Box-blur methodology works. vimageboxconvolve_argb8888 (&effectinbuffer, &effectoutbuffer, NULL, 0, 0, (short) Radius, (short) radius, 0, Kvimageedgeextend); Vimageboxconvolve_argb8888 (&effectoutbuffer, &effectinbuffer, NULL, 0, 0, (short) Radius, (short) Radius, 0, kvimageedgeextend); vimageboxconvolve_argb8888 (&effectinbuffer, &effectoutbuffer, NULL, 0, 0, (short) Radius, (short) radius, 0, 
Kvimageedgeextend); 
BOOL effectimagebuffersareswapped = NO; 
if (Hassaturationchange) {cgfloat s = saturationdeltafactor; CGFloat floatingpointsaturationmatrix[] = {0.0722 + 0.9278 * S, 0.0722-0.0722 * s, 0.0722-0.0722 * s, 0, 0.7152- 
0.7152 * s, 0.7152 + 0.2848 * S, 0.7152-0.7152 * s, 0, 0.2126-0.2126 * s, 0.2126-0.2126 * s, 0.2126 + 0.7873 * s, 
0, 0, 0, 0, 1,}; 
Const int32_t DIVISOR = 256; Nsuinteger matrixsize = sizeof (Floatingpointsaturationmatrix)/sizeof (floatingpointsaturationmatrix[0)); int16_t Saturationmatrix[matrixsize];  for (Nsuinteger i = 0; i < matrixsize ++i) {Saturationmatrix[i] = (int16_t) roundf (floatingpointsaturationmatrix[i) * 
DIVISOR); } if (Hasblur) {vimagematrixmultiply_argb8888 (&effectouTbuffer, &effectinbuffer, Saturationmatrix, divisor, NULL, NULL, KVIMAGENOFLAGS); 
effectimagebuffersareswapped = YES; else {vimagematrixmultiply_argb8888 (&effectinbuffer, &effectoutbuffer, Saturationmatrix, divisor, NULL, 
NULL, Kvimagenoflags); 
} if (!effectimagebuffersareswapped) effectimage = Uigraphicsgetimagefromcurrentimagecontext (); 
Uigraphicsendimagecontext (); 
if (effectimagebuffersareswapped) effectimage = Uigraphicsgetimagefromcurrentimagecontext (); 
Uigraphicsendimagecontext (); 
The//open context is used for outputting the image uigraphicsbeginimagecontextwithoptions (self.size, NO, [[UIScreen mainscreen] scale]); 
Cgcontextref Outputcontext = Uigraphicsgetcurrentcontext (); 
CGCONTEXTSCALECTM (Outputcontext, 1.0,-1.0); 
CGCONTEXTTRANSLATECTM (outputcontext, 0,-self.size.height); Start drawing the bottom figure cgcontextdrawimage (Outputcontext, imagerect, self. 
Cgimage); 
Start to draw the Blur effect if (Hasblur) {cgcontextsavegstate (outputcontext); if (maskimage) {cgcontextcliptomask (Outputcontext, Imagerect, MasKimage.cgimage); 
} cgcontextdrawimage (Outputcontext, Imagerect, effectimage.cgimage); 
Cgcontextrestoregstate (Outputcontext); 
///Add color rendering if (Tintcolor) {cgcontextsavegstate (outputcontext); 
Cgcontextsetfillcolorwithcolor (Outputcontext, Tintcolor.cgcolor); 
Cgcontextfillrect (Outputcontext, imagerect); 
Cgcontextrestoregstate (Outputcontext); 
//Output The finished product, and close the context uiimage *outputimage = Uigraphicsgetimagefromcurrentimagecontext (); 
Uigraphicsendimagecontext (); return outputimage;}