使用 UIPageControl 與 UIScrollView 來實作畫面切換的效果

  

使用 UIPageControl 與 UIScrollView 來實作畫面切換的效果，在 iOS 中應該算是最常見的應用。UIPageControl，一個可以顯示目操作狀態 UIControl 元件；UIScrollView 一個提供捲軸功能的 UIView 元件，下面就來看看如何透過這兩個元件來幫助我們達成切換畫面的效果。


實作 UIScrollView 捲動
由於我們要透過 UIScrollView 在捲動時的狀況來設定 UIPageControl，所以必須替實作的 Class 新增 <UIScrollViewDelegate> 協定，才能透過協定內的 scrollViewDidScroll: 方法函式取得 UIScrollView 的捲動狀況。
@interface ViewController : UIViewController <UIScrollViewDelegate>
接下來，分別對兩個元件作初始化的設定，將 UIPageControl 的範圍設定成 5（0~4），並且隱藏 UIScrollView 中所有的捲軸介面，與開啟 Paging 的功能，這樣才能讓使用者在捲頁時是以整個 UIScrollView 為單位，而不是以 Pixel 為單位。  最後我們使用一個 for 迴圈來產生 UIScrollView 中的每個 SubView，其程式碼如下。
//UIPageControl設定
[pageControl setNumberOfPages:5];
[pageControl setCurrentPage:0];

//UIScrollView設定
[scrollView setPagingEnabled:YES];
[scrollView setShowsHorizontalScrollIndicator:NO];
[scrollView setShowsVerticalScrollIndicator:NO];
[scrollView setScrollsToTop:NO];
[scrollView setDelegate:self];

CGFloat width, height;
width = scrollView.frame.size.width;
height = scrollView.frame.size.height;
[scrollView setContentSize:CGSizeMake(width * 5, height)];

//製作ScrollView的內容
for (int i=0; i!=pageControl.numberOfPages; i++) {
    CGRect frame = CGRectMake(width*i, 0, width, height);
    UIView *view = [[UIView alloc]initWithFrame:frame];

    CGFloat r, g ,b;
    r = (arc4random() % 10) / 10.0;
    g = (arc4random() % 10) / 10.0;
    b = (arc4random() % 10) / 10.0;
    [view setBackgroundColor:[UIColor colorWithRed:r green:g blue:b alpha:0.3]];

    //使用QuartzCore.framework替UIView加上圓角
    [view.layer setCornerRadius:15.0];

    [scrollView addSubview:view];
}
程式碼到此， UIScrollView 已經有捲頁的效果，只是它還無法與 UIPageControl 做溝通，不能將捲動的頁數設定在 UIPageControl 上，同樣地，操作 UIPageControl 來換頁，也無法反映於 UIScrollView 裡。（關於 UIView 圓角的製作請參考關於 UIView 圓角的二三事一文）


透過 UIScrollView 來設定 UIPageControl 的狀態
在這個部分我們將會實作 <UIScrollViewDelegate> 協定中的方法函式 scrollViewDidScroll:，來將目前 UIScrollView 所捲動的位移量換算成 UIPageControl 的頁數。
- (void)scrollViewDidScroll:(UIScrollView *)sender {
    CGFloat width = scrollView.frame.size.width;
    NSInteger currentPage = ((scrollView.contentOffset.x - width / 2) / width) + 1;
    [pageControl setCurrentPage:currentPage];
}

透過 UIPageControl 來設定 UIScrollView 的狀態
在這部分我們會透過一個自定義的方法函式 changeCurrentPage: 來將 UIPageControl 的頁數換算成 UIScrollView 的位移量，並且讓 UIScrollView 使用動畫的方式捲動過去，你可以將此方法函式與 UIPageControl 中的 Value Changed 事件做連結，這樣每當使用者操作 UIPageControl 改變頁數時，就會呼叫此函式並實作裡面的方法。
- (IBAction)changeCurrentPage:(UIPageControl *)sender {
    NSInteger page = pageControl.currentPage;

    CGFloat width, height;
    width = scrollView.frame.size.width;
    height = scrollView.frame.size.height;
    CGRect frame = CGRectMake(width*page, 0, width, height);

    [scrollView scrollRectToVisible:frame animated:YES];
}

ps:上述所使用的方式是一次產生所有的 SubView， 並將它們全部丟入 UIScrollView 中，這樣的方法雖然相當方便也容易理解，但是如果你的 UIScrollView  內容過於龐大複雜時，卻很容易占用過多的資源，一個比較好的方法是，建立一個 NSMutableArray 來存放這些 UIView 的 UIViewController，並且使用 [NSNull null] 來做暫時的初始化，等到 UIView  真的要顯示時才去產生它。