讓我們在 CollectionView 加上一個滑塊,讓畫面更有趣!
我在隕石跟接案其中都有接到這種需求,而這種需求都是為了讓使用者知道目前是選到哪個區塊,並且透過滑塊的效果讓畫面更加生動,但是也因為需要 follow 使用者的操作來讓滑塊滑動到特定的項目上,因此,要做好這個功能需要注意到很多東西,不然滑塊可是會不受控制的...(
真的給我滑起來了。
滑塊動畫這個需求在許多地方都蠻常見的,多半會像是用觸碰或是滾動來驅動,根據使用者點選到的新項目,滑塊就會從舊項目移動到新項目上。讓使用者了解到目前所在區域,而透過滑塊的動畫效果讓整個畫面更加生動。這次教學就來教大家如何實作這個滑塊效果吧~
首先我們簡單做一個 CollectionView 畫面,之後會將滑塊加到其中。
首先我們建立一個名為 slider
的屬性,類型為 UIView
,接著透過一個方法來建立它:
這邊比較特別的是,我們有設定 slider.center.y
,因為我們希望的 y 軸位置都在 collectionView
的 maxY
往上 3pt 的位置,而還有一個比較特別的是,我們還執行了一次 didSelectItemAt
在 [0, 0]
的位置,我們稍後會再說明。
而完成上面這段之後,我們把 setupSilder
函數加到 viewDidLoad
中,接著我們來定義 didSelectItemAt
方法:
這邊我們使用 guard 方式判斷該 indexPath 上是否有 cell,如果有的話,我們會將 slider.center.x
設置為 cell.center.x
透過這種方式來位移它,我們來看一下畫面:
當然,前面說了要讓他滑起來,不免俗的我們這邊也來為他增加個動畫效果:
一起來看看畫面效果:
為了讓使用者更清楚了解目前選擇項目,我們可以在使用者選中 cell 時,同時將 cell 的位置移動到中心點,並且同時也有滑塊效果。如此一來,畫面會更加生動,使用者也能夠清楚明白所在位置:
一起看看畫面吧:
好啦,那麼這次滑塊教學就到這邊結束啦,你可以看到我們用很簡單的方式就能在 CollectionView 上實現這個滑塊效果,並且透過點擊的方式控制滑快的位置以及選中的項目的位置,如果對於滑快效果有更好的做法,也歡迎留言與我分享、交流喔!