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的头上。