iOS轮播图封装 ECAutoScrollBanner

ECAutoScrollBanner

轮播图封装。可以实现自动定时翻页、手动翻页；垂直和水平滚动等。支持纯文本、本地图片、网络图片以及其他view试图。

bug fix：

  1. 创建view试图类的轮播图优化修复。（注意：view视图类的轮播中，view的坐标是相对于cell.contentView的坐标，是contentView的子视图）

Github：https://github.com/EchoZuo/ECAutoScrollBanner

Navigation 导航

Abstract 概要

简介&特性

轮播图封装，网上有很多现成的demo，也没什么难度。这个是很早之前写过的轮播图封装，这次正好需要就重新整理一下发出来，希望能帮助到需要的人。

  • 支持手动翻页、自动定时翻页
  • 支持垂直和水平滚动
  • 支持本地图片、网络图片、纯文本以及其他View视图，如图文混合排版的视图等。
  • 支持设置展示和隐藏pageControl和自定义pageControl的frame
  • 可以做简便修改，将需要的特定属性开放使用

效果图

image

Explain 说明

实现方式

轮播图基本实现思路有如下几种，本次封装使用的是第一种方式，用UICollectionView实现。
  1. 基于UICollectionView的封装（推荐使用）
    1. 实现简便，使用方便，并且实现代码也不复杂；
    2. 大量加载和滚动或者自动轮播的时候基本不需要考虑重用性能等问题
  2. 用UIScrollView+UIImageView的方式实现A
    1. 用户看到的是多个UIImageView的实现方式；
    2. 如果数据太多，需要考虑到重用等性能问题；
    3. 如果底层是UITableView并且轮播图是作为cell的话，更需要考虑到tableView嵌套scrollView的滚动性能问题。
  3. 用UIScrollView+UIImageView的方式实现B
    1. 只需要创建3个UIImageView，不需要考虑重用问题；
    2. 与第二种不同的就是用户永远看到的是中间那个UIImageView，只是上面的内容再不断变化，其内部实现其实是在不断的改变那个轮播数组。
  4. 只有一个UIImageView
    1. 这种实现方式不再基于ScrollView，同样不存在重用等的问题。这种实现方式跟第三种有相似之处，但是它跟第三种的区别是不再使用scrollView的图片切换方式。还是不停地去改变这个数组的内容。这种实现方式的核心在于切换的时候使用自定义的layer层的转场动画。模拟scrollView的滑动效果。
本次封装实现思路

  • 底层采用UICollectionView当控制器。给原数据源下标0位添加原数据源末尾数据，给元数据源下标末尾添加原数据源0位的数据。以此形成一个新的数据源。可以参考下图


    image
支持手动翻页和定时翻页
  • 手动翻页没什么可说的。自动翻页其实就是一个简单的定时器（用NSTimer和GCD都ok）实现定时调用对应的翻页方法即可。
支持竖向垂直翻页和水平翻页
typedef NS_ENUM(NSInteger, ECAutoScrollBannerScrollDirection){
    ECAutoScrollBannerScrollDirectionVertical       = 1,    // 竖向滚动
    ECAutoScrollBannerScrollDirectionHorizontal     = 0,    // 横向滚动
};

详细介绍

开放的一些设置属性（代码中注释都很详细，也可以直接翻看源码即可）
/**
 * delegate，非必
 */
@property (nonatomic, weak) id<ECAutoScrollBannerDelegate> delegate;

/**
 * 是否自动翻页，默认NO，非必
 */
@property (nonatomic, assign) BOOL isAutoPaging;

/**
 * 是否展示PageControl，默认YES，非必
 */
@property (nonatomic, assign) BOOL isHavePageControl;

/**
 * 是否无限循环，默认NO，非必
 */
@property (nonatomic, assign) BOOL isInfinitePaging;

/**
 * 自动翻页的时候知否支持手动滑动，必须在isAutoPaging=YES时候设置才有效果，if isAutoPaging=YES，则这个必须设置
 */
@property (nonatomic, assign) BOOL isEnabledPanGestureRecognizer;

/**
 * collectionView backgroundColor，默认lightGrayColor，非必
 */
@property (nonatomic, strong) UIColor *collectionViewBgColor;

/**
 * 可以自定义pageControl的frame（相对于self），必须isHavePageControl=YES，如果没有设置新坐标，则取默认坐标，非必
 */
@property (nonatomic, assign) CGRect pageControlFrame;

/**
 * 自动翻页间隔时间。需isAutoPaging=YES才需要设置，否则设置什么效果。默认3.0f
 */
@property (nonatomic, assign) CGFloat  autoPageInterval;
主要的一些计算
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (self.isAutoPaging) {
        scrollView.panGestureRecognizer.enabled = self.isEnabledPanGestureRecognizer;
    }
    
    NSInteger page = 0;
    
    // 是否无限循环
    if (!self.isInfinitePaging) {
        if (self.bannerScrollDirection == ECAutoScrollBannerScrollDirectionHorizontal) {
            page = scrollView.contentOffset.x / scrollView.frame.size.width;
        } else {
            page = scrollView.contentOffset.y / scrollView.frame.size.height;
        }
        self.pageControl.currentPage = page;
    } else {
        if (self.bannerScrollDirection == ECAutoScrollBannerScrollDirectionHorizontal) {
            page = scrollView.contentOffset.x / scrollView.frame.size.width;
            
            // 第一张
            if ((page == 0) && (scrollView.contentOffset.x <= 30)) {
                page = self.mainDataSource.count - 2;
                
                NSIndexPath *indexPath = [NSIndexPath indexPathForItem:page inSection:0];
                [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
            } else if ((page == self.mainDataSource.count - 1) && (scrollView.contentOffset.x >= scrollView.contentSize.width - scrollView.frame.size.width - 30)) {
                // 最后一张
                page = 0 + 1;
                NSIndexPath *indexPath = [NSIndexPath indexPathForItem:page inSection:0];
                [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
            }
        } else {
            page = scrollView.contentOffset.y / scrollView.frame.size.height;
            
            // 第一张
            if ((page == 0) && (scrollView.contentOffset.y <= 30)) {
                page = self.mainDataSource.count - 2;
                
                NSIndexPath *indexPath = [NSIndexPath indexPathForItem:page inSection:0];
                [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
            } else if ((page == self.mainDataSource.count - 1) && (scrollView.contentOffset.y >= scrollView.contentSize.height - scrollView.frame.size.height - 30)) {
                // 最后一张
                page = 0 + 1;
                NSIndexPath *indexPath = [NSIndexPath indexPathForItem:page inSection:0];
                [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
            }
        }
        self.pageControl.currentPage = page - 1;
    }
}

Usage 使用

使用方式

  1. 将ECAutoScrollBanner文件夹直接拖入项目中，导入头文件#import "ECAutoScrollBanner.h"
  2. CocoaPods：pod 'ECAutoScrollBanner'

使用示例

其实使用起来很便捷很简单。只需要初始化，然后设置相关属性即可。支持先默认初始化，在需要的时候设置其样式和翻页效果翻页时间等。

纯文本滚动条，适用于广告、新闻资讯等

- (ECAutoScrollBanner *)textBannerView {
    if (_textBannerView == nil) {
        _textBannerView = [ECAutoScrollBanner initTextBannerWithFrame:self.topView.bounds withTextDataSource:self.textDataArray withBannerScrollDirection:ECAutoScrollBannerScrollDirectionVertical];
        _textBannerView.delegate = self;
        _textBannerView.isAutoPaging = YES;
        _textBannerView.isHavePageControl = NO;
        _textBannerView.isInfinitePaging = YES;
        _textBannerView.isEnabledPanGestureRecognizer = NO;
        _textBannerView.autoPageInterval = 4.0f;
    }
    return _textBannerView;
}
如果需要点击跳转等，实现协议和协议方法即可，下同。
- (void)tapScrollBannerItem:(NSInteger)itemTag withObject:(id)object {
    NSLog(@"文本banner。点击了第%ld个子item，下标%ld", (long)itemTag + 1, (long)itemTag);
}

手动翻页的图片banner，本地图片

- (ECAutoScrollBanner *)imageBannerView {
    if (_imageBannerView == nil) {
        _imageBannerView = [ECAutoScrollBanner initLocalImageBannerWithFrame:CGRectMake(0, 30, self.bottomView.frame.size.width, 180) withImageDataSource:self.imageDataArray withBannerScrollDirection:ECAutoScrollBannerScrollDirectionHorizontal];
        _imageBannerView.isAutoPaging = NO;
    }
    return _imageBannerView;
}

自动翻页的图片banner，url图片

- (ECAutoScrollBanner *)urlImageBannerVeiw {
    if (_urlImageBannerVeiw == nil) {
        UIImageView *placehodelImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 50 + 50 + 10 + 180 + 10, self.view.frame.size.width, 180)];
        placehodelImage.backgroundColor = [UIColor lightGrayColor];
        _urlImageBannerVeiw = [ECAutoScrollBanner initOnlineImageBannerWithFrame:CGRectMake(0, 50 + 50 + 10 + 180 + 10, self.view.frame.size.width, 180) withImageUrlDataSource:self.imageUrlDataArray withPlaceholderImage:placehodelImage.image withBannerScrollDirection:ECAutoScrollBannerScrollDirectionHorizontal];
        _urlImageBannerVeiw.isAutoPaging = YES;
        _urlImageBannerVeiw.isEnabledPanGestureRecognizer = YES;
        _urlImageBannerVeiw.isInfinitePaging = YES;
    }
    return _urlImageBannerVeiw;
}

手动翻页的view视图轮播

（注意：view视图类的轮播中，view的坐标是相对于cell.contentView的坐标，是contentView的子视图）
- (ECAutoScrollBanner *)viewBannerView {
    if (_viewBannerView == nil) {
        _viewBannerView = [[ECAutoScrollBanner alloc] initViewBannerWithFrame:CGRectMake(0, 20 + 180 + 20 + 180 + 20, self.view.frame.size.width, 180) withViewsDataSouce:self.viewDataArray withBannerScrollDirection:ECAutoScrollBannerScrollDirectionHorizontal];
        _viewBannerView.isAutoPaging = NO;
    }
    return _viewBannerView;
}

Info

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 157,012评论 4赞 359
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,589评论 1赞 290
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 106,819评论 0赞 237
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,652评论 0赞 202
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 51,954评论 3赞 285
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,381评论 1赞 210
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,687评论 2赞 310
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,404评论 0赞 194
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,082评论 1赞 238
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,355评论 2赞 241
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,880评论 1赞 255
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,249评论 2赞 250
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,864评论 3赞 232
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,007评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,760评论 0赞 192
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,394评论 2赞 269
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,281评论 2赞 259