讓我們在 CollectionView 加上一個滑塊，讓畫面更有趣！

? 隕石小故事

我在隕石跟接案其中都有接到這種需求，而這種需求都是為了讓使用者知道目前是選到哪個區塊，並且透過滑塊的效果讓畫面更加生動，但是也因為需要 follow 使用者的操作來讓滑塊滑動到特定的項目上，因此，要做好這個功能需要注意到很多東西，不然滑塊可是會不受控制的...(真的給我滑起來了。

Overview

滑塊動畫這個需求在許多地方都蠻常見的，多半會像是用觸碰或是滾動來驅動，根據使用者點選到的新項目，滑塊就會從舊項目移動到新項目上。讓使用者了解到目前所在區域，而透過滑塊的動畫效果讓整個畫面更加生動。這次教學就來教大家如何實作這個滑塊效果吧～

實作

首先我們簡單做一個 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 的位置移動到中心點，並且同時也有滑塊效果。如此一來，畫面會更加生動，使用者也能夠清楚明白所在位置：

一起看看畫面吧：

Summary

好啦，那麼這次滑塊教學就到這邊結束啦，你可以看到我們用很簡單的方式就能在 CollectionView 上實現這個滑塊效果，並且透過點擊的方式控制滑快的位置以及選中的項目的位置，如果對於滑快效果有更好的做法，也歡迎留言與我分享、交流喔！