说到轮播图，估计都不陌生，各种各样的轮播图在各个App上都不断的被使用，因为轮播图的界面简洁并且内容涵盖丰富，所以经常拿来进行使用。但是无论轮播图的样式怎么变换，它的实现机制实际上都大同小异，今天就一点点说一下轮播图的实现吧！
实现方案
实现这样的界面实际上大家都有自己的想法，看到这样的界面，无疑会想到它的控件分布如下：
- 滚动视图
- 每个滚动视图的单元格图片展示
- 滚动位置导航器（多种风格）
对应的结构图如下所示：
cycleView.png
这不禁让人想起了两个控件来实现这样的效果，一个是UIScrollView，另外一个则是UICollectionView。这两个都能实现滚动的效果，因为UICollectionView继承自UIScrollView，所以就以UIScrollView的实现方式来说起吧！
首先封装这个控件之前，我们需要两个创建滚动视图的变量，一个是数量bannerNum，以及另外一个变量轮播图的图片地址imageLink。这两个变量在使用的时候需要传递给我们，然后才能依据这两个变量创建相应的滚动视图。结合这样的逻辑，我们可以将其设置为一个代理，然后使用的时候，通过代理将我们需要的变量传递进来也就满足了创建需求。
代理创建如下：
@protocol LCBannerScrollerViewDelegate <NSObject,UITableViewDelegate>
- (NSInteger )bannerView:(LCBannerScrollerView *)bannerScrollView;
- (NSString *)bannerLinks:(LCBannerScrollerView *)bannerScrollView linkForIndexOfBanner:(NSInteger)indexPath;
@optional
//相应广告图的点击事件
- (void)bannerView:(LCBannerScrollerView *)bannerScrollView didClicked:(NSInteger)index;
@end
然后创建一个ScrollView滚动视图，代码如下：
- (void)creatView{
//初始化数据
self.index = 0;
//从代理中获取对应的滚动图数量
NSInteger bannerNum = [self.delegate bannerView:self];
UIScrollView *banerScrollerView = [[UIScrollView alloc]init];
banerScrollerView.frame = CGRectMake(0, 0,self.frame.size.width, self.frame.size.height-BarViewHeight);
banerScrollerView.contentSize = CGSizeMake(self.frame.size.width * (bannerNum+2), 0);
[self addSubview:banerScrollerView];
self.bannerScrollView = banerScrollerView;
banerScrollerView.pagingEnabled = YES;
banerScrollerView.bounces = NO;
banerScrollerView.delegate = self;
banerScrollerView.scrollsToTop = NO;
banerScrollerView.showsHorizontalScrollIndicator = NO;
//创建广告图
CGFloat img_x = 0;
CGFloat img_y = 0;
CGFloat img_w = SCREEN_WIDTH;
CGFloat img_h = self.frame.size.height - BarViewHeight;
for (int i = 0; i<bannerNum; i++) {
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(img_x, img_y, img_w, img_h);
[button addTarget:self action:@selector(bannerTouch:) forControlEvents:UIControlEventTouchUpInside];
NSString *imageLink = [self.delegate bannerLinks:self linkForIndexOfBanner:i];
[button sd_setBackgroundImageWithURL:[NSURL URLWithString:imageLink] forState:UIControlStateNormal placeholderImage:[UIImage imageNamed:@"placeholder3"]];
button.contentMode = UIViewContentModeCenter;
button.tag = i;
[banerScrollerView addSubview:button];
[self.bannerViewArray addObject:button];
img_x += img_w;
}
//创建导航pageController(该项目为底部滑块滚动条)
CGFloat bar_x = 0;
CGFloat bar_y = img_h;
CGFloat bar_w = self.frame.size.width/bannerNum;
CGFloat bar_h = BarViewHeight;
for (int i=0; i<bannerNum; i++) {
UIView *barView = [[UIView alloc]init];
barView.frame = CGRectMake(bar_x, bar_y, bar_w, bar_h);
barView.tag = i;
[self addSubview:barView];
[self.bottomViewArray addObject:barView];
bar_x += bar_w;
}
//添加滑块游标
UIView *actionView = [[UIView alloc]init];
if (self.bottomViewArray.count) {
UIView *firstBarView = self.bottomViewArray[0];
actionView.frame = firstBarView.frame;
actionView.backgroundColor = _barViewColor ? _barViewColor : barViewColor;
self.actionBarView = actionView;
[self addSubview:_actionBarView];
}
}
/*
** 将滚动图的点击事件传递给代理，将点击事件通过代理来进行回调
*/
- (void)bannerTouch:(UIButton*)button{
[self.delegate bannerView:self didClicked:button.tag];
}
写完以上代码，实际上轮播图的模样已经清晰了，但是轮播图不能自动滚动，只能拿手进行拖动。实现自动滚动需要一个定时器来进行循环的操作，我们创建一个定时器：
// 释放时取消定时器
- (void)dealloc {
[self.timer invalidate];
}
//懒加载
- (NSTimer *)timer {
if (!_timer) {
_timer = [NSTimer scheduledTimerWithTimeInterval:AnimotionTime target:self selector:@selector(scrollBanner:) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];
}
return _timer;
}
有时候为了让自动滚动变得灵活可控，通常启动定时器的方法将其设定为对外接口，通过由外界来控制定时器的启动。自动滚动开始以后，我们貌似忽略了一个重点内容，就是滚动导航指示器（通常为UIPageController）的指示，这个滚动的指示我们可以通过UIScrollView的代理中回调的偏移量进行计算得出当前页。具体如下：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGFloat offset_x = scrollView.contentOffset.x;
self.index = offset_x/scrollView.frame.size.width;
//实时改变底部滑块的位置
CGFloat offsetX_zoom = (offset_x - SCREEN_WIDTH * self.index) / SCREEN_WIDTH;
UIView *currentView = self.bottomViewArray[self.index];
CGRect frame = currentView.frame;
frame.origin.x += offsetX_zoom * (SCREEN_WIDTH/self.bottomViewArray.count);
self.actionBarView.frame = frame;
}
- (void)scrollBanner:(NSTimer *)timer{
CGFloat offset_x = 0;
CGFloat offset_y = 0;
offset_x = _index * self.frame.size.width;
//让滚动平滑缓慢
offset_x = _index * self.frame.size.width;
[UIView animateWithDuration:ScrollTime delay:0.0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
[self.bannerScrollView setContentOffset:CGPointMake(offset_x, offset_y) animated:NO];
} completion:nil];
_index ++;
}
滚动完成以后，我们可能会遇到一个问题，那就是用手滚动滚动图的时候，会发现手势不能停止自动滚动，显然这样的结果不是我们想要的，为了解决这个问题，我们在手势触发滚动的时候暂停计时器的及时，等手势移除之后再将定时器恢复就可以解决问题了。解决如下：
//手势开始触发
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
[self endSchedulTime];
}
//手势结束触发
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
//恢复定时器计时
[self startSchedulTime];
}
- (void)endSchedulTime{
// 停止计时
[self.timer setFireDate:[NSDate distantFuture]];
}
- (void)startSchedulTime{
// 开始计时(手势停止后，要延迟一段时间再进行滚动，否则手势一旦停止就立即滚动会显得滚动仓促，这个时间根据需求来定)
[self.timer setFireDate:[NSDate dateWithTimeInterval:1.5 sinceDate:[NSDate date]]];
}
好了，简单的轮播图就这样实现了，是不是很简单呢！效果如下：
滚动视图.gif
至于无限轮播图，就等到下一篇在进行详细的介绍吧！
