使用UIScrollView实现图片无限循环浏览

一、简介

本Demo实现了scrollView的循环滚动 其实总共有五个图片，但是在scroll中重复加入了第一张和最后一张 例如：五张图片编号为1，2，3，4，5 那么重复加入后7张图片的位置(用编号描述):5,1,2,3,4,5,1
【算法描述】
1）当从第一个图片向左拉时，显示了【那张重复的第五张图片】，当【那张重复的第五张图片】显示完全后，立即 重新设置scrollView的contentSet和pageControl的currentPage。
2） 当从第五张图片向右拉时，显示了【那张重复的第一张图片】，当【那张重复的第一张图片】显示完全后，立即 重新设置scrollView的contentSet和pageControl的currentPage。

二、代码

#import "ViewController.h"
#define IMAGE_NUM 7
@interface ViewController ()<UIScrollViewDelegate,UIPageViewControllerDelegate>

@property(weak,nonatomic)UIScrollView *scrollView;
@property(weak,nonatomic)UIPageControl *pageControl;
@property(nonatomic,assign)NSInteger currentIndex;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

#pragma mark - 创建scrollView
    //创建scrollView
    UIScrollView *view = [[UIScrollView alloc] init];
    //设置view的frame
    view.frame = CGRectMake(67, 50, 240, 128);


    //设置iamgeView的宽和高
    CGFloat imageWidth = 240;
    CGFloat imageHeight = 128;
    NSInteger imageIndex = 0;
    //给view添加图片
    for (NSInteger i = 0; i < IMAGE_NUM; i++) {

        if (i == 0) {
            imageIndex = 5;
        } else if (i == 6) {
            imageIndex = 1;
        } else{
            imageIndex = i;
        }



        //设置imageView的X和Y
        CGFloat imageX = imageWidth * i;
        CGFloat imageY = 0;
        //创建iamgeView
        UIImageView *imageView = [[UIImageView alloc] init];
        //设置iangeView的frame
        imageView.frame = CGRectMake(imageX, imageY, imageWidth, imageHeight);
        //设置iamgeView的iamge
        imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"img_0%ld", imageIndex]];
        [view addSubview:imageView];
    }
    //将scrollView的横竖两个方向的滚动条隐藏
    view.showsHorizontalScrollIndicator = NO;
    view.showsVerticalScrollIndicator = NO;
    //设置scrollView的contentSize
    view.contentSize = CGSizeMake(imageWidth * IMAGE_NUM, imageHeight);
    //设置scrollView的contentOffSet
    view.contentOffset = CGPointMake(imageWidth, 0);
    //允许scrollView分页
    view.pagingEnabled = YES;
    //设置view不让其自动布局
    self.view.autoresizesSubviews = NO;
    //设置view的代理
    view.delegate = self;
    self.scrollView = view;
    //将view添加到当前controller的view中
    [self.view addSubview:view];

#pragma mark - 创建pageControl
    //创建pageControl
    UIPageControl *control = [[UIPageControl alloc] init];
    //设置pageControl的frame
    control.frame = CGRectMake(167, 160, 40, 21);
    //设置其他指示器默认颜色
    control.pageIndicatorTintColor = [UIColor yellowColor];
    //设置当前指示器的颜色
    control.currentPageIndicatorTintColor = [UIColor redColor];
    //设置总共的页数
    control.numberOfPages = 5;
    //设置当前在第几页
    control.currentPage = 0;
    self.pageControl = control;
    [self.view addSubview:control];
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    //获取scrollView的宽
    CGFloat width = self.scrollView.bounds.size.width;

    //计算当前页数
    NSInteger currentPage = (self.scrollView.contentOffset.x + width * 0.5) / width;



    //更新pageControl的指示器
    self.pageControl.currentPage = currentPage - 1;
}

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    //获取scrollView的宽
    CGFloat width = self.scrollView.bounds.size.width;

    //计算当前页数
    NSInteger currentPage = (self.scrollView.contentOffset.x + width * 0.5) / width;
    //如果滚动到了第0张：也就是【重复的第5张图片】
    if (currentPage == 0) {
        //将当前的index定位到第5张
        self.currentIndex = 5;
        //如果滚动到了第6张：也就是【重复的第1张图片】
    } else if(currentPage == 6){
        //将当前的index定位到第1张
        self.currentIndex = 1;

    } else{
        //其他情况，当前图片的index与pageControl的currentPage保持一致
        self.currentIndex = currentPage;

    }
    //重新设置scrollView的contentOffSet
    self.scrollView.contentOffset = CGPointMake(width * self.currentIndex, 0);
}
@end