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

2023-07-31 21:26:04 272

本文实例为大家分享了iOS实现卡片式滚动效果的具体代码，供大家参考，具体内容如下

先来张效果图吧：

直接上源码了：

CardScrollView.h

#import

@interfaceCardView:UIView

@property(nonatomic,assign)CGFloatzoomRate;

@property(nonatomic,strong)NSString*imgUrl;

-(UIImage*)getImage;

@end

@interfaceCardScrollView:UIView

@property(nonatomic,assign)CGFloatcardViewWidth;
@property(nonatomic,assign)CGFloatminCardZoomRate;
@property(nonatomic,assign)CGFloatmaxCardZoomRate;

@property(nonatomic,assign)BOOLneedBackgroundBlurImage;

-(void)setImgUrls:(NSArray*)imgUrlsselectedCard:(void(^)(NSIntegerselectedIndex))selectedCard;

@end

CardScrollView.m

#import"CardScrollView.h"

@interfaceCardView()

@property(nonatomic,strong)UIImageView*imgView;

@end

@implementationCardView

-(instancetype)initWithFrame:(CGRect)frame{
if(self=[superinitWithFrame:frame]){
_imgView=[[UIImageViewalloc]initWithFrame:CGRectMake(0,0,CGRectGetWidth(frame),CGRectGetHeight(frame))];
[_imgViewsetContentMode:UIViewContentModeScaleAspectFit];
[_imgViewsetClipsToBounds:YES];
[selfaddSubview:_imgView];
}
returnself;
}

-(void)setZoomRate:(CGFloat)zoomRate{
if(zoomRate<0){
zoomRate=0;
}
_zoomRate=zoomRate;
CGFloatwidth=CGRectGetWidth(self.bounds);
CGFloatheight=CGRectGetHeight(self.bounds);
CGFloatimgViewWidth=width*zoomRate;
CGFloatimgViewHeight=height*zoomRate;
_imgView.frame=CGRectMake((width-imgViewWidth)/2,(height-imgViewHeight)/2,imgViewWidth,imgViewHeight);
}

-(void)setImgUrl:(NSString*)imgUrl{
_imgUrl=imgUrl;
[_imgViewsetImage:[UIImageimageNamed:imgUrl]];
}

-(UIImage*)getImage{
return[_imgViewimage];
}

@end

@interfaceCardScrollView()

@property(nonatomic,strong)UIImageView*bgImageView;
@property(nonatomic,strong)UIVisualEffectView*blurView;

@property(nonatomic,strong)UIScrollView*scrollView;
@property(nonatomic,assign)CGFloataroundSpacing;
@property(nonatomic,strong)NSArray*imgUrls;
@property(nonatomic,strong)NSMutableArray*cardViewArray;
@property(nonatomic,assign)NSIntegercurrentIndex;

@property(nonatomic,strong)void(^selectedCard)(NSInteger);

@end

@implementationCardScrollView

-(UIImageView*)bgImageView{
if(!_bgImageView){
_bgImageView=[[UIImageViewalloc]initWithFrame:self.bounds];
}
return_bgImageView;
}


-(UIVisualEffectView*)blurView{
if(!_blurView){
[selfaddSubview:self.bgImageView];
_blurView=[[UIVisualEffectViewalloc]initWithFrame:self.bounds];
[_blurViewsetEffect:[UIBlurEffecteffectWithStyle:UIBlurEffectStyleLight]];
}
return_blurView;
}

-(UIScrollView*)scrollView{
if(!_scrollView){
_scrollView=[[UIScrollViewalloc]initWithFrame:self.bounds];
_scrollView.delegate=self;
[_scrollViewsetShowsHorizontalScrollIndicator:NO];
}
return_scrollView;
}

-(NSMutableArray*)cardViewArray{
if(!_cardViewArray){
_cardViewArray=[NSMutableArrayarray];
}
return_cardViewArray;
}

-(void)layoutSubviews{
[superlayoutSubviews];
if(_needBackgroundBlurImage){
[selfaddSubview:self.blurView];
}
[selfaddSubview:self.scrollView];
}

-(void)setImgUrls:(NSArray*)imgUrlsselectedCard:(void(^)(NSInteger))selectedCard{
_imgUrls=imgUrls;
_selectedCard=selectedCard;
[selflayoutCardViews];
}

-(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(inti=0;i<[_imgUrlscount];i++){
CardView*cardView=[[CardViewalloc]initWithFrame:CGRectMake(_aroundSpacing+i*(_cardViewWidth),0,_cardViewWidth,CGRectGetHeight(self.bounds))];
cardView.zoomRate=_minCardZoomRate;
cardView.imgUrl=_imgUrls[i];
cardView.tag=i;
UITapGestureRecognizer*tapGr=[[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(clickCardView:)];
[cardViewaddGestureRecognizer:tapGr];
[_scrollViewaddSubview:cardView];
[self.cardViewArrayaddObject:cardView];
}
[_scrollViewsetContentSize:CGSizeMake(CGRectGetMaxX([_cardViewArraylastObject].frame)+_aroundSpacing,0)];
[selfsetCardViewZoomRate:[_cardViewArrayfirstObject]];
[selfselectIndex:0];
}

-(void)clickCardView:(UIGestureRecognizer*)gestureCognizer{
[selfselectIndex:gestureCognizer.view.tag];
}

-(void)selectIndex:(NSInteger)index{
_currentIndex=index;
CardView*cardView=_cardViewArray[index];
[_scrollViewsetContentOffset:CGPointMake(CGRectGetMidX(cardView.frame)-CGRectGetWidth(_scrollView.frame)/2,0)animated:YES];
if(_needBackgroundBlurImage){
[_bgImageViewsetImage:[cardViewgetImage]];
}
if(_selectedCard){
_selectedCard(index);
}
}

#pragmamark-根据CardView在X轴的中心坐标设置其ZoomRate
-(void)setCardViewZoomRate:(CardView*)cardView{
CGFloatoffsetRate=ABS(_scrollView.contentOffset.x+CGRectGetWidth(_scrollView.frame)/2-CGRectGetMidX(cardView.frame))/_cardViewWidth;
CGFloatzoomRate=_maxCardZoomRate-offsetRate;
if(zoomRate<_minCardZoomRate){
zoomRate=_minCardZoomRate;
}
[_scrollViewbringSubviewToFront:cardView];
[cardViewsetZoomRate:zoomRate];
}

#pragmamark-UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView*)scrollView{
NSIntegerindex=floorf((scrollView.contentOffset.x-_aroundSpacing+CGRectGetWidth(_scrollView.frame)/2)/_cardViewWidth);
if(index<0){
index=0;
}
if(index>[_cardViewArraycount]-1){
index=[_cardViewArraycount];
}
[selfsetCardViewZoomRate:_cardViewArray[index]];
}

-(void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView{
intindex=(scrollView.contentOffset.x-_aroundSpacing+CGRectGetWidth(_scrollView.frame)/2)/_cardViewWidth;
[selfselectIndex:index];
}

-(void)scrollViewDidEndDragging:(UIScrollView*)scrollViewwillDecelerate:(BOOL)decelerate{
if(!decelerate){
[selfscrollViewDidEndDecelerating:scrollView];
}
}

@end

使用：ViewController.m

#import"ViewController.h"
#import"CardScrollView.h"

@interfaceViewController()

@property(weak,nonatomic)IBOutletCardScrollView*cardScrollView;
//@property(nonatomic,strong)CardScrollView*cardScrollView;

@property(nonatomic,strong)NSMutableArray*imgUrls;

@end

@implementationViewController

-(NSMutableArray*)imgUrls{
if(!_imgUrls){
_imgUrls=[NSMutableArrayarray];
for(inti=0;i<9;i++){
[_imgUrlsaddObject:[NSStringstringWithFormat:@"%d",i+1]];
}
}
return_imgUrls;
}

//-(CardScrollView*)cardScrollView{
//if(!_cardScrollView){
//_cardScrollView=[[CardScrollViewalloc]initWithFrame:self.view.bounds];
//_cardScrollView.cardViewWidth=150;
//_cardScrollView.needBackgroundBlurImage=YES;
//}
//return_cardScrollView;
//}

-(void)viewDidAppear:(BOOL)animated{
[superviewDidAppear:animated];
//[self.viewaddSubview:self.cardScrollView];
[_cardScrollViewsetImgUrls:self.imgUrlsselectedCard:^(NSIntegerselectedIndex){

}];
}

@end

我一般习惯Storyboard开发，所以这里就使用的Storyboard拖拽的，代码中注释掉的是纯代码使用的方法。

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐