#2 模仿一頁Youtube Music的APP畫面
Published in
Jul 17, 2024
用單純的UI元件和圖片，不用寫程式就可以模仿並製作出一張APP的靜態畫面。
把要模仿的圖片上傳到 iview 網站，上傳後就可以查出畫面裡各元件的大小位置和顏色資訊。
https://yangcha.github.io/iview/iview.html
一開始先處理背景時發現這張圖的背景顏色是漸層色，好像需要搭配寫程式才能呈現，所以我先用一個可以生成漸層色的網站生成背景圖。
把生成好的背景圖和要用專輯圖片放進Assets，然後根據一開始查到的元件大小位置放上image view和label。
接著實作可以水平捲動的scroll view，剛好上次上課彼得有教，馬上就用到了，就算忘了也有文章可以看，裡面的步驟都說得很詳細。
實作水平捲動的scroll view過程中，還要找出和圖片中相似的SF Symbol，這部分反而花了我最多時間，有些圖找不到一樣或相似的我就用我覺得差不多的圖代替了～
接著下面的部分就繼續放上Slider和Label以及花了很多時間找的SF Symbol並照著一開始查到的位置盡量調整得跟原始圖一樣，還有專輯圖片要倒圓角，這樣整個圖片就製作完成了。
透過這次的練習對UI元件和SF Symbol更熟悉了，不過作品的Slider上的圓點明顯比原圖的大很多，在屬性面板那也沒找到可以調整圓點大小的地方，這部分之後再請教彼得看看～～
Reference:
