这篇文章主要为大家详细介绍了iOS实现卡片式滚动效果，实现电影选片效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
这篇文章主要为大家详细介绍了iOS实现卡片式滚动效果，实现电影选片效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
正文
iOS实现卡片式滚动效果 iOS实现电影选片效果
本文实例为大家分享了ios实现卡片式滚动效果的具体代码，供大家参考，具体内容如下
先来张效果图吧：
直接上源码了：
cardscrollview.h
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
#import <uikit/uikit.h> @interface cardview : uiview @property (nonatomic, assign) cgfloat zoomrate; @property (nonatomic, strong) nsstring *imgurl; - (uiimage *)getimage; @end @interface cardscrollview : uiview @property (nonatomic, assign) cgfloat cardviewwidth;@property (nonatomic, assign) cgfloat mincardzoomrate;@property (nonatomic, assign) cgfloat maxcardzoomrate; @property (nonatomic, assign) bool needbackgroundblurimage; - (void)setimgurls:(nsarray<nsstring *> *)imgurls selectedcard:(void(^)(nsinteger selectedindex))selectedcard; @end |
cardscrollview.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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
|
#import "cardscrollview.h" @interface cardview () @property (nonatomic, strong) uiimageview *imgview; @end @implementation cardview - (instancetype)initwithframe:(cgrect)frame { if (self = [super initwithframe:frame]) { _imgview = [[uiimageview alloc] initwithframe:cgrectmake(0, 0, cgrectgetwidth(frame), cgrectgetheight(frame))]; [_imgview setcontentmode:uiviewcontentmodescaleaspectfit]; [_imgview setclipstobounds:yes]; [self addsubview:_imgview]; } return self;} - (void)setzoomrate:(cgfloat)zoomrate { if (zoomrate < 0) { zoomrate = 0; } _zoomrate = zoomrate; cgfloat width = cgrectgetwidth(self.bounds); cgfloat height = cgrectgetheight(self.bounds); cgfloat imgviewwidth = width * zoomrate; cgfloat imgviewheight = height * zoomrate; _imgview.frame = cgrectmake((width - imgviewwidth) / 2, (height - imgviewheight) / 2, imgviewwidth, imgviewheight);} - (void)setimgurl:(nsstring *)imgurl { _imgurl = imgurl; [_imgview setimage:[uiimage imagenamed:imgurl]];} - (uiimage *)getimage { return [_imgview image];} @end @interface cardscrollview () <uiscrollviewdelegate> @property (nonatomic, strong) uiimageview *bgimageview;@property (nonatomic, strong) uivisualeffectview *blurview; @property (nonatomic, strong) uiscrollview *scrollview;@property (nonatomic, assign) cgfloat aroundspacing;@property (nonatomic, strong) nsarray<nsstring *> *imgurls;@property (nonatomic, strong) nsmutablearray<cardview *> *cardviewarray;@property (nonatomic, assign) nsinteger currentindex; @property (nonatomic, strong) void(^selectedcard)(nsinteger); @end @implementation cardscrollview - (uiimageview *)bgimageview { if (!_bgimageview) { _bgimageview = [[uiimageview alloc] initwithframe:self.bounds]; } return _bgimageview;} - (uivisualeffectview *)blurview { if (!_blurview) { [self addsubview:self.bgimageview]; _blurview = [[uivisualeffectview alloc] initwithframe:self.bounds]; [_blurview seteffect:[uiblureffect effectwithstyle:uiblureffectstylelight]]; } return _blurview;} - (uiscrollview *)scrollview { if (!_scrollview) { _scrollview = [[uiscrollview alloc] initwithframe:self.bounds]; _scrollview.delegate = self; [_scrollview setshowshorizontalscrollindicator:no]; } return _scrollview;} - (nsmutablearray<cardview *> *)cardviewarray { if (!_cardviewarray) { _cardviewarray = [nsmutablearray array]; } return _cardviewarray;} - (void)layoutsubviews { [super layoutsubviews]; if (_needbackgroundblurimage) { [self addsubview:self.blurview]; } [self addsubview:self.scrollview];} - (void)setimgurls:(nsarray<nsstring *> *)imgurls selectedcard:(void (^)(nsinteger))selectedcard { _imgurls = imgurls; _selectedcard = selectedcard; [self layoutcardviews];} - (void)layoutcardviews { if (_cardviewwidth == 0) { _cardviewwidth = cgrectgetwidth(self.bounds) / 2; } if (_mincardzoomrate == 0) { _mincardzoomrate = 0.5; } if (_maxcardzoomrate == 0) { _maxcardzoomrate = 1; } _aroundspacing = (cgrectgetwidth(self.bounds) - _cardviewwidth) / 2; for (int i = 0; i < [_imgurls count]; i++) { cardview *cardview = [[cardview alloc] initwithframe:cgrectmake(_aroundspacing + i * (_cardviewwidth), 0, _cardviewwidth, cgrectgetheight(self.bounds))]; cardview.zoomrate = _mincardzoomrate; cardview.imgurl = _imgurls[i]; cardview.tag = i; uitapgesturerecognizer *tapgr = [[uitapgesturerecognizer alloc] initwithtarget:self action:@selector(clickcardview:)]; [cardview addgesturerecognizer:tapgr]; [_scrollview addsubview:cardview]; [self.cardviewarray addobject:cardview]; } [_scrollview setcontentsize:cgsizemake(cgrectgetmaxx([_cardviewarray lastobject].frame) + _aroundspacing, 0)]; [self setcardviewzoomrate:[_cardviewarray firstobject]]; [self selectindex:0];} - (void)clickcardview:(uigesturerecognizer *)gesturecognizer { [self selectindex:gesturecognizer.view.tag];} - (void)selectindex:(nsinteger)index { _currentindex = index; cardview *cardview = _cardviewarray[index]; [_scrollview setcontentoffset:cgpointmake(cgrectgetmidx(cardview.frame) - cgrectgetwidth(_scrollview.frame) / 2, 0) animated:yes]; if (_needbackgroundblurimage) { [_bgimageview setimage:[cardview getimage]]; } if (_selectedcard) { _selectedcard(index); }} #pragma mark - 根据 cardview 在 x 轴的中心坐标 设置其 zoomrate- (void)setcardviewzoomrate:(cardview *)cardview { cgfloat offsetrate = abs(_scrollview.contentoffset.x + cgrectgetwidth(_scrollview.frame) / 2 - cgrectgetmidx(cardview.frame)) / _cardviewwidth; cgfloat zoomrate = _maxcardzoomrate - offsetrate; if (zoomrate < _mincardzoomrate) { zoomrate = _mincardzoomrate; } [_scrollview bringsubviewtofront:cardview]; [cardview setzoomrate:zoomrate];} #pragma mark - uiscrollview delegate- (void)scrollviewdidscroll:(uiscrollview *)scrollview { nsinteger index = floorf((scrollview.contentoffset.x - _aroundspacing + cgrectgetwidth(_scrollview.frame) / 2) / _cardviewwidth); if (index < 0) { index = 0; } if (index > [_cardviewarray count] - 1) { index = [_cardviewarray count]; } [self setcardviewzoomrate:_cardviewarray[index]];} - (void)scrollviewdidenddecelerating:(uiscrollview *)scrollview { int index = (scrollview.contentoffset.x - _aroundspacing + cgrectgetwidth(_scrollview.frame) / 2) / _cardviewwidth; [self selectindex:index];} - (void)scrollviewdidenddragging:(uiscrollview *)scrollview willdecelerate:(bool)decelerate { if (!decelerate) { [self scrollviewdidenddecelerating:scrollview]; }} @end |
使用：viewcontroller.m
发表评论