iOS-自動循環滾動視圖

自動循環滾動視圖
#import <UIKit/UIKit.h>

//1. 引入代理
@interface ReuseLoopView : UIView <UIScrollViewDelegate>

//2. 定義一個數組，dataArray中存放的是圖片名
@property(nonatomic, strong) NSArray *dataArray;

//定時器
@property (nonatomic, strong) NSTimer *timer;

@end




#import "ReuseLoopView.h"

//定義屏幕的寬度
#define kScreenWidth [UIScreen mainScreen].bounds.size.width 
#define kScreenHeight [UIScreen mainScreen].bounds.size.height

//定義分頁控件的高度 
#define kPageControlHeight 37

@interface ReuseLoopView() {

//1. 定義三個視圖：代表左邊、中間和右邊的視圖，
//  思路：滑動時，就按照1、2、3、1、2、3、....
UIImageView *_leftImageView;
UIImageView *_centerImageView;
UIImageView *_rightImageView;

//2. 創建滑動視圖和分頁控件
UIScrollView *_scrollView;
UIPageControl *_pageControl;

//3. 存儲當前頁面的頁碼
NSInteger _currentPageNumber;
}

@end

@implementation ReuseLoopView

//1. 複寫init方法 ----------> 保證每次創建的對象都是相同佈局
- (instancetype) init {
//注意init這裏的frame創建和initWithFrame創建佈局不同
//解決：定義一個frame的全局變量即可
return [self initWithFrame:[UIScreen mainScreen].bounds];
}

//2. 複寫initWithFrame方法
- (instancetype) initWithFrame:(CGRect)frame {

self = [super initWithFrame:frame];
if (self != nil) {
    //使用createUI來創建佈局
    [self createUI:frame];
}

return self;
}

//3. 創建UI佈局
- (void) createUI: (CGRect) frame {

//1) 創建滑動視圖
//a) 初始化_scrollView
_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, frame.size.height-kPageControlHeight)];
//b) 設置代理方法
_scrollView.delegate = self;
//c) 設置允許分頁效果
_scrollView.pagingEnabled = YES;
//d) 隱藏水平垂直的滑動塊
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.showsVerticalScrollIndicator = NO;
// e)設置是否有邊界
_scrollView.bounces = NO;
//f) 添加到視圖中
[self addSubview:_scrollView];

//2) 分頁效果
//a) 初始化分頁控件
_pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, frame.size.height - kPageControlHeight, kScreenWidth, kPageControlHeight)];
//b) 設置背景顏色
_pageControl.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"global_bg"]];

//c) 添加到視圖中
[self addSubview:_pageControl];

//3) 初始化左、中、右的視圖
//a) 初始化左邊的視圖
_leftImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, _scrollView.frame.size.width, _scrollView.frame.size.height)];
//b) 初始化中間的視圖
_centerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(_scrollView.frame.size.width, 0, _scrollView.frame.size.width, _scrollView.frame.size.height)];
//c) 初始化右邊的視圖
_rightImageView = [[UIImageView alloc] initWithFrame:CGRectMake(_scrollView.frame.size.width*2, 0, _scrollView.frame.size.width, _scrollView.frame.size.height)];
//d) 將三張視圖添加到滑動視圖上
[_scrollView addSubview:_leftImageView];
[_scrollView addSubview:_centerImageView];
[_scrollView addSubview:_rightImageView];

//3）初始化timer,用這個方法初始化計時器不需要手動啓動計時器，如果用init需要手動啓動
_timer = [NSTimer scheduledTimerWithTimeInterval:1
                                      target:self
                                    selector:@selector(timeAction:)
                                    userInfo:nil
                                     repeats:YES];
}

#pragma mark - 定時器的實現方法
- (void) timeAction:(NSTimer *)timer {
//根據頁碼
NSInteger pageNum = _currentPageNumber % _dataArray.count;
_currentPageNumber = pageNum;
[self loadPageContent];
_currentPageNumber++;
}

//4. 設置初始化的數據
- (void) setInitProperty {

//1) 設置分頁控件的頁數
_pageControl.numberOfPages = _dataArray.count;
//2) 設置滑動區間
_scrollView.contentSize = CGSizeMake(_dataArray.count * _scrollView.frame.size.width, _scrollView.frame.size.height);
//3) 設置偏移量
_scrollView.contentOffset = CGPointMake(_scrollView.frame.size.width, 0);
//4) 設置當前頁數
_currentPageNumber = 0;
//5) 調用相關方法，加載圖片
[self  loadPageContent];
}

//5. 加載頁面內容
- (void) loadPageContent {

//1) 設置中間視圖的圖片：通過當前頁碼的指示器來獲取圖片
_centerImageView.image = [UIImage imageNamed:_dataArray[_currentPageNumber]];

//2) 設置左邊的圖片
//a) 獲取指示器，注意_currentPageNumber = 0的情況
NSInteger leftImageIndex = (_currentPageNumber - 1 + _dataArray.count) % _dataArray.count;
//b) 設置圖片
    _leftImageView.image = [UIImage imageNamed:_dataArray[leftImageIndex]];

//3) 設置右邊的圖片
    //b) 獲取右邊的指示器，注意_currentPageNumber = 4;
NSInteger rightImageIndex = (_currentPageNumber + 1) % _dataArray.count;
//c) 設置右邊的圖片
_rightImageView.image = [UIImage imageNamed:_dataArray[rightImageIndex]];

//4) 設置分頁控件的當前頁數
_pageControl.currentPage = _currentPageNumber;
}

//6. 複寫_dataArray的set方法，目的是初始化
- (void) setDataArray:(NSArray *)dataArray {

//1) 注意一下，圖片少於3張的情況，這個情況，大家自己考慮一下如何完成
//  解釋：如果dataArray的類型不是數組，或者dataArray的數據少於3條，就返回
if ( ![dataArray isKindOfClass:[NSArray class]] || dataArray.count < 3 ) {
NSLog(@"圖片數目不能少於3條...");
return;
}

//2) 傳值
_dataArray = dataArray;

//3) 加載初始化數據
[self setInitProperty];

}

//7. 頁面切換的代理方法處理
- (void) scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

//1) 打印滑動數據
NSLog(@"7.0 offset.x = %.2f, bounds.x = %.2f", _scrollView.contentOffset.x, _scrollView.bounds.size.width);

//2) 向左、向右滑動
/**
a) 當前的bounds.x(375) 是屏幕的寬度；
b) 但是在向左滑動的過程中，右邊的imageView(+375)顯示出來了，offset.x > bounds.x；
c) 向右滑動的時候，左邊(負值-375)出來了，offset.x < bounds.x
 */
if (_scrollView.contentOffset.x > _scrollView.bounds.size.width) {

NSLog(@"7.1 向左邊滑動...");
//說明：向左滑動，右邊的圖片出來，就+1
_currentPageNumber = (_currentPageNumber + 1) % _dataArray.count;

} else if(_scrollView.contentOffset.x < _scrollView.bounds.size.width) {    //向右滑動

NSLog(@"7.2 向右邊滑動...");
//說明：向右滑動，左邊的圖片出來，就-1
_currentPageNumber = (_currentPageNumber - 1 + _dataArray.count) % _dataArray.count;

}

//2) 重新加載數據 -----> 如果不重新加載，那麼每次就加載中間的圖片
[self loadPageContent];

//3) 設置偏移量 -----> 因爲加載的圖片是中間的那張的那張圖片，而中間的圖片的偏移量正好是_scrollView.bounds.size.width
_scrollView.contentOffset = CGPointMake(_scrollView.bounds.size.width, 0);

}

// 滾動視圖將要開始拖動滾動的時候的委託回調方法(自動調用偏移的時候不會回調這個方法，需外力作用，下面依舊是)
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
[self.timer invalidate];//取消計時器
self.timer = nil;//避免野指針
}

/**
*  滾動視圖拖動滾動結束時候的委託回調方法(手拖動離開屏幕的時候）
* decelerate 是否減速
*/
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate     {
_timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(timeAction:) userInfo:nil repeats:YES];
}


@end