#1 Imitate My YouTube Music
Published in
Oct 2, 2022
這次要來模仿的是我最常用的app-YouTube music,因為很喜歡它整個頁面的排版,所以決定拿他來當我第一次的模仿對象!
廢話不多說,先來上成果圖!
(1)成果對照圖
(2)部分程式說明
這次的圖標大部分都是從SF 裡面找的,除了播放鍵,播放量,最下面的bar,和最上面歌曲,影片的兩個button
a.SF內建的播放鍵是白底的
為了讓他跟YouTube Music的播放鍵一樣
我在button底下設置clipSahpe,讓他多一個透明的圈圈
b.播放量
先利用ProgressView產生下圖(value可以設定播放比例)
再用ZStack在上面堆疊一個圓圈
Code
c.最上面的歌曲和影片
用兩個button去堆疊
值得注意的是兩個button要用leading去對齊,而且下面的button要比上面的大
(3)心得:
這次模仿最難的地方是他的排版,我是利用padding()和spacer()去控制他的間隔,但也因為這樣它常常會跑掉,就要一直修改。雖然這次的作業還沒有到真的完全一樣,但我大概了解swiftul是怎麼運作的。希望以後練習越多,可以做出完全一樣的畫面
(4)我的github code