iOS实现卡片式滚动效果 iOS实现电影选片效果
本文实例为大家分享了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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。