使用 UIScrollView 做無限循環的照片瀏覽

在 UIScrollView 當中，有一項 property 名字為 pagingEnabled 。當設定此 property 為 YES ,即可開始使用類似在 iPhone 桌面的頁面切換方式，只要設定好每一個 subview 的 frame 大小，然後加入 UIScrollView，再開啟 pagingEnabled ，就可以讓 UIScrollView 進行一頁一頁的瀏覽，但是如何讓第一個 subview 跟最後一個 subview 做連結，讓整個 scrollview 產生循環的感覺？

本篇文章不進行 UIScrollView 的基礎設定介紹，主要介紹如何產生無限循環的錯覺。假設有三個圖片，要讓三張圖片無限循環必須先讓這三張圖片完成以下的順序排列，如下圖所示：

上圖中，說明了三張圖的排列順序必須為 3 1 2 3 1 ，也就是必須在 scrollview 裡面放入五張圖片，第一個位置是放第三張圖片，接下來放第一張到第三張，最後一張是放第一張圖片。

然後在 viewcontroller 裡viewDidLoad 方法中，讓 scrollview 的起始位置從第二個位置開始，第二個位置是放哪一張圖片呢？ 是第一張圖片喔，別忘記。接下來，我們在 viewcontroller 中置入下列程式碼：

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    if (self.cycleScrollView.contentOffset.x == 0) {
        [self.cycleScrollView scrollRectToVisible:CGRectMake(3*320, 0, 320, 460) animated:NO];
    }
    else if(self.cycleScrollView.contentOffset.x == 1280) {
    [self.cycleScrollView scrollRectToVisible:CGRectMake(320, 0, 320, 460) animated:NO];
    }
}

上列程式碼中，cycleScrollView 是筆者宣告的 UIScrollView instance variable 。此段程式碼說明，當 contentOffset 為零的時候，也就是 scrollview 到達第一個位置的時候，偷偷地將 scrollview 的位置移動到第四個位置，注意到了嘛，第一個位置以及第四個位置都是放第三張圖片，所以同理，以此方式處理最後一個位置的圖片。如此就完成了無限循環的照片瀏覽程式。

另外，要提醒讀者，要在 viewcontroller.h 檔中，加入 UIScrollViewDelegate ，否則 scrollViewDidEndDecelerating: 是不會起作用的喔！

以下為完成後的成果影片，三張圖片可以不停的循環。