UIScrollView 循环滚动，代码超简单

如今非常多应用里面多多少少都用到了循环滚动，要么是图片、要么是view，或者是其它，我总结一下，写了个demo分享给大家。

先看代码之后在讲原理：

1.创建一个空的项目（这个我就不多说了）。

2.加入一个ViewController。

3.在appdelegate加入：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

ViewController *vc = [[ViewController alloc] init];
self.window.rootViewController = vc;

self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];
return YES;
}

4.看看ViewController.m里面的文件：

<span style="font-size:14px;">#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *readCannelScrollView;
@property (nonatomic, strong) UILabel *pageOneView;
@property (nonatomic, strong) UILabel *pageTwoView;
@property (nonatomic, strong) UILabel *pageThreeView;

@end

@implementation ViewController

- (void)dealloc
{
_readCannelScrollView = nil;
_pageOneView = nil;
_pageTwoView = nil;
_pageThreeView = nil;
}

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
}
return self;
}

- (void)viewDidLoad
{
[super viewDidLoad];

//容器的属性设置
self.readCannelScrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:self.readCannelScrollView];
CGSize size = self.readCannelScrollView.contentSize;
size.width = 320*3;
self.readCannelScrollView.contentSize = size;
self.readCannelScrollView.pagingEnabled = YES;
self.readCannelScrollView.showsHorizontalScrollIndicator = NO;
self.readCannelScrollView.delegate = self;
self.readCannelScrollView.contentOffset = CGPointMake(0, 0);
//end

//加入页面1
self.pageOneView = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, self.view.bounds.size.height)];
self.pageOneView.backgroundColor = [UIColor lightGrayColor];
self.pageOneView.text = @"1";
self.pageOneView.font = [UIFont systemFontOfSize:80];
self.pageOneView.textAlignment = NSTextAlignmentCenter;
[self.readCannelScrollView addSubview:self.pageOneView];

//加入页面2
self.pageTwoView = [[UILabel alloc] initWithFrame:CGRectMake(320, 0, 320, self.view.bounds.size.height)];
self.pageTwoView.backgroundColor = [UIColor greenColor];
self.pageTwoView.text = @"2";
self.pageTwoView.font = [UIFont systemFontOfSize:80];
self.pageTwoView.textAlignment = NSTextAlignmentCenter;
[self.readCannelScrollView addSubview:self.pageTwoView];

//加入页面3
self.pageThreeView = [[UILabel alloc] initWithFrame:CGRectMake(640, 0, 320, self.view.bounds.size.height)];
self.pageThreeView.backgroundColor = [UIColor grayColor];
self.pageThreeView.text = @"3";
self.pageThreeView.font = [UIFont systemFontOfSize:80];
self.pageThreeView.textAlignment = NSTextAlignmentCenter;
[self.readCannelScrollView addSubview:self.pageThreeView];
}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}

#pragma mark -
#pragma mark - scroll delegate
<span style="color:#996633;">- (void) scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
NSLog(@"scrollView.contentOffset.x=%f",scrollView.contentOffset.x);
CGFloat pageWidth = scrollView.frame.size.width;
int currentPage = floor((scrollView.contentOffset.x-pageWidth/2)/pageWidth)+1;

if (currentPage == 0)
{
UILabel *tmpTxtView = self.pageThreeView;
self.pageThreeView = self.pageTwoView;
self.pageTwoView = self.pageOneView;
self.pageOneView = tmpTxtView;
}

if (currentPage == 2)
{
//换指针
UILabel *tmpTxtView = self.pageOneView;
self.pageOneView = self.pageTwoView;
self.pageTwoView = self.pageThreeView;
self.pageThreeView = tmpTxtView;
}

//恢复原位
self.pageOneView.frame = (CGRect){0,0,self.pageOneView.frame.size};
self.pageTwoView.frame = (CGRect){320,0,self.pageTwoView.frame.size};
self.pageThreeView.frame = (CGRect){640,0,self.pageThreeView.frame.size};
self.readCannelScrollView.contentOffset = CGPointMake(320, 0);

}

@end</span>

5.原理说明，小伙伴我们一起想一下。怎样让一个scrollview实现循环滚动。看下图：



a.用三个View进行循环滚动，上图P1、P2、P3(程序中的pageOneView、pageTwoView、pageThreeView)

b.（開始执行除外。那是的contentoffset.x = 0）始终让P2在中间是实现循环滚动的关键。

c.P2此时在中间（如上图）即contentoffset.x = 320。此时再向左滑动。P3在中间页面，即contentoffset.x = 640。

d.这时候，肯定会想，是不是把P1移动到TEMP0的位置。小伙伴你真聪明。可是为了写成一个通用方法，光是移动位置是不正确的，那能不能保证P1、P2、P3这个顺序永远不变，答案是YES。

e.1>永远保持P1、P2、P3顺序。同一时候。位置（frame）也要同样 2>让P2用于居中。

f.满足e中两条，怎样做到：首先e的第一条看上图，滑动后的界面最右边有个红色虚拟的框框。假设假设（实际上没有移动）我把P1放到那个位置，顺序就是P2\P3\P1（TEMP0），为了保证顺序，我须要交换指针。可是假设我直接把指针P1=P2。在运行P3=P1时候。会有问题的。你懂的。在进行换值的时候须要借助暂时指针变量的。

g.指针换完了，可是位置没有变contentoffset.x = 640，我们须要scrollView.contentoffset.x = 320。

h.上述是想左滑动。向右滑动，即是同理。

6.程序分析说明：

<span style="font-size:14px;">CGFloat pageWidth = scrollView.frame.size.width;
int currentPage = floor((scrollView.contentOffset.x-pageWidth/2)/pageWidth)+1;</span>

floor计算 的出来是0、1、2，能够利用是0还是2进行推断用户是向左滑动，还是向右滑动。从而实现循环滚动，后台在配合数组的使用。就能够实现图片等循环滚动啦！

点击下载源码