iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
0
Mobile Development

諸神黃昏下的 iOS 工程師系列 第 21

D21 - 在 CollectionView 中加一個會滑起來的滑塊吧!

  • 分享至 

  • xImage
  •  

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

? 隕石小故事

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

Overview

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


實作

首先我們簡單做一個 CollectionView 畫面,之後會將滑塊加到其中。

|滑塊製作

首先我們建立一個名為 slider 的屬性,類型為 UIView,接著透過一個方法來建立它:

這邊比較特別的是,我們有設定 slider.center.y,因為我們希望的 y 軸位置都在 collectionViewmaxY 往上 3pt 的位置,而還有一個比較特別的是,我們還執行了一次 didSelectItemAt[0, 0] 的位置,我們稍後會再說明。

|操作滑塊

而完成上面這段之後,我們把 setupSilder 函數加到 viewDidLoad 中,接著我們來定義 didSelectItemAt 方法:

這邊我們使用 guard 方式判斷該 indexPath 上是否有 cell,如果有的話,我們會將 slider.center.x 設置為 cell.center.x 透過這種方式來位移它,我們來看一下畫面:

|滑塊動畫

當然,前面說了要讓他滑起來,不免俗的我們這邊也來為他增加個動畫效果:

一起來看看畫面效果:

為了讓使用者更清楚了解目前選擇項目,我們可以在使用者選中 cell 時,同時將 cell 的位置移動到中心點,並且同時也有滑塊效果。如此一來,畫面會更加生動,使用者也能夠清楚明白所在位置:

一起看看畫面吧:


Summary

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


上一篇
D20 - TableView 就決定是你了!使出折疊!
下一篇
D22 - 我誰~ㄕㄜ....Safari
系列文
諸神黃昏下的 iOS 工程師31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言