OC三方框架02：SDCycleScrollView探索

原理

SDSycleScrollView 的 原理 是基于 UICollectionView 的 重用机制 和 循环滚动的方式实现图片的轮播滚动功能。

主要功能

1.简单易用的图片无限轮播
2.支持横向、竖向两种滑动方式
3.支持轮播自定义cell的代理方
法
4.增加禁止拖动手势api

集成 SDSyscleScrollView

现在的主流集成方式都是基于依赖管理工具Cocoapods来集成SDSyscleScrollView的，而 SDSyscleScrollView 是依赖 SDWebImage 显示网络数据的，但是这个框架不用我们自己去集成，当你集成 SDSyscleScrollView 时，会自动集成依赖的SDWebImage 库，具体集成流程如下：

1. 首先，保证你的项目是基于Cocoapods依赖管理工具集成的项目，具体的集成文档自行百度。

2. 在终端输入 pod search SDSyscleScrollView 查看这个库的信息：

mac@MacdeMBP ~ % pod search SDCycleScrollView
/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/universal-darwin19/rbconfig.rb:229: warning: Insecure world writable dir /usr/local/sbin in PATH, mode 040777

稍等一会，你会看到下面的列表信息：

由列表信息我们知道当前的 SDSyscleScrollView 的版本是 1.80， 且 适配 SDWebImage 5.0.0版本。

3.复制上面的 pod 'SDCycleScrollView , 在底部 : 号后面输入 wq，保存并退出，此时你可以到项目中的Podfile文件下 粘贴 你的复制的内容：

注：

• pod 'SDCycleScrollView：意味着你只安装最新的版本
• pod 'SDCycleScrollView', '~> 1.80‘：意味着你安装的是固定版本 1.80

4. cd 到工程主目录下，终端输入 pod install 命令，等待安装完成：

源码解读

1. 在 SDSyscleScrollView 类中可以看到初始化方式有四种：

/** 初始轮播图（推荐使用） */
+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame delegate:(id<SDCycleScrollViewDelegate>)delegate placeholderImage:(UIImage *)placeholderImage;

+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame imageURLStringsGroup:(NSArray *)imageURLStringsGroup;


/** 本地图片轮播初始化方式 */
+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame imageNamesGroup:(NSArray *)imageNamesGroup;

/** 本地图片轮播初始化方式2,infiniteLoop:是否无限循环 */
+ (instancetype)cycleScrollViewWithFrame:(CGRect)frame shouldInfiniteLoop:(BOOL)infiniteLoop imageNamesGroup:(NSArray *)imageNamesGroup;

2. 数据源

//////////////////////  数据源API //////////////////////

/** 网络图片 url string 数组 */
@property (nonatomic, strong) NSArray *imageURLStringsGroup;

/** 每张图片对应要显示的文字数组 */
@property (nonatomic, strong) NSArray *titlesGroup;

/** 本地图片数组 */
@property (nonatomic, strong) NSArray *localizationImageNamesGroup;

3. 滚动控制API

//////////////////////  滚动控制API //////////////////////

/** 自动滚动间隔时间,默认2s */
@property (nonatomic, assign) CGFloat autoScrollTimeInterval;

/** 是否无限循环,默认Yes */
@property (nonatomic,assign) BOOL infiniteLoop;

/** 是否自动滚动,默认Yes */
@property (nonatomic,assign) BOOL autoScroll;

/** 图片滚动方向，默认为水平滚动 */
@property (nonatomic, assign) UICollectionViewScrollDirection scrollDirection;

@property (nonatomic, weak) id<SDCycleScrollViewDelegate> delegate;

/** block方式监听点击 */
@property (nonatomic, copy) void (^clickItemOperationBlock)(NSInteger currentIndex);

/** block方式监听滚动 */
@property (nonatomic, copy) void (^itemDidScrollOperationBlock)(NSInteger currentIndex);

/** 可以调用此方法手动控制滚动到哪一个index */
- (void)makeScrollViewScrollToIndex:(NSInteger)index;

/** 解决viewWillAppear时出现时轮播图卡在一半的问题，在控制器viewWillAppear时调用此方法 */
- (void)adjustWhenControllerViewWillAppera;

4. 自定义样式API

//////////////////////  自定义样式API  //////////////////////

/** 轮播图片的ContentMode，默认为 UIViewContentModeScaleToFill */
@property (nonatomic, assign) UIViewContentMode bannerImageViewContentMode;

/** 占位图，用于网络未加载到图片时 */
@property (nonatomic, strong) UIImage *placeholderImage;

/** 是否显示分页控件 */
@property (nonatomic, assign) BOOL showPageControl;

/** 是否在只有一张图时隐藏pagecontrol，默认为YES */
@property(nonatomic) BOOL hidesForSinglePage;

/** 只展示文字轮播 */
@property (nonatomic, assign) BOOL onlyDisplayText;

/** pagecontrol 样式，默认为动画样式 */
@property (nonatomic, assign) SDCycleScrollViewPageContolStyle pageControlStyle;

/** 分页控件位置 */
@property (nonatomic, assign) SDCycleScrollViewPageContolAliment pageControlAliment;

/** 分页控件距离轮播图的底部间距（在默认间距基础上）的偏移量 */
@property (nonatomic, assign) CGFloat pageControlBottomOffset;

/** 分页控件距离轮播图的右边间距（在默认间距基础上）的偏移量 */
@property (nonatomic, assign) CGFloat pageControlRightOffset;

/** 分页控件小圆标大小 */
@property (nonatomic, assign) CGSize pageControlDotSize;

/** 当前分页控件小圆标颜色 */
@property (nonatomic, strong) UIColor *currentPageDotColor;

/** 其他分页控件小圆标颜色 */
@property (nonatomic, strong) UIColor *pageDotColor;

/** 当前分页控件小圆标图片 */
@property (nonatomic, strong) UIImage *currentPageDotImage;

/** 其他分页控件小圆标图片 */
@property (nonatomic, strong) UIImage *pageDotImage;

/** 轮播文字label字体颜色 */
@property (nonatomic, strong) UIColor *titleLabelTextColor;

/** 轮播文字label字体大小 */
@property (nonatomic, strong) UIFont  *titleLabelTextFont;

/** 轮播文字label背景颜色 */
@property (nonatomic, strong) UIColor *titleLabelBackgroundColor;

/** 轮播文字label高度 */
@property (nonatomic, assign) CGFloat titleLabelHeight;

/** 轮播文字label对齐方式 */
@property (nonatomic, assign) NSTextAlignment titleLabelTextAlignment;

/** 滚动手势禁用（文字轮播较实用） */
- (void)disableScrollGesture;

5. 缓存

//////////////////////  清除缓存API  //////////////////////

/** 清除图片缓存（此次升级后统一使用SDWebImage管理图片加载和缓存）  */
+ (void)clearImagesCache;

/** 清除图片缓存（兼容旧版本方法） */
- (void)clearCache;

6. 代理

@protocol SDCycleScrollViewDelegate <NSObject>

@optional

/** 点击图片回调 */
- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didSelectItemAtIndex:(NSInteger)index;

/** 图片滚动回调 */
- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didScrollToIndex:(NSInteger)index;


// 不需要自定义轮播cell的请忽略以下两个的代理方法

// ========== 轮播自定义cell ==========

/** 如果你需要自定义cell样式，请在实现此代理方法返回你的自定义cell的class。 */
- (Class)customCollectionViewCellClassForCycleScrollView:(SDCycleScrollView *)view;

/** 如果你需要自定义cell样式，请在实现此代理方法返回你的自定义cell的Nib。 */
- (UINib *)customCollectionViewCellNibForCycleScrollView:(SDCycleScrollView *)view;

/** 如果你自定义了cell样式，请在实现此代理方法为你的cell填充数据以及其它一系列设置 */
- (void)setupCustomCell:(UICollectionViewCell *)cell forIndex:(NSInteger)index cycleScrollView:(SDCycleScrollView *)view;

@end

由代理可知，实际上有两个功能

• 回调的滚动和点击事件
• 自动以cell样式

项目中使用 SDSyscleScrollView

由于实际项目中，轮播图的主要应用是展示网络图片，并点击能进入下一个控制器，因此，下面我主要介绍这种类型功能的使用：

1. 声明属性，并初始化（使用推荐方式），设置占位图

@interface SDSyscleScrollViewVC ()<SDCycleScrollViewDelegate>
@property (nonatomic,strong)SDCycleScrollView * scrollV;
@property (nonatomic,copy)NSArray * imgsArr;
@end

#pragma mark -懒加载
- (SDCycleScrollView *)scrollV{
    if (!_scrollV) {
        _scrollV = [SDCycleScrollView cycleScrollViewWithFrame:CGRectMake(0, kNavAndStatusHeight, kScreenWidth, 200) delegate:self placeholderImage:kImg(@"placeholder")];
        _scrollV.backgroundColor = kRandomColor;
    }
    return _scrollV;
}
- (NSArray *)imgsArr{
    if (!_imgsArr) {
        _imgsArr = @[
            @"https://user-images.githubusercontent.com/25925248/94383795-9a81d980-0173-11eb-8b6b-df2e3fa7f139.png",
            @"https://user-images.githubusercontent.com/25925248/94384327-e719e480-0174-11eb-9a54-797a578b4a3a.png",
            @"https://user-images.githubusercontent.com/25925248/94384868-3c0a2a80-0176-11eb-958c-054e19244d4e.png"];
    }
    return _imgsArr;
}

2. 添加到要显示的view上

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = kWhiteColor;
    
    // scrollV
    [self.view addSubview:self.scrollV];
    
}

3. 设置相关API
   具体可以参照上面API去设置，得到你想要的效果

4. 待网络请求成功，返回图片数据时，设置图片数据

self.scrollV.imageURLStringsGroup = self.imgArr;    

5. 通过代码方法可以得到你要下标和你要跳转的设置

#pragma mark -SDCycleScrollViewDelegate
// 点击图片的回调
- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didSelectItemAtIndex:(NSInteger)index{
    NSLog(@"index:%ld",index);
}
// 图片滚动回调
- (void)cycleScrollView:(SDCycleScrollView *)cycleScrollView didScrollToIndex:(NSInteger)index{
    NSLog(@"index:%ld",index);
}

6. 经过上面的基本设置，已经可以满足你的需求了，如果还未满足，那么你可以自定义cell去实现，是继承自 CollectionViewCell ：

.h中实现

@interface SDSyscleScrollViewVC ()<SDCycleScrollViewDelegate>
@property (nonatomic,strong)SDCycleScrollView * scrollV;
@property (nonatomic,copy)NSArray * imgsArr;
@end

.m中实现

@implementation SDCell
- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        [self initUI];
    }
    return self;
}

- (void)initUI{
    [self.contentView addSubview:self.img];
    [self.img mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.mas_equalTo(UIEdgeInsetsMake(0, 0, 0, 0));
    }];
}

- (UIImageView *)img{
    if (!_img) {
        _img = [UIImageView initImgVWithFrame:CGRectZero bgColor:kRandomColor img:kPlaceholder userInteractionEnabled:YES hidden:NO];
    }
    return _img;
}

@end

在viewDidLoad中实现

// 如果你需要自定义cell样式，请在实现此代理方法返回你的自定义cell的class
- (Class)customCollectionViewCellClassForCycleScrollView:(SDCycleScrollView *)view{
    SDCell * cell = [[SDCell alloc] init];
    cell.backgroundColor = kRandomColor;
    
    return cell.class;
}
// 如果你自定义了cell样式，请在实现此代理方法为你的cell填充数据以及其它一系列设置
- (void)setupCustomCell:(UICollectionViewCell *)cell forIndex:(NSInteger)index cycleScrollView:(SDCycleScrollView *)view{
    SDCell * sdCell = (SDCell *)cell;
    [sdCell.img sd_setImageWithURL:kUrl(self.imgsArr[index])];
}