en

hi, it seems you are using microsoft internet explorer. it doesn't match web standard and causes problems browsing this site. please please please use mozilla firefox or google chrome instead. thank you!

zh

哦哦!您正在使用Internet Explorer 瀏覽器,它與我們的網頁標準並不相容,可能會導致畫面顯示不正常。
請改用 Mozilla Firefox 或者 Google Chrome 才能正常瀏覽本網站,謝謝!

4.25.2011

使用 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: 是不會起作用的喔!

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







5 則留言:

  1. 您好,我想請問如果我想加上左右按紐可以到下一頁的話
    我應該怎麼處理呢?

    回覆刪除
    回覆
    1. Cloud 您好:

      如果您想要使用左右按鈕來控制畫面的話,你可以參考以下這邊文章來做設定:

      使用 UIPageControl 與 UIScrollView 來實作畫面切換的效果
      http://furnacedigital.blogspot.tw/2012/05/uipagecontrol-uiscrollview.html

      當按下按鈕時來控制 UIScrollView 所要移動到的位置,其實本範例亦是如此,只是在上述文章中你會看到更完整的範例,
      另外也請注意按鈕增加的位置是要在主要的 VIEW 中而不是 UIScrollView,不然當您捲頁的時候,按鈕可是會跟著 UIScrollView 一起跑喔。

      刪除
    2. 牛奶 您好:

      感謝您的回答,我所遇到的問題是這樣的:
      在UIScrollView作滑動的循環頁面是沒有問題的
      所有動畫部份都會順暢進行

      當使用按鈕來控制畫面時,則會發生這樣的問題
      以範例所示
      1 2 3 4 5
      3 1 2 3 1

      當我要叢第三張跳回第一張的時候,(對scrollView來講是滑到第五個位子並偷偷將座標移回第2個位子的1)
      我想請問如果我想用按鈕達成一樣的效果我應該怎麼處理?

      如果我使用
      [scrollTopicView setContentOffset:CGPointMake(320, 0) animated:YES];
      這樣控制的話他會快速往回捲到第一張,沒有辦法展示出滑動至下一張的動畫效果

      感謝你 :)

      刪除
    3. Cloud 您好:

      你要將動畫關閉 animated:NO 不然的話會出現移動過去的效果,關掉就沒事了。
      按下按鈕->scrollTopicView 滑動至下一張(animated:YES)->scrollTopicView 偷偷設定成對應的影像位置(animated:NO)

      大概是這樣子!

      刪除
    4. 牛奶 您好:

      感謝您的解答!
      這樣子設定就沒問題了!真是太感謝了:)

      刪除