iOS小Demo--图片无限轮播

网上已经有很多无限循环的小Demo,这里我把感觉还不错的做了整理,不多说直接上代码.

#import "RootViewController.h"
#define screenWidth [[UIScreen mainScreen] bounds].size.width // 屏幕宽度的宏定义
@interface RootViewController ()<UIScrollViewDelegate>
@property (nonatomic,retain)UIScrollView *scrollView ;
@property (nonatomic,retain)UIPageControl *pageControl ;
@property (nonatomic,retain)NSMutableArray *pictureNameArray ; // 存放图片名称
@property (nonatomic,assign)int arrayIndex ; //存放数组下标  默认是0
@property (nonatomic,retain)NSTimer *timer ; // 定时器,根据定时器时间触发事件,达到图片无限滚动的效果
@end

思路 :我们始终只显示中间那个imageView,每次偏移量改变之后我们又会重新把它设为中间位置的偏移量.
我们所要做的只是改变三个imageView中存放的图片.
表面看我们是滑动了scrollView,其实偏移量并没有改变(实际是先改变,改变了之后有设置回来),始终停留在中间那个imageView上.

@implementation RootViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    self.navigationItem.title = @"无限滚动图片" ;
    // 往数组里添加图片名称
    self.pictureNameArray = [NSMutableArray arrayWithArray:@[@"1.jpg",@"2.jpg",@"3.jpg"]] ;
    // 防止UIScrollView位置发生偏移
    self.automaticallyAdjustsScrollViewInsets = NO ;
    [self.view addSubview:self.scrollView] ;
    [self.view addSubview:self.pageControl] ;
    [self creatImageViewForScrollView] ;
    [self creatTimer] ;
}
// scrollView的懒加载
- (UIScrollView *)scrollView
{
    if (!_scrollView)
    {
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, SCREENWIDTH, 200)] ;
        // 设置可滑动区域
        _scrollView.contentSize = CGSizeMake(SCREENWIDTH*self.pictureNameArray.count, 0) ;
        // 设置初始偏移量
        _scrollView.contentOffset = CGPointMake(SCREENWIDTH, 0) ;
        // 设置能否分页
        _scrollView.pagingEnabled = YES ;
        // 隐藏水平滚动条
        _scrollView.showsHorizontalScrollIndicator = NO ;
        _scrollView.delegate = self ;
    }
    return _scrollView ;
}
// pageControl的懒加载
- (UIPageControl *)pageControl
{
    if (!_pageControl)
    {
        CGFloat floatX = self.view.bounds.size.width - 150 ; // 距离屏幕右侧150处
        CGFloat floatY = 64 + 200 - 50 ; // 距离scrollView最底部50处
        _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(floatX, floatY, 150, 50)] ;
        // 设置小圆点的个数
        _pageControl.numberOfPages = self.pictureNameArray.count ;
        // 设置当前页
        _pageControl.currentPage = 0 ;
        // 设置未被选中时小圆点颜色
        _pageControl.pageIndicatorTintColor = [UIColor redColor] ;
        // 设置被选中时小圆点颜色
        _pageControl.currentPageIndicatorTintColor = [UIColor whiteColor] ;
        // 默认不能手动点小圆点改变页数
        _pageControl.enabled = NO ;
        // 把导航条设置为半透明状态
        [_pageControl setBackgroundColor:[[UIColor blackColor] colorWithAlphaComponent:0.5]] ;
    }
    return _pageControl ;
}

// 定义一个往scrollView上添加imageView的方法
- (void)creatImageViewForScrollView
{  
    for (int i = 0; i < self.pictureNameArray.count; i++)
    {
        UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(SCREENWIDTH * i, 0, SCREENWIDTH, 200)] ;
        // 添加tag值
        imageView.tag = 1000 + i ;
        // 给初始的imageView设置默认图片
        // 判断i值,i对应存放图片名称的数组下标
        // 因为只有三张图片,我们始终只显示中间的imageView,初始时scrollView的偏移量已经在中间,因此我们把第二张,也就是数组中下标为1的图片名称放在中间的imageView上. 2--0--1
        if (i == 0)
        {
            imageView.image = [UIImage imageNamed:[self.pictureNameArray lastObject]] ;
        }
        else if (i == 1)
        {
            imageView.image = [UIImage imageNamed:[self.pictureNameArray firstObject]] ;
        }
        else if (i == 2)
        {
            imageView.image = [UIImage imageNamed:self.pictureNameArray[1]] ;
        }
        [self.scrollView addSubview:imageView] ;
    }
}

// 生成定时器,当定时器所要执行的方法触发时,改变scrollView偏移量
- (void)creatTimer
{
    self.timer = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(changeScrollViewContentOffset) userInfo:nil repeats:YES] ;
}

- (void)changeScrollViewContentOffset
{
    // 每次给scrollView加一个屏幕的偏移量 向右无限滚动
    [self.scrollView setContentOffset:CGPointMake(self.scrollView.contentOffset.x + SCREENWIDTH, 0) animated:YES] ;
}

// 当设置偏移量并且带动画效果的时候才会执行该方法
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
    // 如果是无限向右滚动,由于我们初始时偏移量就在中间,因此一直会执行该段代码
    if (self.scrollView.contentOffset.x > SCREENWIDTH)
    {
        // 如果当前下标是数组最后元素的下标,说明图片已经滚动到最后一张,这是需要重新从第一张开始 否则下标加一
        if (self.arrayIndex == self.pictureNameArray.count - 1)
        {
            self.arrayIndex = 0 ;
        }
        else
        {
            self.arrayIndex ++ ;
        }
    }
    // 如果是无限向左滚动
    else
    {
        if (self.arrayIndex == 0)
        {
            self.arrayIndex = (int)self.pictureNameArray.count - 1 ;
        }
        else
        {
            self.arrayIndex -- ;
        }
    }
    // 当我们计算好数组下标之后,把scrollView的偏移量再重新设置回中间
    [self.scrollView setContentOffset:CGPointMake(SCREENWIDTH, 0) animated:NO] ; // 此时不用带动画效果
    // 设置pageControl的当前页
    self.pageControl.currentPage = self.arrayIndex ;
    // 改变imageView中三张图片的位置.把中间的imageView始终显示下标为arrayIndex的图片
    [self changeImage:self.arrayIndex] ;
}

// 当我们手动拖拽时 先将定时器干掉,否则计时器时间到又会滚动图片.
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [self.timer invalidate] ;
    self.timer = nil ;
}
// 当手动拖拽结束时 再开启一个新的计时器
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    [self creatTimer] ;
}

// 当减速结束时,改变偏移量,并改变需要显示的图片
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    // 如果是无限向右滚动,由于我们初始时偏移量就在中间,因此一直会执行该段代码
    if (self.scrollView.contentOffset.x > SCREENWIDTH)
    {
        // 如果当前下标是数组最后元素的下标,说明图片已经滚动到最后一张,这是需要重新从第一张开始 否则下标加一
        if (self.arrayIndex == self.pictureNameArray.count - 1)
        {
            self.arrayIndex = 0 ;
        }
        else
        {
            self.arrayIndex ++ ;
        }
    }
    // 如果是无限向左滚动
    else
    {
        if (self.arrayIndex == 0)
        {
            self.arrayIndex = (int)self.pictureNameArray.count - 1 ;
        }
        else
        {
            self.arrayIndex -- ;
        }
    }
    // 当我们计算好数组下标之后,把scrollView的偏移量再重新设置回中间
    [self.scrollView setContentOffset:CGPointMake(SCREENWIDTH, 0) animated:NO] ; // 此时不用带动画效果
    // 设置pageControl的当前页
    self.pageControl.currentPage = self.arrayIndex ;
    // 改变imageView中三张图片的位置.把中间的imageView始终显示下标为arrayIndex的图片
    [self changeImage:self.arrayIndex] ;
}

// 改变imageView显示的图片名称
- (void)changeImage : (int)index
{
    // 首先取到三个imageView
    //提取imageView
    UIImageView *imageView1 = (UIImageView *)[self.scrollView viewWithTag:1000];
    UIImageView *imageView2 = (UIImageView *)[self.scrollView viewWithTag:1001];
    UIImageView *imageView3 = (UIImageView *)[self.scrollView viewWithTag:1002];
    
    
    if (index == self.pictureNameArray.count - 1)
    {
        imageView2.image = [UIImage imageNamed:self.pictureNameArray[index]];
        imageView3.image = [UIImage imageNamed:self.pictureNameArray[0]];
        imageView1.image = [UIImage imageNamed:self.pictureNameArray[index-1]];
    }
    else if (index == 0)
    {
        imageView2.image = [UIImage imageNamed:self.pictureNameArray[index]];
        imageView3.image = [UIImage imageNamed:self.pictureNameArray[1+index]];
        imageView1.image = [UIImage imageNamed:self.pictureNameArray.lastObject];
    }
    else
    {
        imageView2.image = [UIImage imageNamed:self.pictureNameArray[index]];
        imageView3.image = [UIImage imageNamed:self.pictureNameArray[index+1]];
        imageView1.image = [UIImage imageNamed:self.pictureNameArray [index-1]];
    }
    
}
@end