恐龙战队全集,mangadowner,白智英事件
本文实例为大家分享了ios实现卡片式滚动效果的具体代码，供大家参考，具体内容如下
先来张效果图吧：
直接上源码了：
cardscrollview.h
#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
我要评论
#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
#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拖拽的，代码中注释掉的 是纯代码使用的方法。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
网友评论