ios collectionview 自定义布局（ios自定义collectionview实现毛玻璃","p":true,"g":[{"type":"sug","sa":"s_1","q":"ios collectionview 自定义布局"}],"slid":"21861820296313&quo

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

$ios collectionview 自定义布局（ios自定义collectionview实现毛玻璃","p":true,"g":[{"type":"sug","sa":"s_1","q":"ios collectionview 自定义布局"}],"slid":"21861820296313&quo$

步骤详解:

说下思路,很简单,首先自定义一个collectionview, 重写它的initwithframe:collectionviewlayout:方法,在这里面做配置,这里用的是axecollectionview.

与之对应的自定义一个collectionviewcell,在cell里配置操作:设置layer涂层,加载图片等操作,这里用的是axecollectionviewcell.

最后在需要展示的控制器里调用axecollectionview,给它传入一个自定义的流水布局和图片数组,大功告成.

示例代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 // 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 axecollectionview static 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背景view uiimageview *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的话,下面这两种同样能做出模糊效果,只不过第一种性能较差,建议大家按需使用.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 // 返回滤镜处理后图片 - (uiimage *)coreblurimage:(uiimage *)image withblurnumber:(cgfloat)blur { cicontext *context = [cicontext contextwithoptions:nil]; ciimage *inputimage= [ciimage imagewithcgimage:image.cgimage]; // 设置filter cifilter *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 up cgcolorspacerelease(colorspace); free(pixelbuffer); cfrelease(inbitmapdata); cgcolorspacerelease(colorspace); cgimagerelease(imageref); return returnimage; }