導言

在過去的幾天裡，我們學會了如何使用 Tab Bar Controller 創建應用的主功能列表，並透過 Storyboard 開發了一個多重結局的故事應用。如果你的應用包含多本故事書，如何清楚地展示並讓讀者方便地選擇呢？這時，Table View 是一個極佳的選擇。今天，我們將學習如何使用 Table View Controller 來實現書本列表展示，並且不需要撰寫程式碼就能讓使用者點選書本進入閱讀頁面。

今天學習目標

• 透過 Storyboard 添加並設置 Table View Controller。
• 設定靜態的 Table View Cells 來展示書本的封面與書名。
• 利用 Storyboard 來連接 Table View Cells 與具體的書本頁面。
• 自定義 Table View Cells 的外觀，包括封面圖片、書名文字和點擊指示符（Accessory）。

預覽效果

最終的效果會讓使用者能夠瀏覽應用中的書本列表，透過上下滑動快速檢視書本，並且點擊某一本書後，便可直接進入該書的詳細內容頁進行閱讀。

教學步驟

Step 1: 新增 Table View Controller

• 打開 Main.storyboard，從物件庫中拖入一個 Table View Controller，這將成為我們的「書本展示架」。
  
• 將 Table View Controller 移到第一本書的 NavigationController 和書本的 ViewController 之間。這樣，我們將為應用的導航結構加入一個新的節點。
  

Step 2: 設置靜態的 Table View Cells

• 選中 Table View，在右側的 Attributes Inspector 中，將 Content 設為 Static Cells。這樣，我們可以手動設置每個 Cell 的內容，而不是動態生成。

• 設計第一個 Cell：在 cell 的左側拖入一個 UIImageView，用來顯示書本封面；右側加入兩個 UILabel，一個用來顯示書名，另一個用來顯示作者名稱。這樣的設計將讓每個 Cell 類似一本書的小預覽。
• 設置 Accessory：在 Attributes Inspector 中，將 Accessory 欄位設置為 Disclosure Indicator，這會在 Cell 的右側顯示一個箭頭，提示使用者這個 Cell 可以點擊進入下一頁內容。
  

Step 3: 連接 Table View Controller 與 Navigation Controller

• 將 NavigationController 與書本的 ViewController 之間的 Segue 刪除。
• 按住右鍵，從 NavigationController 拉線至 Table View Controller，選擇 Relationship Segue 並設為 Root View Controller。這樣，書本列表會成為應用的主要導航畫面之一。

Step 4: 連接 Table View Cell 與書本內容頁面

• 按住右鍵，從第一個 Cell 拖動 Segue 到書本的 ViewController，在出現的選項中選擇 Show，這樣當使用者點擊 Cell 時，就會跳轉到對應的書本內容頁面。
  

• 設置完第一本書後，複製此 Cell 並修改其圖片、書名和作者，為每本書建立相同的結構，並且將每個 Cell 分別連接到對應的書本頁面。
  

Step 5: 調整 Table View 的外觀

設定 Table View 的 Row Height 來控制每個 Cell 的高度，確保書本封面和文字顯示的比例合適。如果需要，還可以加入 Section Header 來區分不同類型的書籍。

回顧重點

• Table View Controller 的基本結構與用途。
• 設置靜態 Cells 來展示書本封面與書名。
• 使用 Storyboard 連接 Cells 與書本內容頁。
• 如何快速複製並修改 Cells 來節省時間。
• 設定 Cells 的點擊指示符與外觀。

總結

今天，我們學習了如何使用 Table View Controller 來展示書本列表，並設置靜態的 Cells 來顯示書本封面和基本資訊。這樣的功能讓應用的使用更加直觀，讀者可以輕鬆挑選他們想閱讀的書籍。這種列表式的顯示方式在許多應用中都非常常見，為未來的更多設計提供了堅實基礎。

附錄：已接觸的 UIKit 元件

• UILabel （Day 01）– 用來顯示文字。
• UIButton （Day 01）– 用來處理按鈕的點擊事件。
• UIImageView （Day 01）– 用來顯示圖片。
• UINavigationController （Day 02）– 用來管理畫面之間的導航，並提供返回按鈕功能。
• Segue (UIStoryboardSegue) （Day 02）– 用來在畫面之間進行跳轉，無需撰寫程式碼。
• Relationship Segue (UIStoryboardSegue)（Day 03）– 用於建立控制器之間的層級關係，特別適合在容器控制器（如 Tab Bar Controller 或 Navigation Controller）中使用。
• UITabBarController（Day 03） – 用來實現底部的頁面導航，例如「故事頁」和「關於頁」的切換。
• UITableViewController（Day 04）– 用來顯示和管理大量的列表內容，適合書本、連結等展示。
• UITableViewCell（Day 04）– 用來設計和顯示列表中的每個單元格，包含圖片和文字。
• Accessory (Disclosure Indicator)（Day 04）– 在列表中用來提示使用者可以點擊進入下一頁。