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

2025-05-29 0 59

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

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开发者们有一定的帮助,如果有疑问大家可以留言交流,谢谢大家对快网idc的支持。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 iOS自定义collectionView实现毛玻璃效果 https://www.kuaiidc.com/91579.html

相关文章

发表评论
暂无评论