正文

iOS UICollectionView实现卡片效果

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0702

这篇文章主要为大家详细介绍了iOS UICollectionView实现卡片效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

现在使用卡片效果的app很多，之前公司让实现一种卡片效果，就写了一篇关于实现卡片的文章。文章最后附有demo

实现上我选择了使用uicollectionview ；用uicollectionviewflowlayout来定制样式；下面看看具体实现

具体实现

1、创建uicollectionview

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- (void)createcollectionview {
 cgfloat pading = 0 * screen_width/375;
 lhleftcollocationview * layout = [[lhleftcollocationview alloc]init];
 layout.scrolldirection = uicollectionviewscrolldirectionhorizontal;
 layout.minimumlinespacing = pading;
 layout.minimuminteritemspacing = pading;
// uicollectionviewflowlayout *layout = [[uicollectionviewflowlayout alloc]init];
// layout.scrolldirection = uicollectionviewscrolldirectionhorizontal;
 _collectionview3 = [[uicollectionview alloc] initwithframe:cgrectmake(0, 100, [uiscreen mainscreen].bounds.size.width, imageheight * screen_rate) collectionviewlayout:layout];
 _collectionview3.tag = 33;
 _collectionview3.datasource = self;
 _collectionview3.delegate = self;
 _collectionview3.bounces = no;
 _collectionview3.alwaysbouncehorizontal = no;
 _collectionview3.alwaysbouncevertical = no;
 _collectionview3.backgroundcolor = [uicolor graycolor];
 _collectionview3.showshorizontalscrollindicator = no;
 _collectionview3.showsverticalscrollindicator = no;
 [self.view addsubview:_collectionview3];
 [_collectionview3 registerclass:[collectionviewcell class] forcellwithreuseidentifier:collectionviewcell];
}

2、实现具体代理方法 uicollectionviewdelegate,uicollectionviewdatasource

?
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
- (nsinteger)collectionview:(uicollectionview *)collectionview numberofitemsinsection:(nsinteger)section{
 return self.modelarray.count;
}
 
- (nsmutablearray *)modelarray {
 if (!_modelarray) {
 _modelarray = [nsmutablearray array];
 }
 return _modelarray;
}
 
- (uicollectionviewcell *)collectionview:(uicollectionview *)collectionview cellforitematindexpath:(nsindexpath *)indexpath {
 collmodel *infomodel = self.modelarray[indexpath.row];
 nslog(@"section:%ld --- row:%ld -----%@",indexpath.section,indexpath.row,infomodel.title);
 collectionviewcell * cell = [collectionview dequeuereusablecellwithreuseidentifier:collectionviewcell forindexpath:indexpath];
 cell.itemmodel = infomodel;
 return cell;
}
 
// 返回每个item的大小
- (cgsize)collectionview:(uicollectionview *)collectionview layout:(uicollectionviewlayout *)collectionviewlayout sizeforitematindexpath:(nsindexpath *)indexpath {
 cgfloat cwidth = 80 * screen_rate;
 cgfloat cheight = 80 * screen_rate;
 return cgsizemake(cwidth, cheight);
}
 
 
#pragma mark - uicollectionviewdelegate点击事件
- (void)collectionview:(uicollectionview *)collectionview didselectitematindexpath:(nsindexpath *)indexpath{
 collmodel *infomodel = self.modelarray[indexpath.row];
 nslog(@"infomodelarray----%@",infomodel.title);
}

3、自定义uicollectionviewflowlayout

lhleftcollocationview.m 实现

?
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
#import "lhleftcollocationview.h"
 
@implementation lhleftcollocationview
 
 
- (cgpoint)targetcontentoffsetforproposedcontentoffset:(cgpoint)proposedcontentoffset withscrollingvelocity:(cgpoint)velocity {
 cgrect targectrect = cgrectmake(proposedcontentoffset.x, 0.0, [uiscreen mainscreen].bounds.size.width, [uiscreen mainscreen].bounds.size.height);
 nsarray * attriarray = [super layoutattributesforelementsinrect:targectrect];
 cgfloat horizontalcenterx = proposedcontentoffset.x + ([uiscreen mainscreen].bounds.size.width);
 cgfloat offsetadjustment = cgfloat_max;
 for (uicollectionviewlayoutattributes * layoutattributes in attriarray) {
 cgfloat itemhorizontalcenterx = layoutattributes.center.x;
 if (fabs(itemhorizontalcenterx-horizontalcenterx) < fabs(offsetadjustment)) {
  offsetadjustment = itemhorizontalcenterx - horizontalcenterx;
 }
 }
 return cgpointmake(proposedcontentoffset.x , proposedcontentoffset.y);
}
 
cgfloat activedistance = 400; //垂直缩放除以系数
cgfloat scalefactor = 0.50; //缩放系数 越大缩放越大
 
- (nsarray<uicollectionviewlayoutattributes *> *)layoutattributesforelementsinrect:(cgrect)rect {
 nsarray * array = [super layoutattributesforelementsinrect:rect];
 cgrect visiblerect = cgrectzero;
 visiblerect.origin = self.collectionview.contentoffset;
 visiblerect.size = self.collectionview.bounds.size;
 for (uicollectionviewlayoutattributes *attributes in array) {
 cgfloat distance = cgrectgetmidx(visiblerect) - attributes.center.x;
 cgfloat normalizeddistance = fabs(distance / activedistance);
 cgfloat zoom = 1 - scalefactor * normalizeddistance;
 nslog(@"zoom----%f",zoom);
 attributes.transform3d = catransform3dmakescale(1.0, zoom, 1.0);
 //底部显示效果
 attributes.frame = cgrectmake(attributes.frame.origin.x, attributes.frame.origin.y + zoom, attributes.size.width, attributes.size.height);
 //居中显示效果
// cgfloat scrolldirectionitemheight = self.itemsize.height;
// cgfloat sideitemfixedoffset = 0;
// sideitemfixedoffset = (scrolldirectionitemheight - scrolldirectionitemheight * 0.7) / 2;
// attributes.center = cgpointmake(attributes.center.x, attributes.center.y + zoom);
 
 }
 return array;
}
 
////设置放大动画
//-(nsarray<uicollectionviewlayoutattributes *> *)layoutattributesforelementsinrect:(cgrect)rect
//{
// nsarray *arr = [self getcopyofattributes:[super layoutattributesforelementsinrect:rect]];
// //屏幕中线
// cgfloat centerx = self.collectionview.contentoffset.x + self.collectionview.bounds.size.width/2.0f;
// //刷新cell缩放
// for (uicollectionviewlayoutattributes *attributes in arr) {
// cgfloat distance = fabs(attributes.center.x - centerx);
// //移动的距离和屏幕宽度的的比例
// cgfloat apartscale = distance/self.collectionview.bounds.size.width;
// //把卡片移动范围固定到 -π/4到 +π/4这一个范围内
// cgfloat scale = fabs(cos(apartscale * m_pi/4));
// //设置cell的缩放 按照余弦函数曲线 越居中越趋近于1
// attributes.transform = cgaffinetransformmakescale(1.0, scale);
// }
// return arr;
/
1 本网站名称：米米素材网
2 本站永久网址：https://www.mimisucai.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

相关阅读

发表评论

说点什么吧
  • 全部评论（0）
    还没有评论，快来抢沙发吧！
取消
微信二维码
微信二维码
支付宝二维码
TAGS标签 充值帮助(？) 广告投放 网站地图 关于我们 用户协议 版权声明

Copyright2015-2023米米素材网收集了国内优质的素材网站大全. 涵盖PPT模板、海报、PSD素材、Word模板、元素、Excel表格、字体、CAD、广告设计、网站源码资源以及编程代码学习，为建站开发人员提供优质的服务。

本站采用创作共用版权. 基于DedeCMS搭建. 安全运行天 许可协议，转载或复制请注明出处

苏ICP备2022017718号苏ICP备2022017718号苏公网安备 32058502010603号苏公网安备 32058502010603号

微信公众号