菜单

iOS轮播图封装 ECAutoScrollBanner

2018年9月12日 - 注册免费送38元体验金

ECAutoScrollBanner

轮播图封装。可以兑现全自动定时翻页、手动翻页;垂直和程度滚动等。支持纯文本、本地图片、网络图片以及另外view试图。

bug fix:

  1. 始建view试图类的轮播图优化修复。(注意:view视图类的轮播中,view的坐标是相对于cell.contentView的坐标,是contentView的子视图)

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

Navigation 导航

Abstract 概要

简介&特性

轮播图封装,网上发那么些现的demo,也尚无什么难度。这个是雅早前写过之轮播图封装,这次正好用不畏重新整理一下发生来,希望能支援到要之丁。

效果图

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的滑效果。
本次封装实现思路
image
支持手动翻页和定时翻页
支撑竖向垂直翻页和程度翻页
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’

运用示例

实际上用起来挺轻便特别简短。只需要初始化,然后设置相关属性即可。支持先默认初始化,在待之时段装其样式与翻页效果翻页时间等于。

纯文本滚动条,适用于广告注册免费送38元体验金、新闻资讯等

- (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;
}

More 更多

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图