#1 Imitate My YouTube Music

這次要來模仿的是我最常用的app-YouTube music,因為很喜歡它整個頁面的排版,所以決定拿他來當我第一次的模仿對象!

廢話不多說,先來上成果圖!

(1)成果對照圖

(2)部分程式說明

這次的圖標大部分都是從SF 裡面找的,除了播放鍵,播放量,最下面的bar,和最上面歌曲,影片的兩個button

a.SF內建的播放鍵是白底的

SF播放鍵

為了讓他跟YouTube Music的播放鍵一樣

我在button底下設置clipSahpe,讓他多一個透明的圈圈

b.播放量

先利用ProgressView產生下圖(value可以設定播放比例)

再用ZStack在上面堆疊一個圓圈

Code

c.最上面的歌曲和影片

用兩個button去堆疊

值得注意的是兩個button要用leading去對齊,而且下面的button要比上面的大

(3)心得:

這次模仿最難的地方是他的排版,我是利用padding()和spacer()去控制他的間隔,但也因為這樣它常常會跑掉,就要一直修改。雖然這次的作業還沒有到真的完全一樣,但我大概了解swiftul是怎麼運作的。希望以後練習越多,可以做出完全一樣的畫面

(4)我的github code

https://github.com/Pscabby/youtube-music

--

--