iOS自定义collectionView实现毛玻璃效果

先来看看效果图，由于录屏软件不给力，毛玻璃效果不明显，请见谅。

步骤详解:
说下思路,很简单,首先自定义一个collectionView, 重写它的initWithFrame:collectionViewLayout:方法,在这里面做配置,这里用的是AXECollectionView.
与之对应的自定义一个collectionViewCell,在cell里配置操作:设置layer涂层,加载图片等操作,这里用的是AXECollectionViewCell.
最后在需要展示的控制器里调用AXECollectionView,给它传入一个自定义的流水布局和图片数组,大功告成.
示例代码如下：

// viewController@interface ViewController （）@property （nonatomic, strong） AXECollectionView *collectionView;@end@implementation ViewController- （void）viewDidLoad {[super viewDidLoad];// 流水布局UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];flowLayout.minimumLineSpacing = kItem_Margin;flowLayout.minimumInteritemSpacing = [UIScreen mainScreen].bounds.size.height;flowLayout.itemSize = CGSizeMake（[UIScreen mainScreen].bounds.size.width - kItem_Margin, kItem_Height）;flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;flowLayout.sectionInset = UIEdgeInsetsMake（0, kItem_Margin / 2, 0, kItem_Margin / 2）;CGRect frame = self.view.bounds;_collectionView = [[AXECollectionView alloc] initWithFrame:frame collectionViewLayout:flowLayout];// 传入图片数组_collectionView.imgArr = @[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",];[self.view addSubview:_collectionView];}// AXECollectionView.h@interface AXECollectionView : UICollectionView@property （nonatomic, strong） NSArray *imgArr;@end// AXECollectionView.m@interface AXECollectionView （） <UICollectionViewDelegate, UICollectionViewDataSource>// 背景imgView@property （nonatomic, strong） UIImageView *bgImgView;@end@implementation AXECollectionViewstatic NSString *const AXECollectionViewCellID = @"AXECollectionViewCell";- （instancetype）initWithFrame:（CGRect）frame collectionViewLayout:（UICollectionViewLayout *）layout{if（self = [super initWithFrame:frame collectionViewLayout:layout]）{[self setup];}return self;}- （void）setup{self.showsVerticalScrollIndicator = NO;self.showsHorizontalScrollIndicator = NO;self.pagingEnabled = YES;self.dataSource = self;self.delegate = self;[self registerClass:[AXECollectionViewCell class] forCellWithReuseIdentifier:AXECollectionViewCellID];// collectionView背景viewUIImageView *bgImgView = [[UIImageView alloc] initWithFrame:self.bounds];self.backgroundView = bgImgView;self.bgImgView = bgImgView;// 毛玻璃效果 （iOS8.0以后适用）UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];effectView.frame = self.bounds;[self.backgroundView addSubview:effectView];}#pragma mark - UICollectionViewDataSource- （UICollectionViewCell *）collectionView:（UICollectionView *）collectionView cellForItemAtIndexPath:（NSIndexPath *）indexPath{AXECollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:AXECollectionViewCellID forIndexPath:indexPath];cell.img = self.imgArr[indexPath.row];// 设置毛玻璃图片self.bgImgView.image = [UIImage imageNamed:self.imgArr[indexPath.row]];return cell;}- （NSInteger）collectionView:（UICollectionView *）collectionView numberOfItemsInSection:（NSInteger）section{return self.imgArr.count;}#pragma mark - UICollectionViewDelegate- （void）collectionView:（UICollectionView *）collectionView willDisplayCell:（UICollectionViewCell *）cell forItemAtIndexPath:（NSIndexPath *）indexPath{AXECollectionViewCell *myCell = （AXECollectionViewCell *）cell;[UIView animateWithDuration:0.5 animations:^{myCell.transform = CGAffineTransformScale（CGAffineTransformIdentity, 1.0, 1.4）;}];}

补充一下
例子中我是用的UIBlurEffect做的毛玻璃效果,这个是iOS8以后出现的,如果你要适配7的系统,那就要另做配置.
如果不用UIBlurEffect的话,下面这两种同样能做出模糊效果,只不过第一种性能较差,建议大家按需使用.

// 返回滤镜处理后图片- （UIImage *）coreBlurImage:（UIImage *）image withBlurNumber:（CGFloat）blur{CIContext *context = [CIContext contextWithOptions:nil];CIImage *inputImage= [CIImage imageWithCGImage:image.CGImage];// 设置filterCIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];[filter setValue:inputImage forKey:kCIInputImageKey];[filter setValue:@（blur） forKey: @"inputRadius"];// 模糊图片CIImage *result=[filter valueForKey:kCIOutputImageKey];CGImageRef outImage=[context createCGImage:result fromRect:[result extent]];UIImage *blurImage=[UIImage imageWithCGImage:outImage];CGImageRelease（outImage）;return blurImage;}// 返回高斯效果模糊图片- （UIImage *）boxblurImage:（UIImage *）image withBlurNumber:（CGFloat）blur{if （blur < 0.f || blur > 1.f） {blur = 0.5f;}int boxSize = （int）（blur * 40）;boxSize = boxSize - （boxSize % 2） + 1;CGImageRef img = image.CGImage;vImage_Buffer inBuffer, outBuffer;vImage_Error error;void *pixelBuffer;// 从CGImage中获取数据CGDataProviderRef inProvider = CGImageGetDataProvider（img）;CFDataRef inBitmapData = CGDataProviderCopyData（inProvider）;// 设置从CGImage获取对象的属性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 upCGColorSpaceRelease（colorSpace）;free（pixelBuffer）;CFRelease（inBitmapData）;CGColorSpaceRelease（colorSpace）;CGImageRelease（imageRef）;return returnImage;}

总结
以上就是iOS自定义collectionView实现毛玻璃效果的全部内容，希望能对各位iOS开发者们有一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。