UIScrollView無限滾動的圖解：
UIScrollView無限滾動的思路：就是每一次滑動之后顯示圖片都是最中間的那張圖片，每次滑動都要改變圖片下標的索引，第一張和最后一張要做特殊判斷
UIScrollView無限滾動的代碼：
.h文件
// XMGInfiniteScrollView.h
// 無限滾動-UIScrollView
// Created by 1 on 14/12/30.
// Copyright ? 2014年 xiaoming. All rights reserved.
#import <UIKit/UIKit.h>
@interface XMGInfiniteScrollView : UIView
#pragma mark - 給外界提供接口
@property (nonatomic, strong) NSArray *imageNames; /** 本地圖片名 */
@property (nonatomic, strong) NSArray *imageNames; /** 遠程圖片URL */
//@property (nonatomic, strong) NSArray *images; /** 圖片 */
@end
.m文件
// XMGInfiniteScrollView.m
// 無限滾動-UIScrollView
// Created by 1 on 14/12/30.
// Copyright ? 2014年 xiaoming. All rights reserved.
#import "XMGInfiniteScrollView.h"
@interface XMGInfiniteScrollView()
@property (nonatomic, weak) UIScrollView *scrollView;
@property (nonatomic, weak) UIPageControl *pageControl;
@property (nonatomic, weak) NSTimer *timer;
@end
@implementation XMGInfiniteScrollView
static NSUInteger const XMGImageViewCount = 3;
#pragma mark - 初始化方法
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
// 創建并添加scrollView對象
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.backgroundColor = [UIColor redColor];
scrollView.showsVerticalScrollIndicator = NO; // 隱藏垂直滾動條
scrollView.showsHorizontalScrollIndicator = NO; // 隱藏水平滾動條
scrollView.pagingEnabled = YES; // 分頁
scrollView.delegate = self; // 代理
[self addSubview:scrollView];
self.scrollView = scrollView;
self.scrollView.bounces = NO;
// 創建3個UIImageView對象
for (NSUInteger i = 0; i < XMGImageViewCount; i++) {
UIImageView *imageView = [[UIImageView alloc] init];
[scrollView addSubview:imageView];
}
// 創建pageControl對象
UIPageControl *pageControl = [[UIPageControl alloc] init];
pageControl.backgroundColor = [UIColor blueColor];
[self addSubview:pageControl];
self.pageControl = pageControl;
// 開啟定時器
[self startTimer];
}
return self;
}
- (void)layoutSubviews
{
[super layoutSubviews];
// scrollView
self.scrollView.frame = self.bounds;
// 設置pageControl的frame
CGFloat pageControlW = 100;
CGFloat pageControlH = 30;
CGFloat pageControlX = self.bounds.size.width - pageControlW;
CGFloat pageControlY = self.bounds.size.height - pageControlH;
self.pageControl.frame = CGRectMake(pageControlX, pageControlY, pageControlW, pageControlH);
// 設置3個UIImageView的frame
CGFloat imageW = self.scrollView.frame.size.width;
CGFloat imageH = self.scrollView.frame.size.height;
for (NSUInteger i = 0; i < XMGImageViewCount; i++) {
UIImageView *imageView = self.scrollView.subviews[i];
CGFloat imageX = i * imageW;
CGFloat imageY = 0;
imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);
imageView.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255)/255.0 green:arc4random_uniform(255)/255.0 blue:arc4random_uniform(255)/255.0 alpha:1.0];
}
self.scrollView.contentSize = CGSizeMake(XMGImageViewCount * imageW, 0);
// 更新UIImageView內容
[self updateContent];
}
#pragma mark - 屬性setter
- (void)setImageNames:(NSArray *)imageNames
{
_imageNames = imageNames;
// 設置總頁碼
self.pageControl.numberOfPages = imageNames.count;
}```
#核心代碼開頭
pragma mark - 其他方法
- (void)updateContent
{
// 1.從左到右重新設置每一個UIImageView的圖片
for (NSUInteger i = 0; i < XMGImageViewCount; i++) {
UIImageView *imageView = self.scrollView.subviews[i];
// 求出i位置imageView對應的圖片索引
NSInteger imageIndex = 0; // 這里的imageIndex不能用NSUInteger
if (i == 0) { // 當前頁碼 - 1
imageIndex = self.pageControl.currentPage - 1;
} else if (i == 2) { // 當前頁碼 + 1
imageIndex = self.pageControl.currentPage + 1;
} else { // // 當前頁碼
imageIndex = self.pageControl.currentPage;
}
// 判斷越界
if (imageIndex == -1) { // 最后一張圖片
imageIndex = self.imageNames.count - 1;
} else if (imageIndex == self.imageNames.count) { // 最前面那張
imageIndex = 0;
}
imageView.image = [UIImage imageNamed:self.imageNames[imageIndex]];
// 綁定圖片索引到UIImageView的tag
imageView.tag = imageIndex;
}
// 2.重置UIScrollView的contentOffset.width == 1倍寬度
self.scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);
}
核心代碼結束
pragma mark -<UIScrollViewDelegate>
/****
*** 只要scrollView滾動，就會調用這個方法
*/
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
// imageView的x 和 scrollView偏移量x 的最小差值
CGFloat minDelta = MAXFLOAT;
// 找出顯示在最中間的圖片索引
NSInteger centerImageIndex = 0;
for (NSUInteger i = 0; i < XMGImageViewCount; i++) {
UIImageView *imageView = self.scrollView.subviews[i];
// ABS : 取得絕對值
CGFloat delta = ABS(imageView.frame.origin.x - self.scrollView.contentOffset.x);
if (delta < minDelta) {
minDelta = delta;
centerImageIndex = imageView.tag;
}
}
// 設置頁碼
self.pageControl.currentPage = centerImageIndex;
}
/**
- 滾動完畢后調用（前提：手松開后繼續滾動）
*/
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
[self updateContent];
}
/**
- 當用戶即將開始拖拽的時候調用
*/
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
[self stopTimer];
}
/**
- 當用戶即將結束拖拽的時候調用
*/
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
[self startTimer];
}
pragma mark - 定時器處理
// 開啟定時器
- (void)startTimer
{
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];
[[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}
// 停止定時器 - (void)stopTimer
{
[self.timer invalidate];
self.timer = nil;
}
// 顯示下一頁 - (void)nextPage
{
[UIView animateWithDuration:0.25 animations:^{
self.scrollView.contentOffset = CGPointMake(2 * self.scrollView.frame.size.width, 0);
} completion:^(BOOL finished) {
[self updateContent];
}];
}
@end```
運行效果圖：
