毛玻璃效果的實現

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

一、UIToolbar

在iOS7.0之前還是有系統的類可以實現毛玻璃效果的， 就是 UIToolbar這個類，并且使用簡單，實現起來也很簡潔。

• 創建一個UIToolbar實例，設置它的frame或者也可以通過添加約束；

• UIToolbar有一個屬性:barStyle，設置對應的枚舉值來呈現毛玻璃的樣式，最后再添加到需要進行毛玻璃效果的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];

• 效果圖：

• 視圖結構：
  通過視圖，可以看出UIToolbar包含了三個子視圖：一個背景圖片和一個背景view，還有一個背景特效view，正是這幾個視圖結合在一起實現了毛玻璃的效果。

二、UIVisualEffectView

在iOS8.0之后，蘋果新增了一個類UIVisualEffectView，通過這個類來實現毛玻璃效果與上面的UIToolbar一樣，而且效率也非常高，使用也是非常簡單。 UIVisualEffectView是一個抽象類，不能直接使用，需通過它下面的三個子類來實現(UIBlurEffect, UIVisualEffevt, UIVisualEffectView)。

子類UIBlurEffect只有一個類方法，用來快速創建一個毛玻璃效果，參數是一個枚舉，用來設置毛玻璃的樣式，而UIVisualEffectView則多了兩個屬性和兩個構造方法，用來快速將創建的毛玻璃添加到這個UIVisualEffectView上。

• 實例化UIBlurEffect并設置毛玻璃的樣式；

• 再通過UIVisualEffectView的構造方法將UIBlurEffect的實例添加上去；

• 設置frame或者是通過添加約束，將effectView添加到要實現了毛玻璃的效果的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];

• 效果圖：

• 視圖結構：
  會發現和Toolbar不一樣，其實是因為UIVisualEffectView這個類,構造方法幫我們創建了一個view，而在這個view做了毛玻璃處理，再將其覆蓋到了背景圖之上。

圖片模糊效果的實現

一、使用Core Image進行模糊

- (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進行模糊

- (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; }

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。