iOS毛玻璃效果实现
苹果在iOS 7中将界面改为扁平化，并大量使用了毛玻璃效果，增加了界面的美观性
但是iOS 7 SDK本身并未向开发者公开提供毛玻璃效果的API，因此开发者只能去自己实现毛玻璃效果或者找第三方类库解决。就是 UIToolbar这个类
然后UIToolbar有一个属性:barStyle,设置对应的枚举值来呈现毛玻璃的样式,最后再添加到需要进行毛玻璃效果的view上即可.
1 /*
2 毛玻璃的样式(枚举)
3 UIBarStyleDefault = 0,
4 UIBarStyleBlack = 1,
5 UIBarStyleBlackOpaque = 1, // Deprecated. Use UIBarStyleBlack
6 UIBarStyleBlackTranslucent = 2, // Deprecated. Use UIBarStyleBlack and set the translucent property to YES
7 */
8 UIImageView *bgImgView = [[UIImageView alloc] initWithFrame:self.view.bounds];
9 bgImgView.image = [UIImage imageNamed:@"huoying4.jpg"];
10 [self.view addSubview:bgImgView];
11
12 UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, bgImgView.frame.size.width*0.5, bgImgView.frame.size.height)];
13 toolbar.barStyle = UIBarStyleBlackTranslucent;
14 [bgImgView addSubview:toolbar];
但是我们来看看视图结构,大家会发现和Toolbar创建的不一样哦!
其实是因为UIVisualEffectView这个类,构造方法帮我们创建了一个view,而这个view我们给它做了毛玻璃处理,再将其覆盖到了背景图之上
=========================分割线===============================
嗯! 最后再来给大家介绍一个国外大神封装的UIImageView的分类,实现：
首先需要导入Accelerate.framework。
然后把两个文件加入到自己的项目中即可。
UIImage+ImageEffects.h
代码如下:
#import
@interfaceUIImage(ImageEffects)
-(UIImage*)applyLightEffect;
-(UIImage*)applyExtraLightEffect;
-(UIImage*)applyDarkEffect;
-(UIImage*)applyTintEffectWithColor:(UIColor*)tintColor;
-(UIImage*)applyBlurWithRadius:(CGFloat)blurRadius tintColor:(UIColor*)tintColor saturationDeltaFactor:(CGFloat)saturationDeltaFactor maskImage:(UIImage*)maskImage;
@end UIImage+ImageEffects.m
#import "UIImage+ImageEffects.h"
#import
#import
@implementationUIImage(ImageEffects)
-(UIImage*)applyLightEffect
{
UIColor*tintColor =[UIColor colorWithWhite:1.0 alpha:0.3];
return[self applyBlurWithRadius:30 tintColor:tintColor saturationDeltaFactor:1.8 maskImage:nil];
}
-(UIImage*)applyExtraLightEffect
{
UIColor*tintColor =[UIColor colorWithWhite:0.97 alpha:0.82];
return[self applyBlurWithRadius:20 tintColor:tintColor saturationDeltaFactor:1.8 maskImage:nil];
}
-(UIImage*)applyDarkEffect
{
UIColor*tintColor =[UIColor colorWithWhite:0.11 alpha:0.73];
return[self applyBlurWithRadius:20 tintColor:tintColor saturationDeltaFactor:1.8 maskImage:nil];
}
-(UIImage*)applyTintEffectWithColor:(UIColor*)tintColor
{
constCGFloatEffectColorAlpha=0.6;
UIColor*effectColor = tintColor;
int componentCount =CGColorGetNumberOfComponents(tintColor.CGColor);
if(componentCount ==2){
CGFloat b;
if([tintColor getWhite:&b alpha:NULL]){
effectColor =[UIColor colorWithWhite:b alpha:EffectColorAlpha];
}
}
else{
CGFloat r, g, b;
if([tintColor getRed:&r green:&g blue:&b alpha:NULL]){
effectColor =[UIColor colorWithRed:r green:g blue:b alpha:EffectColorAlpha];
}
}
return[self applyBlurWithRadius:10 tintColor:effectColor saturationDeltaFactor:-1.0 maskImage:nil];
}
-(UIImage*)applyBlurWithRadius:(CGFloat)blurRadius tintColor:(UIColor*)tintColor saturationDeltaFactor:(CGFloat)saturationDeltaFactor maskImage:(UIImage*)maskImage
{
// Check pre-conditions.
if(self.size.width <1||self.size.height <1){
NSLog(@"*** error: invalid size: (%.2f x %.2f). Both dimensions must be >= 1: %@",self.size.width,self.size.height,self);
returnnil;
}
if(!self.CGImage){
NSLog(@"*** error: image must be backed by a CGImage: %@",self);
returnnil;
}
if(maskImage &&!maskImage.CGImage){
NSLog(@"*** error: maskImage must be backed by a CGImage: %@", maskImage);
returnnil;
}
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 =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){
// A description of how to compute the box kernel width from the Gaussian
// radius (aka standard deviation) appears in the SVG spec:
// http://www.w3.org/TR/SVG/filters.html#feGaussianBlurElement
//
// For larger values of 's' (s >= 2.0), an approximation can be used: Three
// successive box-blurs build a piece-wise quadratic convolution kernel, which
// approximates the Gaussian kernel to within roughly 3%.
//
// let d = floor(s * 3*sqrt(2*pi)/4 + 0.5)
//
// ... if d is odd, use three box-blurs of size 'd', centered on the output pixel.
//
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 be odd so that the three box-blur methodology works.
}
vImageBoxConvolve_ARGB8888(&effectInBuffer,&effectOutBuffer, NULL,0,0, radius, radius,0, kvImageEdgeExtend);
vImageBoxConvolve_ARGB8888(&effectOutBuffer,&effectInBuffer, NULL,0,0, radius, radius,0, kvImageEdgeExtend);
vImageBoxConvolve_ARGB8888(&effectInBuffer,&effectOutBuffer, NULL,0,0, radius, 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,
};
constint32_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();
}
// Set up output context.
UIGraphicsBeginImageContextWithOptions(self.size, NO,[[UIScreen mainScreen] scale]);
CGContextRef outputContext =UIGraphicsGetCurrentContext();
CGContextScaleCTM(outputContext,1.0,-1.0);
CGContextTranslateCTM(outputContext,0,-self.size.height);
// Draw base image.
CGContextDrawImage(outputContext, imageRect,self.CGImage);
// Draw effect image.
if(hasBlur){
CGContextSaveGState(outputContext);
if(maskImage){
CGContextClipToMask(outputContext, imageRect, maskImage.CGImage);
}
CGContextDrawImage(outputContext, imageRect, effectImage.CGImage);
CGContextRestoreGState(outputContext);
}
// Add in color tint.
if(tintColor){
CGContextSaveGState(outputContext);
CGContextSetFillColorWithColor(outputContext, tintColor.CGColor);
CGContextFillRect(outputContext, imageRect);
CGContextRestoreGState(outputContext);
}
// Output image is ready.
UIImage*outputImage =UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return outputImage;
}
@end 下面看实现代码:
UIImageView *bgImgView = [[UIImageView alloc] initWithFrame:self.view.bounds];
//bgImgView.image = [UIImage imageNamed:@"huoying4.jpg"];
bgImgView.contentMode = UIViewContentModeScaleAspectFill;
// 对背景图片进行毛玻璃效果处理 参数blurRadius默认是20,可指定,最后一个参数block回调可以为nil
[bgImgView setImageToBlur: [UIImage imageNamed:@"huoying4.jpg"] blurRadius:20 completionBlock:nil];
bgImgView.userInteractionEnabled = YES;
[self.view addSubview:bgImgView]; 
再来看看添加毛玻璃效果后的视图结构:
哈哈哈, 大家应该看懂了, 这是直接对背景图片进行了高斯模糊处理了,其它就不解释了.
还有几种方法
使用core image
//生成一张毛玻璃图片
- (UIImage *)blur:(UIImage *)theImage
{
CIContext *context = [CIContextcontextWithOptions:nil];
CIImage *inputImage = [CIImageimageWithCGImage:theImage.CGImage];
CIFilter *filter = [CIFilterfilterWithName:@"CIGaussianBlur"];
[filter setValue:inputImageforKey:kCIInputImageKey];
[filter setValue:[NSNumbernumberWithFloat:15.0]forKey:@"inputRadius"];//其中数值是模糊度（3～30，越大越模糊）
CIImage *result = [filtervalueForKey:kCIOutputImageKey];
CGImageRef cgImage = [contextcreateCGImage:resultfromRect:[inputImageextent]];
UIImage *returnImage = [UIImageimageWithCGImage:cgImage];
CGImageRelease(cgImage);
return returnImage;
}
系统方法，iOS8以上
//方法一：系统方法，iOS8及以上可用
if (!UIAccessibilityIsReduceTransparencyEnabled()) {
UIBlurEffect *blurEffect = [UIBlurEffecteffectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *blurEffectView = [[UIVisualEffectViewalloc]initWithEffect:blurEffect];
blurEffectView.frame = _imageView.bounds;
[_imageView addSubview:blurEffectView];
}
上述两种方法可以配合使用，效果可以增加光亮度
iOS 8 SDK中直接提供了UIBlurEffect类与UIVisualEffectView类，可以实现毛玻璃效果。这两个类的使用方法非常简单，步骤是：
1. 创建UIBlurEffect类的实例，并指定某一种毛玻璃效果。
2. 创建UIVisualEffectView类的实例，将步骤1中的UIBlurEffect类的实例应用到UIVisualEffectView类的实例上。
3. 将UIVisualEffectView类的实例置于待毛玻璃化的视图之上即可。