iOS UIScrollView循环拖动的思路和实现方法

首先声明，这个代码和思路是借鉴大神的，下面文章的链接处有文章的出处，尊重原创，自己钻研了下，想把实现的思路更详细的记录一下。

ViewController.h

#import <uikit uikit.h="">
 
@interface ViewController : UIViewController <uiscrollviewdelegate>
@property (strong, nonatomic) UIScrollView *scrV;
@property (strong, nonatomic) UIPageControl *pageC;
@property (strong, nonatomic) UIImageView *imgVLeft;
@property (strong, nonatomic) UIImageView *imgVCenter;
@property (strong, nonatomic) UIImageView *imgVRight;
@property (strong, nonatomic) UILabel *lblImageDesc;
@property (strong, nonatomic) NSMutableDictionary *mDicImageData;
@property (assign, nonatomic) NSUInteger currentImageIndex;
@property (assign, nonatomic) NSUInteger imageCount;
 
@end</uiscrollviewdelegate></uikit>
ViewController.m

#import "ViewController.h"
 
#define kWidthOfScreen [[UIScreen mainScreen] bounds].size.width
#define kHeightOfScreen [[UIScreen mainScreen] bounds].size.height
#define kImageViewCount 3
@interface ViewController ()
/**
 *  加载图片数据
 */
- (void)loadImageData;
 
/**
 *  添加滚动视图
 */
- (void)addScrollView;
 
/**
 *  添加三个图片视图到滚动视图内
 */
- (void)addImageViewsToScrollView;
 
/**
 *  添加分页控件
 */
- (void)addPageControl;
 
/**
 *  添加标签；用于图片描述
 */
- (void)addLabel;
 
/**
 *  根据当前图片索引设置信息
 *
 *  @param currentImageIndex 当前图片索引；即中间
 */
- (void)setInfoByCurrentImageIndex:(NSUInteger)currentImageIndex;
 
/**
 *  设置默认信息
 */
- (void)setDefaultInfo;
 
/**
 *  重新加载图片
 */
- (void)reloadImage;
 
- (void)layoutUI;
@end
 
@implementation ViewController
 
- (void)viewDidLoad {
    [super viewDidLoad];
     
    [self layoutUI];
}
 
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
 
- (void)loadImageData {
    NSString *path = [[NSBundle mainBundle] pathForResource:@"ImageInfo" ofType:@"plist"];
    _mDicImageData = [NSMutableDictionary dictionaryWithContentsOfFile:path];
    _imageCount = _mDicImageData.count;
}
 
- (void)addScrollView {
    _scrV = [[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    _scrV.contentSize = CGSizeMake(kWidthOfScreen * kImageViewCount, kHeightOfScreen);
    _scrV.contentOffset = CGPointMake(kWidthOfScreen, 0.0);
    _scrV.pagingEnabled = YES;
    _scrV.showsHorizontalScrollIndicator = NO;
    _scrV.delegate = self;
    [self.view addSubview:_scrV];
}
 
- (void)addImageViewsToScrollView {
    //图片视图；左边
    _imgVLeft = [[UIImageView alloc] initWithFrame:CGRectMake(0.0, 0.0, kWidthOfScreen, kHeightOfScreen)];
    _imgVLeft.contentMode = UIViewContentModeScaleAspectFit;
    [_scrV addSubview:_imgVLeft];
     
    //图片视图；中间
    _imgVCenter = [[UIImageView alloc] initWithFrame:CGRectMake(kWidthOfScreen, 0.0, kWidthOfScreen, kHeightOfScreen)];
    _imgVCenter.contentMode = UIViewContentModeScaleAspectFit;
    [_scrV addSubview:_imgVCenter];
     
    //图片视图；右边
    _imgVRight = [[UIImageView alloc] initWithFrame:CGRectMake(kWidthOfScreen * 2.0, 0.0, kWidthOfScreen, kHeightOfScreen)];
    _imgVRight.contentMode = UIViewContentModeScaleAspectFit;
    [_scrV addSubview:_imgVRight];
}
 
- (void)addPageControl {
    _pageC = [UIPageControl new];
    CGSize size= [_pageC sizeForNumberOfPages:_imageCount]; //根据页数返回 UIPageControl 合适的大小
    _pageC.bounds = CGRectMake(0.0, 0.0, size.width, size.height);
    _pageC.center = CGPointMake(kWidthOfScreen / 2.0, kHeightOfScreen - 80.0);
    _pageC.numberOfPages = _imageCount;
    _pageC.pageIndicatorTintColor = [UIColor whiteColor];
    _pageC.currentPageIndicatorTintColor = [UIColor brownColor];
    _pageC.userInteractionEnabled = NO; //设置是否允许用户交互；默认值为 YES，当为 YES 时，针对点击控件区域左（当前页索引减一，最小为0）右（当前页索引加一，最大为总数减一），可以编写 UIControlEventValueChanged 的事件处理方法
    [self.view addSubview:_pageC];
}
 
- (void)addLabel {
    _lblImageDesc = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 40.0, kWidthOfScreen, 40.0)];
    _lblImageDesc.textAlignment = NSTextAlignmentCenter;
    _lblImageDesc.textColor = [UIColor whiteColor];
    _lblImageDesc.font = [UIFont boldSystemFontOfSize:[UIFont labelFontSize]];
    _lblImageDesc.text = @"Fucking now.";
    [self.view addSubview:_lblImageDesc];
}
 
- (void)setInfoByCurrentImageIndex:(NSUInteger)currentImageIndex {
    NSString *currentImageNamed = [NSString stringWithFormat:@"%lu.png", (unsigned long)currentImageIndex];
    _imgVCenter.image = [UIImage imageNamed:currentImageNamed];
    _imgVLeft.image = [UIImage imageNamed:[NSString stringWithFormat:@"%lu.png", (unsigned long)((_currentImageIndex - 1 + _imageCount) % _imageCount)]];
    _imgVRight.image = [UIImage imageNamed:[NSString stringWithFormat:@"%lu.png", (unsigned long)((_currentImageIndex + 1) % _imageCount)]];
     
    _pageC.currentPage = currentImageIndex;
    _lblImageDesc.text = _mDicImageData[currentImageNamed];
}
 
- (void)setDefaultInfo {
    _currentImageIndex = 0;
    [self setInfoByCurrentImageIndex:_currentImageIndex];
}
 
- (void)reloadImage {
    CGPoint contentOffset = [_scrV contentOffset];
    if (contentOffset.x > kWidthOfScreen) { //向右滑动
        _currentImageIndex = (_currentImageIndex + 1) % _imageCount;
    } else if (contentOffset.x < kWidthOfScreen) { //向左滑动
        _currentImageIndex = (_currentImageIndex - 1 + _imageCount) % _imageCount;
    }
     
    [self setInfoByCurrentImageIndex:_currentImageIndex];
}
 
- (void)layoutUI {
    self.view.backgroundColor = [UIColor blackColor];
     
    [self loadImageData];
    [self addScrollView];
    [self addImageViewsToScrollView];
    [self addPageControl];
    [self addLabel];
    [self setDefaultInfo];
}
 
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    [self reloadImage];
     
    _scrV.contentOffset = CGPointMake(kWidthOfScreen, 0.0);
    _pageC.currentPage = _currentImageIndex;
     
    NSString *currentImageNamed = [NSString stringWithFormat:@"%lu.png", (unsigned long)_currentImageIndex];
    _lblImageDesc.text = _mDicImageData[currentImageNamed];
}
 
@end
ImageInfo.plist

<!--?xml version="1.0" encoding="UTF-8"?-->
 
<plist version="1.0">
<dict>
    <key>0.png</key>
    <string>WATCH，它，终于来了。</string>
    <key>1.png</key>
    <string>iPhone 6，无双，有此一双。</string>
    <key>2.png</key>
    <string>MacBook，轻于时代，先于时代。</string>
    <key>3.png</key>
    <string>iPad Air 2，轻轻地，改变一切。</string>
    <key>4.png</key>
    <string>iOS 9，它，将要到来。</string>
</dict>
</plist version="1.0">

实现效果

接下来是自己的理解和详细思路

1.首先创建试图，UIScrollView,UIImageView,UILabel,UIPageControl.创建的时候，设置UIScrollView的contentSize为屏幕的三倍大小，所以UIScrollView有三张屏幕的大小，最初显示的时候是现实最中间的那一屏。创建左_imgVLeft、中_imgVCenter、右_imgVRight三张UIImageView，分别放在UIScrollView对应的三张屏。当前屏幕显示的是UIScrollView的中间那一部分，显示UIImageView的中间_imgVCenter的那张图片。

2.设置默认设置的时候，setDefaultInfo方法，其实是通过_currentImageIndex来设置图片的展示。

3.拖拽UIScrollView的时候，

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

     [self reloadImage];//先更换左_imgVLeft、中_imgVCenter、右_imgVRight的图片，把图片总体向左或右移一张

     

     _scrV.contentOffset = CGPointMake(kWidthOfScreen, 0.0);//设置偏移量，是UIScrollView回到中间那一屏，其实只是通过那个拖拉过程，转换了三个UIImageView的图片，UIScrollView的位置和UIImageView的位置都没变。

     _pageC.currentPage = _currentImageIndex;

     

     NSString *currentImageNamed = [NSString stringWithFormat:@ "%lu.png" , (unsigned long)_currentImageIndex];

     _lblImageDesc.text = _mDicImageData[currentImageNamed];

}

4.最后总结，就想当与一张大纸（UIScrollView）上有三个框，左，中，右（相当于与屏幕的大小），最开始显示中间的那个框，通过拖拽，先转换框中的图片，根据拖拽的方向，换成原先图片左边或右边的那张，然后通过设置偏移量又回到最开始的状态，只是框中的图片换了。