iOS开发之实现毛玻璃效果及图片模糊效果
毛玻璃效果的實(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上即可。
- 效果圖:
- 視圖結(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控件上。
- 效果圖:
- 視圖結(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)題。
- 上一篇: iOS之Socket的使用-AsyncS
- 下一篇: iOS基础知识(面试必备)