单向轮播图的简单实现

说到轮播图，估计都不陌生，各种各样的轮播图在各个App上都不断的被使用，因为轮播图的界面简洁并且内容涵盖丰富，所以经常拿来进行使用。但是无论轮播图的样式怎么变换，它的实现机制实际上都大同小异，今天就一点点说一下轮播图的实现吧！

实现方案

实现这样的界面实际上大家都有自己的想法，看到这样的界面，无疑会想到它的控件分布如下：

1. 滚动视图
2. 每个滚动视图的单元格图片展示
3. 滚动位置导航器（多种风格）

对应的结构图如下所示：

cycleView.png

这不禁让人想起了两个控件来实现这样的效果，一个是UIScrollView，另外一个则是UICollectionView。这两个都能实现滚动的效果，因为UICollectionView继承自UIScrollView，所以就以UIScrollView的实现方式来说起吧！

首先封装这个控件之前，我们需要两个创建滚动视图的变量，一个是数量bannerNum，以及另外一个变量轮播图的图片地址imageLink。这两个变量在使用的时候需要传递给我们，然后才能依据这两个变量创建相应的滚动视图。结合这样的逻辑，我们可以将其设置为一个代理，然后使用的时候，通过代理将我们需要的变量传递进来也就满足了创建需求。
代理创建如下：

@protocol LCBannerScrollerViewDelegate 

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

写完以上代码，实际上轮播图的模样已经清晰了，但是轮播图不能自动滚动，只能拿手进行拖动。实现自动滚动需要一个定时器来进行循环的操作，我们创建一个定时器：

// 释放时取消定时器
- (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

至于无限轮播图，就等到下一篇在进行详细的介绍吧！