Pages

Saturday, November 12, 2011

用 iCarousel 在 iPhone App 上做出旋轉木馬效果的顯示

iCarousel 是一套在 GitHub 上 Open Source Project,它是一個 class 設計來簡單套用即可呈現多種樣貌的類似旋轉木馬效果的在 iPhone 或者 iPad App 上面呈現。

想要看效果可以參考 forked 來自 nicklockwood/iCarouselpolydice/iCarousel ,下載回去打開 iCarousel iOS Demo 就可以看到這種效果展示了。iCarousel 是用 type 來設定要顯示的樣式,目前分為 Linear, Rotary, Inverted Rotary, Cylinder, Inverted Cylinder, Cover Flow, Cover Flow 2, Custom。

在使用上很簡單不過,除了規劃好基本的 type 和要顯示的 frame 之外,透過兩個 protocol 來做所有的設定和參考互動。

iCarouselDelegate 這個 Protocol 提供了以下各種 Delegate 的 method :

讓我們回傳單張 carousel 項目的寬度,通常要比承載的 UIView 在寬一點,這樣多張彼此在呈現才會預留些空間。

是否要讓 carousel 重複旋轉回來

當使用者用手指在螢幕上點選了某一個 carousel 項目,會進入這個 method,我們就可以在這裡做些邏輯。例如根據傳入的 index 知道點選了第幾個 carousel,而在根據這個 carousel 做出下一步,例如開啟新的網頁瀏覽器視窗。

iCarouselDataSource 這個 Protocol 提供了設定該 Carousel:

告知 carousel 總共會有幾個項目要呈現。

當畫面要顯現到第幾個 carousel 項目時候,我們在這裡規劃要回傳的 UIView,例如我們就可以回傳一張圖片的物件回去,這樣就可以顯現在畫面上。

根據這樣子再搭配到 ViewController 上,當畫面出現而此 iCarousel 也可以顯現出來了。如果今天想要支援輪播效果呢?例如 5 秒鐘替換成下一張。我們可以用 NSTimer 去註冊每 5 鐘執行到 loopSwitchImage 這樣的 selector ,再由 loopSwitchImage 來實作翻動到下一個的效果。對應到 iCarousel 是

就會幫我們 scroll 到該項目呈現在畫面上了。

以上這樣的寫法可以用在很多場合,有時候會為了呈現豐富的畫面,讓顯示和尚未顯示做個收納,如此效果呈現是一種好的方法,但是如果搭配上輪播就會讓使用者的 iPhone 畫面看起來過度的撩亂和不必要的花俏,所以設計上要斟酌使用。

No comments:

Post a Comment