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拖拽的,代码中注释掉的 是纯代码使用的方法。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持海外IDC网。
【转自:美国多ip服务器 http://www.558idc.com/mgzq.html 欢迎留下您的宝贵建议】