#6實作Storyboard 音樂串流 App
畫完設計稿後，這次要來練習不寫任何程式，利用Storyboard的 tab bar controller，navigation controller，table view controller & static cell 製作出音樂串流的 App。
先承認…之前我一直以為不用寫程式，應該很快就能做好了吧！
於是在畫設計稿時，一不小心就畫得太開心、太複雜了，原本預計一個晚上搞定，結果最後我整整花了4個晚上！！做完後我真的想給所有的工程師一個Respect，今天終於體會到了自己的設計稿有多難刻QQ
還好在實作的過程中，發現Xcode的快捷鍵很多都跟Figma一樣，例如檢查間距、複製元件等等，省下了很多操作上的時間。
調整架構
在製作畫面之前，我進到Xcode的第一件事情是先調整App的結構，利用Navigation、Tab Bar Controller、Navigation Controller及View Controller去建構我所需要的頁面。
接著我調整了Tab Bar的顏色及icon，這裡記得要點選Navigation Controller才能調整該icon及名稱。
運用元件
在製作畫面時，我用到了幾個元件：
水平捲動
第一個畫面中，專輯列表的區塊我用Scroll View製作水平滾動的效果。
圖片點選
接著加上Button，讓專輯圖片可以被點擊。
Container View
第二個畫面中，我原本預計利用Table View-Static Cell製作歌曲的列表，但怎麼試都不成功，詢問老師後，才發現原來不是 Table View Controller不能使用Static Cell，於是在老師的建議下，改用Container View的方式。
Table View Cell有個小缺點，就是它預設點選時會出現顏色（什麼老派作法？），可以在Selection設定＞None，讓點選時不要出現顏色。
Search Bar
在搜尋頁面新增Search Bar，我目前還不會修改樣式，於是先使用預設的。
Button、View、Label
在其他頁面的區塊中，我都大量使用了Button、View、Label三種元件（雖然不知道這樣做程式最後會不會長得很醜），如利用Button+View製作Tab，這時候的Tab還沒辦法做切換的動作，必須等未來學習寫程式後才能切換。
Progress View(進度條）
利用Progress View製作歌曲播放時的進度。
Navigation Bar樣式
在製作過程中，我一直很想修改< Back 的樣式，讓它跟設計稿一致，但變動Navigation Bar的樣式需要寫程式，我還沒有學到，試了幾次都還是失敗，我決定果斷放棄！等到之後學了程式再回來修改。
開頭畫面
LaunchScreen可以設定開頭畫面，它會在開啟App時顯示，但只會出現1 ～2秒鐘。
設定icon
製作各種場合必須要出現的App icon。
在把icon貼進Xcode的過程中，我一直不小心把原本的資料夾刪掉，且新的一直沒有覆蓋成功，所以想預覽模擬器時就顯示錯誤訊息。
試著貼上好幾次一直不成功，最後終於發現原來是新icon放錯資料夾了QQ
（記得要打開icon資料夾，裡面的AppIcon.appiconset才是正港的）
打上App名稱
專案資料夾中＞Display Name中可以打上欲顯示的App名稱。
最終完成品
最後我的App歷經四個艱辛的夜晚終於完成了！真的學到了很多，雖然辛苦但還好最後做出來跟設計圖相差不遠（不然我會氣死），只有Back跟Search Bar的地方不太一樣，因為需要程式，所以等日後學程式之後再做調整吧！
Github連結：
