320电影网,襄樊晚报,躲美记
先来看看效果图，由于录屏软件不给力，毛玻璃效果不明显，请见谅。
步骤详解:
说下思路,很简单,首先自定义一个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 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的话,下面这两种同样能做出模糊效果,只不过第一种性能较差,建议大家按需使用.
// 返回滤镜处理后图片
- (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;
}
总结
以上就是ios自定义collectionview实现毛玻璃效果的全部内容，希望能对各位ios开发者们有一定的帮助，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
网友评论