使用 Storyboard 實作歌詞 App (part. 2)

前情提要，這個範例是全程不寫一行 code，僅使用 Storyboard 與其設定進行的 App 實作計畫，適合剛踏入或正想要踏入 iOS App 開發領域的小夥伴們閱讀。

若還沒有看過第一篇的朋友，請往這走。

使用 Storyboard 實作歌詞 App (part. 1)

2. 使用 table view controller with static cells

Table View Controller 也是 View Controller 的一種，繼承自 View Controller 的它已經內建了一個 Table View 在裡面，當我們確定這個頁面主要會以表格呈現時，就非常適合使用 Table View Controller。

不止如此，Table View Controller 本身也已經實作了捲動的功能，當我們的頁面內容超出垂直顯示範圍時，不需要額外做處理就可以直接捲動，是一個非常方便好用的選擇。

Table View Controller 已實作了捲動功能

說到這裡，是不是覺得這些特性好像有些既視感呢？沒錯，實際上我們大部分的 App 都是以 Table 為基礎的喔！常見的包括 Facebook、Instagram、Line、蝦皮購物、Uber Eat ⋯⋯等等，全部都是用 Table View 的概念去實現多內容的捲動畫面，所以熟悉 Table View 的各種功能是我們學習開發必備的技能之一。

Table View 的功能非常多，其中內容的呈現方式主要有兩種，一種是搭配程式來處理內容的 Dynamic Prototypes，另一種則是 Static Cells。這次由於我們沒有寫到 code，使用的是靜態內容的 Static Cells。

一開始我們一樣從 Object Library 新增一個 Table View Controller，接著我們會看到下圖兩種樣式的其中一種（預設是左邊的 Dynamic Prototypes）。在這邊我們可以看到，左右兩個 Table View 的上方表格樣式和中間的小字說明是不一樣的，請注意自己正在使用的是哪一種樣式，這點在初心者階段常常被忽略。切換樣式的選項在點選 Table View 的狀況下，到右上方的 Table View\ Content 選擇需要的樣式即可，我們這邊選擇 Static Cells。

左：Dynamic Prototypes，右：Static Cells

接下來開始製作專輯列表的儲存格，這裡有一個小秘訣，由於我們每個儲存格的樣式都一樣，首先我們可以把預設的三個儲存格刪到剩一個，等我們設定好第一個儲存格之後再由 Table View Section\ Rows 去變更數量，就會長出一樣的數個儲存格出來喔。

選擇 Table View Section 的狀況下，可以由 Table View Section\ Rows 調整數量

我們這次的專輯列表有點像是一張專輯一張卡片的樣式呈現，所以我們可以使用 Inset Grouped 的 Style 然後移除分隔線，並讓每個 Section 的 Cell 只有一個，詳情可以參考下面這篇彼得潘的文章。

table view 的三種 style

• 在 Table View\ Style 和 Separator 下面設置為 Inset Grouped 和 None。

設置 Table View 的 Style 和 Separator

設置 Table View 與 Table View Cell 的背景顏色，選擇顏色有很多種方式，大家可以玩玩看。想要直接使用範例顏色的夥伴可以利用 Custom 的 RGB Sliders 頁籤直接輸入 HEX 碼設定顏色。

• 設置 Table View 的 Background 為 #03161F。
• 設置 Table View Cell 的 Background 為 #072228。

選擇自訂顏色時填上 HEX 碼是最快速的選擇方式

在點選 Table View Cell 的狀況下，找到右上角的 Size Inspector（以 Xcode 12.3 為例，是一個像三角規的圖示）

• 取消勾選 Table View Cell\ Row Height 的 Automatic，並手動輸入 120。

現在，你的表格應該會看起來像下圖的右半邊。

左：設置 Table View Cell 的 Row Height，右：目前完成的表格樣式

接著開始為儲存格加入專輯名稱、專輯封面、音樂類型與發行年份，從 Object Library 分別拉三個 Label 與一個 Image View 到儲存格中，並如下設置 ：

• Image View 的大小為 80 x 80。
• Label 的字型大小分別為 29、15、15。
• Label 的文字顏色為 White Color。

最後將他們拖放到適合的位置上，如下圖所示。這邊要注意設置的位置略有不同，大家可以多玩玩看才容易熟練。

左：設置圖片與文字大小，右：目前完成的表格樣式

現在我們要讓儲存格長出 5 個一模一樣的兄弟姐妹了，請找到 Table View\ Sections。咦，我們前面不是說要由 Table View Section\ Rows 去變更數量嗎？其實不管是 Section 還是 Row 都可以用這種方式細胞分裂出一樣的部分。別忘了，我們這時候是使用 Inset Grouped 的樣式，並使每個 Section 都只有一個 Row，如果我們由 Table View Section\ Rows 去變更數量的話，那麼樣式就會變成一張大卡片塞了五張專輯而不是五張專輯有五張卡片了。

不過現在每個 Section 好像分的有點開，不太好看，我們可以在點選 Table View 的狀況下，切換到 Size Inspector（右上的三角規圖示），並調整 Header Height 和 Footer Height 的數值。

• 選取 Table View 的狀況下，將 Table View\ Sections 設置為 5。
• 調整 Table View\ Sections\ Header Height 和 Footer Height 的數字為 8。

左：增加 Table View 的 Sections 數量與調整 Header & Footer Height，右：目前完成的表格樣式

也可以在 Table 的頂端和尾端加上額外的資訊或圖片，增加頁面的豐富性，只要從 Object Library 拖拉想要加入的元件到表格的最上方或最下方即可。值得注意的是，由於我們這次要加入的內容包含了 Image View 和 Label，而 Label 並沒有辦法直接拉到 Image View 上，所以我們要先拉一個 View 元件去承載他們。

• 拖拉一個 View 到 Table 的頂端，並將高度設置為 240。
• 拖拉一個 Image View 到 View 上，並將大小設置和 View 一樣大。
• 拖拉二個 Label 到 View 上，設置字體大小分別為 27、17。

左：將 View 拖到表格的頂端並設置高度 240，右：目前完成的表格樣式

這邊的兩個 Label 分別為歌手的英文拼音與漢字名，但其實像這種可以在同一段文字只是想要不同大小的樣式有另外一種做法，有興趣研究的夥伴可以參考以下彼得潘的文章喔！

從 Interface Builder 的 Attributed 設定文字的多種樣式

做到了這個階段，這個頁面基本上的設置都已經完成囉，接下來就可以把圖片和文字設置上去，完成這個頁面。首先，我們要將準備好的專輯封面和歌手照片匯入到專案裡。

• 將準備好的圖片拖到專案資料夾中的 Assets.xcassets 裏。

左：將圖片拖進 Assets.xcassets 資料夾，右：成功拖進 Assets.xcassets 後會出現的畫面

回到 Storyboard 點選想要放上歌手照片的 Image View，在 Attributes Inspector 中找到 Image View\ Image，下拉選單中就會出現剛剛我們拖進去的照片囉。

但是為什麼放進去的照片好像沒有填滿畫面呢？這是因為我們沒有設定 Content Mode 的關係，預設的 Content Mode 選項是 Aspect Fit，這種模式會把照片等比縮放至 Image View 可以完整的呈現整張照片，但如果 Image View 本身的比例和照片不一樣時，就會出現沒有填滿的部分。

這時候來試試 Aspect Fill 吧，這種模式和 Aspect Fit 一樣會等比縮放照片，但它會找到 Image View 的長邊，將圖片等比縮放至長邊可以完整容納的大小，而超出短邊的部分就會被隱藏。所以如果圖片和 Image View 比例相差不大的時候，使用這種方式可以解決 Aspect Fit 填不滿的問題。

• 將 View\ Content Mode 的選項設置為 Aspect Fill。
• 把剩餘的圖片與文字輸入完成。

完成這個階段最終的樣貌

好了！我們完成第一個歌手的專輯列表頁面了，試著再做出其他三個歌手練習一下吧。我們 part 3 見。

專案 GitHub

gogenkei/LyricWorld