iOS轮播图广告图

iOS界面上经常见到无限轮播图，n张图片轮流播放。
下面给出一个解决方案和demo（https://github.com/zhengwenming/WMBannerView）。
demo可设定轮播时间，可轮播本地和网络图片（可设置默认的placeholder），支持手动和自动无限循环轮播。

思路是这样的，我们做一个WMBannerView继承UIView，给出初始化方法，
-(instancetype)initWithFrame:(CGRect)frame withURLArrayOrImagesArray:(NSArray *)dataArray;
这个初始化方法会传进去一个数组，这个数组里面可以放本地的UIImage对象，也可以放网络上图片的URL。这个WMBannerView里面有一个UIScrollView，用这个UIScrollView去不断的加载上中下这三个imageView。到达最后一个iamge的时候，再滑动就加载第一个，如果反过来滑动到第一个图片，再滑动，就加载最后一个ImageView。具体的看代码实现。
.h文件里的代码：
#import < UIKit/UIKit.h>

typedef NS_ENUM(NSInteger,WMPageContolAlignment) {
WMPageContolAlignmentCenter, /*< 滚动点居中 /
/* */
WMPageContolAlignmentRight, /*< 滚动点居右 /
/* */
WMPageContolAlignmentNone /*< 滚动点隐藏 /
};

typedef void(^TapActionBlock)(NSInteger index);

@interface WMBannerView : UIView

/* 播放周期,默认五秒钟 如设置0则不播放 */
@property(nonatomic,assign)NSTimeInterval animationDuration;
/* 滚动点对齐方式，默认居中 */
@property(nonatomic,assign)WMPageContolAlignment pageControlAlignment;

/* 默认图片，下载未完成时显示 网络图片的时候设置*/
/* 注意：赋值必须写在Start方法之前，否则仍然为nil */
@property(nonatomic,strong)UIImage *placeHoldImage;

/* 数据源 **/
@property(nonatomic,copy)NSArray *dataArray;

/**
* 初始化广告播放滚动View
*
* @param rect 尺寸位置
* @param dataArray 图片数据源
*/
-(instancetype)initWithFrame:(CGRect)frame withURLArrayOrImagesArray:(NSArray *)dataArray;
/**
* 开始播放，默认五秒钟,点击响应block回调
*
* @param block 回调，返回当前图片index，不需要回调则设置为nil
*/
- (void)startWithTapActionBlock:(TapActionBlock)block;

/**
* 停止播放
*/
- (void)stop;
@end

再看.m实现文件里面的代码
依赖库为SDWebImage
#import “UIImageView+WebCache.h”
#import “WMBannerView.h”

@interface WMBannerView ()
//容器
@property(nonatomic,strong)UIScrollView *scrollView;
/* 滚动圆点 **/
@property(nonatomic,strong)UIPageControl *pageControl;
/* 定时器 **/
@property(nonatomic,strong)NSTimer *animationTimer;
/* 当前index **/
@property(nonatomic,assign)NSInteger currentPageIndex;
/* 所有的图片数组 **/
@property(nonatomic,strong)NSMutableArray *imageArray;
/* 当前图片数组，永远只存储三张图 **/
@property(nonatomic,strong)NSMutableArray *currentArray;
/* block方式接收回调 */
@property(nonatomic,copy)TapActionBlock block;
@end

@implementation WMBannerView

-(instancetype)initWithFrame:(CGRect)frame withURLArrayOrImagesArray:(NSArray *)dataArray{
self = [super initWithFrame:frame];
if (self) {
self.dataArray = dataArray;
self.autoresizesSubviews = YES;
self.scrollView = [[UIScrollView alloc] initWithFrame:self.bounds];
self.scrollView.contentMode = UIViewContentModeCenter;
self.scrollView.contentSize = CGSizeMake(3 *frame.size.width, frame.size.height);
self.scrollView.delegate = self;
self.scrollView.contentOffset = CGPointMake(frame.size.width, 0);
self.scrollView.pagingEnabled = YES;
self.scrollView.showsHorizontalScrollIndicator = NO;
self.scrollView.showsVerticalScrollIndicator = NO;
[self addSubview:self.scrollView];

    //设置分页显示的圆点    _pageControl = [[UIPageControl alloc] init];    _pageControl.alpha = 0.8;    _pageControl.currentPageIndicatorTintColor = [UIColor redColor];    _pageControl.pageIndicatorTintColor = [UIColor whiteColor];    [self addSubview:_pageControl];    //点击事件    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap)];    [self addGestureRecognizer:tapGesture];    //默认五秒钟循环播放    self.animationDuration = 5;    //默认居中    self.pageContolAliment = WMPageContolAlignmentCenter;    //默认第一张    self.currentPageIndex = 0;}return self;

}

-(void)layoutSubviews{
[super layoutSubviews];
self.scrollView.frame = self.bounds;
}

-(void)setPageContolAliment:(WMPageContolAlignment)pageContolAliment{
_pageControlAlignment = pageContolAliment;
_pageControl.hidden = NO;
switch (pageContolAliment) {
case WMPageContolAlignmentCenter:
{
_pageControl.frame = CGRectMake(0, CGRectGetHeight(self.scrollView.frame) - 20, CGRectGetWidth(self.scrollView.frame), 10);
}
break;
case WMPageContolAlignmentRight:
{
CGSize size = CGSizeMake(self.dataArray.count * 10 * 1.2, 10);
CGFloat x = self.scrollView.frame.size.width - size.width - 10;
CGFloat y = self.scrollView.frame.size.height - 20;
_pageControl.frame = CGRectMake(x, y, size.width, size.height);
}
break;
case WMPageContolAlignmentNone:
_pageControl.hidden = YES;
break;

    default:        break;}

}

-(void)setAnimationDuration:(NSTimeInterval)animationDuration{
_animationDuration = animationDuration;

[self.animationTimer invalidate];self.animationTimer = nil;if (animationDuration <= 0) {    return;}self.animationTimer = [NSTimer scheduledTimerWithTimeInterval:_animationDuration                                                       target:self                                                     selector:@selector(animationTimerDidFired:)                                                     userInfo:nil                                                      repeats:YES];[self.animationTimer setFireDate:[NSDate distantFuture]];

}

-(void)downLoadImage{
if (self.dataArray && self.dataArray.count > 0) {
if ([self.dataArray.firstObject respondsToSelector:@selector(hasPrefix:)]) {
if ([self.dataArray.firstObject hasPrefix:@”http”]) {//网络图片
self.imageArray = [NSMutableArray array];
__weak typeof(self) weak = self;
[self.dataArray enumerateObjectsUsingBlock:^(NSString * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
UIImageView *imageView = [[UIImageView alloc]initWithFrame:self.scrollView.frame];
[imageView sd_setImageWithURL:[NSURL URLWithString:obj] placeholderImage:self.placeHoldImage];
[weak.imageArray addObject:imageView];
}];
_pageControl.numberOfPages = self.dataArray.count;
[self configContentViews];

        }    }    else{//本地图片        self.imageArray = [NSMutableArray array];        __weak typeof(self) weak = self;        [self.dataArray enumerateObjectsUsingBlock:^(UIImage *  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {            UIImageView *imageView = [[UIImageView alloc]initWithFrame:self.scrollView.frame];            imageView.image = obj;            [weak.imageArray addObject:imageView];        }];        _pageControl.numberOfPages = self.dataArray.count;        [self configContentViews];    }}

}

#pragma mark - 私有函数

• (void)configContentViews
  {
  [self.scrollView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];

  NSInteger previousPageIndex = [self getValidNextPageIndexWithPageIndex:_currentPageIndex - 1];
  NSInteger rearPageIndex = [self getValidNextPageIndexWithPageIndex:_currentPageIndex + 1];

  self.currentArray = (_currentArray?:[NSMutableArray new]);

  _currentArray.count == 0 ?:[_currentArray removeAllObjects];

  if (_imageArray) {
  if (_imageArray.count >= 3) {
  [_currentArray addObject:_imageArray[previousPageIndex]];
  [_currentArray addObject:_imageArray[_currentPageIndex]];
  [_currentArray addObject:_imageArray[rearPageIndex]];
  }
  else{
  [self getImageFromArray:_imageArray[previousPageIndex]];
  [self getImageFromArray:_imageArray[_currentPageIndex]];
  [self getImageFromArray:_imageArray[rearPageIndex]];
  }
  }

  [_currentArray enumerateObjectsUsingBlock:^(UIImageView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
  obj.userInteractionEnabled = YES;
  CGRect rightRect = obj.frame;
  rightRect.origin = CGPointMake(CGRectGetWidth(self.frame) * idx, 0);
  obj.frame = rightRect;
  [self.scrollView addSubview:obj];
  }];

  [self.scrollView setContentOffset:CGPointMake(CGRectGetWidth(self.scrollView.frame), 0)];
  }

• (NSInteger)getValidNextPageIndexWithPageIndex:(NSInteger)currentPageIndex;
  {
  if(currentPageIndex == -1){
  return self.dataArray.count - 1;
  }
  else if (currentPageIndex == self.dataArray.count){
  return 0;
  }
  else
  return currentPageIndex;
  }

/**
* 解决小于三个图片显示的bug
* @param imageView 原始图
*/
-(void)getImageFromArray:(UIImageView *)imageView{
//开辟自动释放池
@autoreleasepool {
UIImageView *tempImage = [[UIImageView alloc]initWithFrame:imageView.frame];
tempImage.image = imageView.image;
[_currentArray addObject:tempImage];
}
}

#pragma mark - UIScrollViewDelegate

• (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
  {
  [self.animationTimer setFireDate:[NSDate distantFuture]];
  }

• (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
  {
  [self.animationTimer setFireDate:[NSDate dateWithTimeIntervalSinceNow:self.animationDuration]];
  }

• (void)scrollViewDidScroll:(UIScrollView *)scrollView
  {
  int contentOffsetX = scrollView.contentOffset.x;
  if(contentOffsetX >= (2 * CGRectGetWidth(scrollView.frame))) {
  self.currentPageIndex = [self getValidNextPageIndexWithPageIndex:self.currentPageIndex + 1];
  _pageControl.currentPage = _currentPageIndex;
  [self configContentViews];
  }
  if(contentOffsetX <= 0) {
  self.currentPageIndex = [self getValidNextPageIndexWithPageIndex:self.currentPageIndex - 1];
  _pageControl.currentPage = _currentPageIndex;
  [self configContentViews];
  }

}

• (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
  {
  [scrollView setContentOffset:CGPointMake(CGRectGetWidth(scrollView.frame), 0) animated:YES];
  }

  pragma mark - 循环事件

• (void)animationTimerDidFired:(NSTimer *)timer
  {
  CGPoint newOffset = CGPointMake(self.scrollView.contentOffset.x + CGRectGetWidth(self.scrollView.frame), self.scrollView.contentOffset.y);
  [self.scrollView setContentOffset:newOffset animated:YES];
  }

  pragma mark - 响应事件

• (void)tap
  {
  if (self.block) {
  self.block(self.currentPageIndex);
  }
  }

  pragma mark - 开始滚动

  -(void)startWithTapActionBlock:(TapActionBlock)block{
  [self.animationTimer setFireDate:[NSDate date]];

  [self downLoadImage];

  self.block = block;
  }

  pragma mark - 停止滚动

  -(void)stop{
  [self.animationTimer invalidate];
  }

• (void)dealloc
  {
  self.animationTimer = nil;
  self.imageArray = nil;
  self.dataArray = nil;
  self.scrollView = nil;
  }

@end

用法

那么做好我们的轮播图WMBannerView了，现在开始用了

/*
网络图片测试
*/
NSArray *URLArray = @[@”http://farm2.staticflickr.com/1709/24157242566_98d0192315_m.jpg“,
@”http://farm2.staticflickr.com/1715/23815656639_ef86cf1498_m.jpg“,
@”http://farm2.staticflickr.com/1455/23888379640_edf9fce919_m.jpg“];

WMBannerView　* wmView = [[WMBannerView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.width*3/4) withURLArrayOrImagesArray:URLArray];
wmView.pageControlAlignment = WMPageContolAlignmentCenter;
wmView.placeHoldImage = [UIImage imageNamed:@”placeholderImage”];
wmView.animationDuration = 1.0;//设置滚动的时间间隔，为0的时候不自动滚动
//点击图片的回调block，可以知道点击的index
[wmView startWithTapActionBlock:^(NSInteger index) {
NSLog(@”点击了第%@张”,@(index));
}];

然后放置到tableView的tableHeaderView上面

table = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) style:UITableViewStylePlain];
table.dataSource = self;
table.delegate = self;
table.tableHeaderView = wmView;
table.tableFooterView = [UIView new];
[self.view addSubview:table];

Demo地址

https://github.com/zhengwenming/WMBannerView
描述：强大的广告轮播图，可设定轮播时间，可轮播本地和网络图片（可设置默认的placeholder），支持手动和自动无限循环轮播。可放到UITableView头上，也可以放置到UICollectionView的头上。

另外博主维护一个iOS开发技术支持群：479259423，进群必须改名，群名片格式：城市-iOS-名字，例如广州-iOS-文明。手机可以加，电脑加不了。