作業#55 周杰倫音樂專輯App
目的：練習利用CollectionView做出列表，並且串接YouTube API獲取每個MV的相關資料
在我撰寫文章的這天是周杰倫生日，先在這邊祝我從小到大的偶像周杰倫生日快樂(雖然他也看不到😂，這次要來練習製作出能夠顯示周杰倫所有錄音室專輯的App，並且點進每張專輯會有專輯列表，點下每首歌能夠連到該首歌的MV，本篇文章會著重在清單的CollectionView以及串接API的分享上
本篇文章主要會運用到：
- 使用CollectionViewController顯示專輯清單
- 使用自訂型別建立資料，上網抓取每張專輯的封面照
- 串接YouTube的API去抓取MV的封面照以及MV的標題，顯示在每張專輯的歌曲頁面
- 點擊每首歌會跳到YouTube畫面並用WebKit View顯示
專輯清單
背景(剪影圖片)
使用ViewController製作背景+ContainerView(CollectionViewController)製作清單
旋轉動畫
使用UIView.transition做出翻轉的動畫，然後使用timer每4秒翻轉一次
CollectionViewController
排版
讓圖片跟顯示格的距離使用AutoLayout設定好，之後使用程式去控制圖片大小，透過圖片大小去控制顯示格大小
- 建立CollectionViewCell的自訂類別
- 將AutoLayout設定好的Constraint連接@IBOutlet
- 在awakeFromNib裡設定圖片的寬度
資料型別
在設定CollectionViewCell前先自定義資料型別，待會建立好關於專輯的資料後，可以用來設定CollectionViewDataSource
以下只擷取一部分
CollectionViewDataSource
numberOfItemsInSection：資料裡專輯的總數，就是一共要顯示多少張專輯
cellForItemAt：利用轉型取得我們自訂類別的CollectionViewCell，然後進行抓圖(抓圖的程式碼在下方)，帶入參數indexPath.item去資料中找到圖片的URL，並且用URLSession去執行抓圖，completion因為我在function之後還要繼續使用data所以加上@escaping
點選專輯到專輯歌曲列表(didSelectItem)
下一頁需要的參數selectIndex要接收使用者所點選的專輯，然後albumName專輯名稱以及albumPhoto我們已經抓好專輯封面照片
//要傳遞的值var selectIndex:Int?var albumName:String?var albumPhoto:UIImage?
傳值到下一頁(IBSegueAction)
先在下一頁的ViewController裡設定好init，然後待會就能接受到上一頁傳來的值，然後在CollectionViewController中將那三個要傳的值放進去
歌曲清單
除了畫面上放的專輯照片跟專輯名稱從上一頁傳過來的之外，下方歌曲的名稱以及MV縮圖我們都要從YouTube API抓資料，因為我是一首歌一首歌去撈資料的，所以最一開始我已經建立好資料每首歌在YT上的ID用ID去API裡撈資料
可以透過以下格式找到每首歌的API，至於API Key可以透過下方連結去看看，Peter的文章有更詳細的說明
https://www.googleapis.com/youtube/v3/videos?id=\(影片ID)&key=\(API Key)&part=snippet連結：
按照JSON的格式一層一層進去撈資料，要記得加上Codable抓資料的時候需要解碼
使用迴圈把整張專輯的videoID一個一個拿出來變成API格式度取每首歌資料，然後使用URLSession抓取，這邊我有遇到一個問題抓下來的資料不會按照我帶入的順序，所以一開始列出來的清單格取順序不對，所以我在資料裡面加上一個mvSequence去得到他在迴圈的順序，等下載完再進行排序，不過Peter說通常不會這樣撈資料，通常一個Array都會出自於同一個API中
我在viewDidLoad中進行撈資料的動作後，資料在viewDidAppear進行重新排序，我用兩層迴圈去比對歌曲的順序跟下載後的順序，然後存入新的Array中
TableViewDataSource — cellForRowAt
TableViewDataSource在畫面讀入的時候就會進行，在這個時候我需要的資料是還沒下載好的，所以先判斷我承接資料的Array是否有值，沒有的話顯示讀取中，然後如果有的話就使用抓圖的function進行抓圖，然後帶入我們剛從API上抓到的圖片URL，在顯示前先判斷現在的cell是否是原本應該要顯示的，不然圖會因為TableViewCell會重複利用，先下載下來的會先顯示這樣圖會在不對的cell內
點擊歌曲顯示MV(didSelectRowAt)
點擊後將使用者點擊的歌曲的videoID存起來，每個YouTube影片的網址就差在videoID，所以我們用videoID去控制要顯示的影片，然後使用IBSegueAction傳遞，方法就跟以上的CollectionViewController的一樣
顯示YT畫面的ViewController：
WebKit View顯示YT畫面
在viewDidLoad中將YT網址的固定格式加上videoID變成URL，再變成URLRequest讓WebView去load，然後最一開始要記得import WebKit才能使用WebView
import WebKit
UIActivityIndicatorView
在網頁顯示前會有這個loading的動畫，這個是UIActivityIndicatorView，用WKNavigationDelegate偵測到網頁讀完後要暫停UIActivityIndicatorView的Animating要記得勾選Hides When Stopped，不然暫停後會停留在畫面中間不會隱藏
WKNavigationDelegate — didFinish
可以用didFinish去執行完成後要做什麼
操作畫面
參考連結：
GitHub連結：
