iOS實(shí)現(xiàn)卡片式滾動(dòng)效果 iOS實(shí)現(xiàn)電影選片效果
本文實(shí)例為大家分享了iOS實(shí)現(xiàn)卡片式滾動(dòng)效果的具體代碼,供大家參考,具體內(nèi)容如下
先來(lái)張效果圖吧:

直接上源碼了:
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 - 根據(jù) CardView 在 X 軸的中心坐標(biāo) 設(shè)置其 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
我一般習(xí)慣Storyboard開(kāi)發(fā),所以這里就使用的Storyboard拖拽的,代碼中注釋掉的 是純代碼使用的方法。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- iOS ScrollView嵌套tableView聯(lián)動(dòng)滾動(dòng)的思路與最佳實(shí)踐
- iOS使用UICollectionView實(shí)現(xiàn)橫向滾動(dòng)照片效果
- iOS自定義時(shí)間滾動(dòng)選擇控件
- iOS自定義水平滾動(dòng)條、進(jìn)度條
- iOS自定義可展示、交互的scrollView滾動(dòng)條
- iOS仿網(wǎng)易新聞滾動(dòng)導(dǎo)航條效果
- iOS Swift UICollectionView橫向分頁(yè)滾動(dòng),cell左右排版問(wèn)題詳解
- iOS?實(shí)現(xiàn)類似抖音滾動(dòng)效果
相關(guān)文章
iOS藍(lán)牙開(kāi)發(fā)數(shù)據(jù)實(shí)時(shí)傳輸
這篇文章主要為大家詳細(xì)介紹了iOS藍(lán)牙開(kāi)發(fā)數(shù)據(jù)實(shí)時(shí)傳輸,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12
iOS App中UILabel的自定義及在Auto Layout中的使用
這篇文章主要介紹了iOS App中UILabel的自定義及在Auto Layout中的使用,示例代碼為傳統(tǒng)的Objective-C語(yǔ)言,需要的朋友可以參考下2016-03-03
詳解iOS應(yīng)用程序的啟動(dòng)過(guò)程
這篇文章主要介紹了iOS應(yīng)用程序的啟動(dòng)過(guò)程,講述了從其執(zhí)行main函數(shù)開(kāi)始到展示UIWindow的流程中的一些關(guān)鍵點(diǎn),需要的朋友可以參考下2016-03-03
IOS計(jì)步器功能實(shí)現(xiàn)之Healthkit和CMPedometer
現(xiàn)在越來(lái)越多的人關(guān)注運(yùn)動(dòng)和健康,iOS系統(tǒng)也在很早的時(shí)候就自帶了健康A(chǔ)PP,下面詳細(xì)描述一下在我們開(kāi)發(fā)中,怎么實(shí)現(xiàn)計(jì)步器功能。2016-08-08
IOS ObjectC與javascript交互詳解及實(shí)現(xiàn)代碼
這篇文章主要介紹了IOS OC與js交互詳解及實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03
iOS10 適配-Xcode8問(wèn)題總結(jié)及解決方案
這篇文章主要介紹了iOS10 適配-Xcode8問(wèn)題總結(jié)的相關(guān)資料,這里整理了遇到的幾種問(wèn)題,并給出解決方案,需要的朋友可以參考下2016-11-11
iOS開(kāi)發(fā)中實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片瀏覽器的實(shí)例講解
這篇文章主要介紹了iOS開(kāi)發(fā)中實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片瀏覽器的實(shí)例講解,代碼基礎(chǔ)傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-01-01

