本文实例为大家分享了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
?
|
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
|
#import "viewcontroller.h"
#import "cardscrollview.h"
@interface viewcontroller ()
@property (weak, nonatomic) iboutlet cardscrollview *cardscrollview;
//@property (nonatomic, strong) cardscrollview *cardscrollview;
@property (nonatomic, strong) nsmutablearray<nsstring *> *imgurls;
@end
@implementation viewcontroller
- (nsmutablearray<nsstring *> *)imgurls {
if (!_imgurls) {
_imgurls = [nsmutablearray array];
for (int i = 0; i < 9; i++) {
[_imgurls addobject:[nsstring stringwithformat:@"%d", i + 1]];
}
}
return _imgurls;
}
//- (cardscrollview *)cardscrollview {
// if (!_cardscrollview) {
// _cardscrollview = [[cardscrollview alloc] initwithframe:self.view.bounds];
// _cardscrollview.cardviewwidth = 150;
// _cardscrollview.needbackgroundblurimage = yes;
// }
// return _cardscrollview;
//}
- (void)viewdidappear:(bool)animated {
[super viewdidappear:animated];
// [self.view addsubview:self.cardscrollview];
[_cardscrollview setimgurls:self.imgurls selectedcard:^(nsinteger selectedindex) {
}];
}
@end
|
我一般习惯storyboard开发，所以这里就使用的storyboard拖拽的，代码中注释掉的 是纯代码使用的方法。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持快网idc。
相关文章
猜你喜欢
- 个人网站搭建：如何挑选具有弹性扩展能力的服务器？ 2025-06-10
- 个人服务器网站搭建：如何选择适合自己的建站程序或框架？ 2025-06-10
- 64M VPS建站：能否支持高流量网站运行？ 2025-06-10
- 64M VPS建站：怎样选择合适的域名和SSL证书？ 2025-06-10
- 64M VPS建站：怎样优化以提高网站加载速度？ 2025-06-10
