iOS实现卡片式滚动效果 iOS实现电影选片效果

本文实例为大家分享了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拖拽的，代码中注释掉的 是纯代码使用的方法。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。