iOS UIScrollView、UIPageControl、NSTimer的使用

要實現的功能：五張圖片自動+循環滾動，Page控制器跟隨圖片變化

首先先聲明幾個全局變量

//屏幕的寬
#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
//我用的圖片的尺寸是260*600，爲了適應屏幕大小，等比例縮放一下
#define HEIGHT_IMAGE 260*SCREEN_WIDTH/600
@property(nonatomic,strong)UIScrollView *sc;
@property(nonatomic,strong)UIPageControl*pc;
@property(nonatomic,strong)NSTimer*timer;

一. UIScrollView的建立

手機的屏幕是有限的，當想展現的內容超過手機的屏幕範圍，就須要經過手勢的上下滑動來獲取所有內容，UIScrollView是一個可以滾動的視圖控件,它的contentSize屬性就是告訴UIScrollView全部內容的尺⼨寸,也就是包含了它能滾動到的範圍。

1.建立UIScrollView

self.sc=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 14, SCREEN_WIDTH, HEIGHT_IMAGE)];

2.設置實際內容的Size

self.sc.contentSize=CGSizeMake(SCREEN_WIDTH*5, HEIGHT_IMAGE);

3.加載圖片

for (int i=0; i<5; i++) {
//個人圖片命名是以img_0+1/2/3/4/5命名的
        NSString*img_name=[NSString stringWithFormat:@"img_0%d",i+1];
        UIImage *image=[UIImage imageNamed:img_name];
//ImageView的X設置爲每一個頁面的起始橫座標
        UIImageView*iv=[[UIImageView alloc]initWithFrame:CGRectMake(i*SCREEN_WIDTH, 14, SCREEN_WIDTH, HEIGHT_IMAGE)];
        iv.image=image;
        [self.sc addSubview:iv];
    }

4.設置按頁滾動

self.sc.pagingEnabled=YES;

5.取消顯示水平滾動條

sc.showsHorizontalScrollIndicator=NO;

二. UIPageControl的建立

1.建立UIPageControl

self.pc=[[UIPageControl alloc]initWithFrame:CGRectMake(0, 64+HEIGHT_IMAGE-20, SCREEN_WIDTH, 
20)];

2.設置總頁數

pc.numberOfPages=5;

3.設置當前索引所在頁數

self.pc.currentPage=0;

4.設置默認顏色

self.pc.pageIndicatorTintColor=[UIColor brownColor];

5.設置當前索引所在位置的顏色

self.pc.currentPageIndicatorTintColor=[UIColor orangeColor];

此時雖然生成了頁面控制器，可是還沒法跟隨圖片一塊兒滾動

這裏介紹兩個UIScrollView的方法，首先添加代理

@interface ViewController ()<UIScrollViewDelegate>
sc.delegate = self;

①當用戶開始拖拽時響應的方法

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
}

②當動畫緩衝結束時相應的方法

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

6.設置索引與對應頁數圖片一致

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//    當前頁數=偏移量/屏幕寬度
    int i= scrollView.contentOffset.x/SCREEN_WIDTH;
    self.pc.currentPage=i;
}

三.添加計時器

推送的內容是會本身循環滾動的，不須要一直去用手勢操做來獲取下一頁的信息。

1.建立NSTimer

//     @param NSTimeInterval 倒計時
//     @param target:        self
//     @param selector :     須要響應的方法
//     @param userInfo:      nil
//     @param repeats :      是否重複倒計時
self.timer=[NSTimer timerWithTimeInterval:2 target:self selector:@selector(TimerAction) 
userInfo:nil repeats:YES];

2.把建立的NSTimer加入到NSRunLoop

// NSRunLoop就是APP自己的計時器
 NSRunLoop*loop=[NSRunLoop mainRunLoop];    
[loop addTimer:self.timer forMode:NSRunLoopCommonModes];

3.在響應的方法中設置自動滾動

-(void)TimerAction{
    if (self.pc.currentPage==4) {
        //最後一頁無法往下走，只能回到第一頁
        [self.sc setContentOffset:CGPointMake(0, 0) animated:NO];
        self.pc.currentPage=0;
    }else{
        //往下一頁走
        self.pc.currentPage++;
        [self.sc setContentOffset:CGPointMake(self.pc.currentPage*SCREEN_WIDTH, 0) 
animated:YES];
    }
}

4.當用戶開始拖拽的時候，計時器應該消失

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
   //計時器中止   
   [self.timer invalidate];
}
    //自動中止後，沒有再啓動的方法,只有從新初始化

四.實現無限滾動

當咱們拖拽到最後一頁時，再像右進行拖拽，是沒有用的，依然停留在最後的頁面上，同理，第一頁像左拖拽也是如此。無限滾動，便可以從最後一頁，像右拖拽，直接回到第一頁，第一頁像左拖拽，直接來到最後一頁。

原理以下：要顯示的五張圖片記爲1~5，放置七張圖片，第一張爲圖片5，最後一張爲圖片1，經過偏移量設置初始顯示的圖片爲圖片1，像左拉時，經過UIScrollView的響應方法，在開始拖拽時，運用偏移量將圖片跳轉到倒數第二張圖片（即圖片5），同理可知如何實現向右無限滾動

1.修改實際內容的Size

self.sc.contentSize=CGSizeMake(SCREEN_WIDTH*7, [self heightforimage]);

2.添加7張圖片,這裏我爲了方便我將圖片名改成1~7

for (int i=0; i<7; i++) {   
        UIImageView *iv=[[UIImageView alloc]initWithFrame:CGRectMake(SCREEN_WIDTH*i, 0, 
SCREEN_WIDTH, [self heightforimage])];
        iv.image=[UIImage imageNamed:[NSString stringWithFormat:@"%d",i+1]];        
        [self.sc addSubview:iv];  
            }

3.設置初始偏移量

//最初顯示的爲圖片2，即以前的圖片1（這裏圖片2~6分別和以前的圖片1~5對應）
self.sc.contentOffset=CGPointMake(SCREEN_WIDTH, 0);

3.經過偏移量實現無限循環

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
//當偏移量x小於屏幕時，表示即將要從圖片2拖拽到圖片1，這時直接跳轉到倒數第二張圖片（以前的圖片5）
    if (self.sc.contentOffset.x<SCREEN_WIDTH) {
        self.sc.contentOffset=CGPointMake(SCREEN_WIDTH*5, 0);
    }
    if (self.sc.contentOffset.x>SCREEN_WIDTH*5) {
//當偏移量x大於SCREEN_WIDTH*5時，表示即將要從圖片6拖拽到圖片7，這時直接跳轉到正數第二張圖片（以前的圖片1）
        self.sc.contentOffset=CGPointMake(SCREEN_WIDTH, 0);
    }
}

4..設置索引與對應頁數圖片一致

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    int i= scrollView.contentOffset.x/(SCREEN_WIDTH);
    if (i==0) {
        self.pc.currentPage=4;
    }else if(i==6){
        self.pc.currentPage=0;
    }else{
        self.pc.currentPage=i-1;}
}