毛玻璃效果的實(shí)現(xiàn)

App設(shè)計(jì)時(shí)往往會(huì)用到一些模糊效果或者毛玻璃效果，iOS目前已提供了一些模糊API可以讓我們方便使用。蘋(píng)果在iOS7.0之后，很多系統(tǒng)界面都使用了毛玻璃效果，增加了界面的美觀性，比如下圖的通知中心界面：

一、UIToolbar

在iOS7.0之前還是有系統(tǒng)的類(lèi)可以實(shí)現(xiàn)毛玻璃效果的， 就是 UIToolbar這個(gè)類(lèi)，并且使用簡(jiǎn)單，實(shí)現(xiàn)起來(lái)也很簡(jiǎn)潔。

• 創(chuàng)建一個(gè)UIToolbar實(shí)例，設(shè)置它的frame或者也可以通過(guò)添加約束；

• UIToolbar有一個(gè)屬性:barStyle，設(shè)置對(duì)應(yīng)的枚舉值來(lái)呈現(xiàn)毛玻璃的樣式，最后再添加到需要進(jìn)行毛玻璃效果的view上即可。

/* 毛玻璃的樣式* UIBarStyleDefault* UIBarStyleBlack* UIBarStyleBlackOpaque* UIBarStyleBlackTranslucent*/UIImageView *homeView = [[UIImageView alloc] initWithFrame:self.view.bounds];homeView.image = [UIImage imageNamed:@"103.png"];[self.view addSubview:homeView];UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.view.bounds)/2, 0, homeView.frame.size.width, homeView.frame.size.height)];toolbar.barStyle = UIBarStyleBlackTranslucent;[homeView addSubview:toolbar];

• 效果圖：

• 視圖結(jié)構(gòu)：
  通過(guò)視圖，可以看出UIToolbar包含了三個(gè)子視圖：一個(gè)背景圖片和一個(gè)背景view，還有一個(gè)背景特效view，正是這幾個(gè)視圖結(jié)合在一起實(shí)現(xiàn)了毛玻璃的效果。

二、UIVisualEffectView

在iOS8.0之后，蘋(píng)果新增了一個(gè)類(lèi)UIVisualEffectView，通過(guò)這個(gè)類(lèi)來(lái)實(shí)現(xiàn)毛玻璃效果與上面的UIToolbar一樣，而且效率也非常高，使用也是非常簡(jiǎn)單。 UIVisualEffectView是一個(gè)抽象類(lèi)，不能直接使用，需通過(guò)它下面的三個(gè)子類(lèi)來(lái)實(shí)現(xiàn)(UIBlurEffect, UIVisualEffevt, UIVisualEffectView)。

子類(lèi)UIBlurEffect只有一個(gè)類(lèi)方法，用來(lái)快速創(chuàng)建一個(gè)毛玻璃效果，參數(shù)是一個(gè)枚舉，用來(lái)設(shè)置毛玻璃的樣式，而UIVisualEffectView則多了兩個(gè)屬性和兩個(gè)構(gòu)造方法，用來(lái)快速將創(chuàng)建的毛玻璃添加到這個(gè)UIVisualEffectView上。

• 實(shí)例化UIBlurEffect并設(shè)置毛玻璃的樣式；

• 再通過(guò)UIVisualEffectView的構(gòu)造方法將UIBlurEffect的實(shí)例添加上去；

• 設(shè)置frame或者是通過(guò)添加約束，將effectView添加到要實(shí)現(xiàn)了毛玻璃的效果的view控件上。

/* 毛玻璃的樣式* UIBlurEffectStyleExtraLight* UIBlurEffectStyleLight* UIBlurEffectStyleDark*/UIImageView *homeView = [[UIImageView alloc] initWithFrame:self.view.bounds];homeView.image = [UIImage imageNamed:@"102.jpg"];homeView.contentMode = UIViewContentModeScaleToFill;homeView.userInteractionEnabled = YES;[self.view addSubview:homeView];UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];effectView.frame = CGRectMake(0, 0, homeView.frame.size.width/2, homeView.frame.size.height);[homeView addSubview:effectView];

• 效果圖：

• 視圖結(jié)構(gòu)：
  會(huì)發(fā)現(xiàn)和Toolbar不一樣，其實(shí)是因?yàn)閁IVisualEffectView這個(gè)類(lèi),構(gòu)造方法幫我們創(chuàng)建了一個(gè)view，而在這個(gè)view做了毛玻璃處理，再將其覆蓋到了背景圖之上。

圖片模糊效果的實(shí)現(xiàn)

一、使用Core Image進(jìn)行模糊

- (UIImage *)blurryImage:(UIImage *)imagewithBlurLevel:(CGFloat)blur {CIImage *inputImage = [CIImage imageWithCGImage:image.CGImage];CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur" keysAndValues:kCIInputImageKey,inputImage,@"inputRadius", @(blur),nil];CIImage *outputImage = filter.outputImage;CGImageRef outImage = [self.context createCGImage:outputImage fromRect:[outputImage extent]];return [UIImage imageWithCGImage:outImage]; }

二、使用vImage API進(jìn)行模糊

- (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 = 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 upCGContextRelease(ctx);CGColorSpaceRelease(colorSpace);free(pixelBuffer);CFRelease(inBitmapData);CGColorSpaceRelease(colorSpace);CGImageRelease(imageRef);return returnImage; }

總結(jié)

以上是生活随笔為你收集整理的iOS开发之实现毛玻璃效果及图片模糊效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。