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

时间:2021-09-19 14:54:47

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

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

步骤详解:

说下思路,很简单,首先自定义一个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;
}

总结

以上就是ios自定义collectionview实现毛玻璃效果的全部内容,希望能对各位ios开发者们有一定的帮助,如果有疑问大家可以留言交流,谢谢大家对服务器之家的支持。