iOS --- 轮播图

在iOS开发中，有很多项目使用到了轮播图，通常我们更多的是使用一些别人写的方法来实现，当然这样也更加快捷和方便，但其中的实现原理却一窍不通，最近对轮播图研究了一番，也试着去实现了一些基本的功能，下面就让我来介绍一下：

本文中的轮播图主要是实用UIScrollView + NSTimer来实现的，具体思路是：首先我们先创建一个UIScrollView,根据图片的数据设置UIScrollView的内容尺寸（因为要实现无限轮播的的效果，需要多设置一个宽度的内容尺寸来起到缓冲的作用，使其显示到最后一张时，当我们再次滑动，直接跳转到第一张，即UIScrollView的内容尺寸为图片数据总和再加1，下面会详细介绍），然后创建一个UIPageControl来现实图片的具体位置，并让其与UIScrollView起到联动的效果。最后创建一个定时器，每隔一段时间设置UIScrollView的偏移量，注意也要更改UIPageControl的选中页位置。当然这种方法主要适用于数据较少的时候使用，当数据较多时，我们就要考虑复用的问题了。

首先确定数据源，这里我们使用本地数据，创建图片数组来存放五张图片

 _imgArray = @[@"01.jpg", @"02.jpg", @"03.jpg", @"04.jpg", @"05.jpg"];

创建UIScrollView和UIPageControl，注意UIScrollView的内容尺寸为_imgArray.count + 1,UIScrollView的最后一个位置要放置地一张图片

_scrollView = [[UIScrollView alloc]initWithFrame:CGRctMake(0, 0, kScreenWidth, 200)];
    _scrollView.contentSize = CGSizeMake(kScreenWidth * (_imgArray.count + 1), 200);
    _scrollView.pagingEnabled = YES;
    _scrollView.delegate = self;
    _scrollView.showsHorizontalScrollIndicator = NO;
    //创建子视图
    for (int i = 0; i < _imgArray.count + 1; i++) {
        UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0 + i * kScreenWidth, 0, kScreenWidth, 200)];
        if (i == _imgArray.count) {
            imgView.image = [UIImage imageNamed:_imgArray[0]];
        }else{
          imgView.image = [UIImage imageNamed:_imgArray[i]];
        } 
        [_scrollView addSubview:imgView];
    }
    [self.view addSubview:_scrollView];
    
    //创建分页控件
    _pageCtrl = [[UIPageControl alloc]initWithFrame:CGRectMake((kScreenWidth - 130)/2, _scrollView.bottom - 20, 130, 15)];
    //_pageCtrl.backgroundColor = [UIColor cyanColor];
    _pageCtrl.numberOfPages = _imgArray.count;
    _pageCtrl.currentPage = 0;
    [self.view addSubview:_pageCtrl];

实现UIScrollView的代理方法 - (void)scrollViewDidScroll:(UIScrollView *)scrollView，在此方法中可以获取到scrollView的偏移量，根据偏移量获取分页位置。假设屏幕宽度为320，根据上图可明显得出，当向右滑动xOff为1600时，UIScrollView恰好滑到了最后一个索引处，即第一张图片。此时如果我们不添加处理，继续向右滑动，没有图片，这不是我们想要的结果。无限循环滑动才是我们的目的，此时，我们想看到的是第二张图片，索引为1。因此，当xOff大于1600 的瞬间，设置UIScrollView的偏移量为CGPointMake(0, 0),此时我们看到的仍然是第一张图片，但是已经实现了循环跳转，只是我们肉眼难以察觉。注意，设置偏移量时animate要设置为NO。同理，当向左滑动xOff为0时，继续滑动，我们想要看到的是第五张图片，索引为4。因此当xOff小于0时，设置设置UIScrollView的偏移量为CGPointMake(1600, 0),此时我们看到的仍然是第一张图片(第六张图片，索引5)。注意，在此处处理UIPageControl的选中页位置。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat xOff = scrollView.contentOffset.x;
    int index = xOff/kScreenWidth;
    
    if (index == 5) {
        _pageCtrl.currentPage = 0;
    }else{
        _pageCtrl.currentPage = index;
    }
    //    0      1      2      3       4       0
    // 0    320    640    960    1280    1600
    if (xOff > kScreenWidth * _imgArray.count) {
     
        [scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
    
    }
    if (xOff < 0) {
        [scrollView setContentOffset:CGPointMake(kScreenWidth * _imgArray.count, 0) animated:NO];
    }
    
}

至此，轮播图的基本工功能，我们已经大致实现了。下面，我们添加一个定时器，使UIScrollView能够根据定时器每隔1s自动滚动：

      number = 0;
    _timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(setOffsetMethod) userInfo:nil repeats:YES];


- (void)setOffsetMethod{
    
    number++;
    [_scrollView setContentOffset:CGPointMake(kScreenWidth * number, 0) animated:YES];
    
}

要注意当滚动到最后一个索引时，使number＝ 0；

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat xOff = scrollView.contentOffset.x;
    int index = xOff/kScreenWidth;
    
    if (index == 5) {
        _pageCtrl.currentPage = 0;
    }else{
        _pageCtrl.currentPage = index;
    }
    //    0      1      2      3       4       0
    // 0    320    640    960    1280    1600
    if (xOff > kScreenWidth * _imgArray.count) {
        number = 0;
        [scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
    
    }
    if (xOff < 0) {
        [scrollView setContentOffset:CGPointMake(kScreenWidth * _imgArray.count, 0) animated:NO];
    }
    
}

接下来有一个重要问题就是解决定时器与滑动手势的冲突，实现下面两个代理方法：

//开始拖动
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    NSLog(@"开始拖动");
    [_timer setFireDate:[NSDate distantFuture]];
}
//结束拖动
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    NSLog(@"结束拖动");
    int index = scrollView.contentOffset.x/kScreenWidth;
    number = index;
    [_timer setFireDate:[NSDate date]];
}

下面是轮播图项目的全部代码：

//  轮播图

#import "Test02ViewController.h"
#import "UIViewExt.h"
#import "Test01ViewController.h"

@interface Test02ViewController ()<UIScrollViewDelegate>
{
    NSInteger number;
}
@property(nonatomic, strong)UIScrollView *scrollView;
@property(nonatomic, strong)NSArray *imgArray;
@property(nonatomic, strong)UIPageControl *pageCtrl;

@property(nonatomic, strong)NSTimer *timer;

@end

@implementation Test02ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor whiteColor];
    self.navigationController.navigationBar.translucent = NO;
    _imgArray = @[@"01.jpg", @"02.jpg", @"03.jpg", @"04.jpg", @"05.jpg"];
    [self addSubViews];
    NSLog(@"viewDidLoad");
}

- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    [_scrollView setContentOffset:CGPointMake(0, 0) animated:NO];

}
- (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];

    number = 0;
    _timer = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(setOffsetMethod) userInfo:nil repeats:YES];
}
- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    
    [_timer invalidate];
}

- (void)addSubViews{
    _scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, 200)];
    _scrollView.contentSize = CGSizeMake(kScreenWidth * (_imgArray.count + 1), 200);
    _scrollView.pagingEnabled = YES;
    _scrollView.delegate = self;
    _scrollView.showsHorizontalScrollIndicator = NO;
    //创建子视图
    for (int i = 0; i < _imgArray.count + 1; i++) {
        UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0 + i * kScreenWidth, 0, kScreenWidth, 200)];
        if (i == _imgArray.count) {
            imgView.image = [UIImage imageNamed:_imgArray[0]];
        }else{
          imgView.image = [UIImage imageNamed:_imgArray[i]];
        }
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]init];
        [tap addTarget:self action:@selector(touchAction)];
        [imgView addGestureRecognizer:tap];
        imgView.userInteractionEnabled = YES;
        
        [_scrollView addSubview:imgView];
    }
    [self.view addSubview:_scrollView];
    
    //创建分页控件
    _pageCtrl = [[UIPageControl alloc]initWithFrame:CGRectMake((kScreenWidth - 130)/2, _scrollView.bottom - 20, 130, 15)];
    //_pageCtrl.backgroundColor = [UIColor cyanColor];
    _pageCtrl.numberOfPages = _imgArray.count;
    _pageCtrl.currentPage = 0;
    [self.view addSubview:_pageCtrl];
    
}
- (void)touchAction{
    NSLog(@"点击");
    [_timer setFireDate:[NSDate distantFuture]];
    [self pushVC];
}

#pragma mark -UIScrollViewDelegate
//已经滑动
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGFloat xOff = scrollView.contentOffset.x;
    int index = xOff/kScreenWidth;
    
    if (index == 5) {
        _pageCtrl.currentPage = 0;
    }else{
        _pageCtrl.currentPage = index;
    }
    //    0      1      2      3       4       0
    // 0    320    640    960    1280    1600
    if (xOff > kScreenWidth * _imgArray.count) {
        number = 0;
        [scrollView setContentOffset:CGPointMake(0, 0) animated:NO];
    
    }
    if (xOff < 0) {
        [scrollView setContentOffset:CGPointMake(kScreenWidth * _imgArray.count, 0) animated:NO];
    }
    
}
- (void)setOffsetMethod{
    
    number++;
    [_scrollView setContentOffset:CGPointMake(kScreenWidth * number, 0) animated:YES];
    
}
//开始拖动
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    NSLog(@"开始拖动");
    [_timer setFireDate:[NSDate distantFuture]];
}
//结束拖动
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    NSLog(@"结束拖动");
    int index = scrollView.contentOffset.x/kScreenWidth;
    number = index;
    [_timer setFireDate:[NSDate date]];
}
- (void)pushVC{
    Test01ViewController *test01VC = [[Test01ViewController alloc]init];
    [self.navigationController pushViewController:test01VC animated:YES];
}



- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end