Pedal Dragging UI

Rick Huang
Jul 20, 2017 · 2 min read

如果你是個吉他手或貝斯手應該可以滿容易看出這個 UI 在做什麼,這曾是某家知名數位效果器公司的面試題測驗之一,做一個「效果器能用手指拖拉至線路上任意位置」的介面,看似很直覺的操作但卻讓我苦苦思考了一週才想出怎麼把這效果給拼湊出來,只能說賈伯斯大大有有句話說得忠懇:「簡單的東西,從來都不簡單
(謎之聲:這話都講到這了,有腦之人就不要再隨便講出什麼幫我簡單設計的東西,加個簡單的功能,談個簡單的戀愛這種屁話了)

介面以4個 UICollectionView 與若干個 CollectionViewCell (Pedal) 構成,在同個 CollectionView 內實現拖拉效果很容易,而在兩個 CollectionView 之間拖拉就比較麻煩一點,所以當 CollectionViewCell 被拖拉出原本所在的 CollectionView 範圍外之後,就要複製該 Cell 的 View 並跟著手指移動,直到拖拉至終點放開後,將 Cell 的內容更新到終點的 CollectionView,再以動畫方式呈現更新介面。

其中也有新增與刪除功能,這相對拖拉來說就簡單多了。

目前 iOS 上應該不少元件可以兜出類似的功能,例如 iOS 9 出現的 Stack View 應該可以取代 CollectionView 來做到更好的動畫效果,但我這邊目前還是以比較基本的做法呈現,當然動畫效果以 UI/UX 的角度來看也還是不及格的lol,當初並沒有花很多時間在整理程式碼,寫的有點亂,有興趣的自己看看嚕。

Github link: https://github.com/rickhung76/PositiveGridDemo

彼得潘的 Swift iOS App 開發教室

學習 Swift iOS App 開發的學生作品集

)

    Rick Huang

    Written by

    彼得潘的 Swift iOS App 開發教室

    學習 Swift iOS App 開發的學生作品集

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade