導言

在前兩天的教學中，我們學習了如何透過 Storyboard 建立多重結局的故事應用，並透過 Segue 實現頁面之間的跳轉。今天，我們將進一步學習如何使用 Tab Bar Controller 來實現應用的主要導航功能。Tab Bar 是 iOS 應用中常見的功能，位於畫面底部，用來讓用戶在多個主要功能頁面之間進行切換。這次，我們將為應用新增一個「關於頁」，並透過 Tab Bar 控制器來實現不同頁面的切換。

今天學習目標

• 學會如何在不撰寫程式碼的情況下，透過 Storyboard 添加 Tab Bar Controller。
• 了解如何使用 Tab Bar 來實現多功能頁面的切換。
• 設置 Tab Bar 中頁面的順序及自定義每個頁面的標籤與圖示。

預覽效果

透過 Tab Bar 在「故事頁」和「關於頁」之間進行切換。

Storyboard 截圖

教學步驟

Step 1: 設計「關於頁」

首先，我們將為應用新增一個「關於頁」，用來展示應用的資訊或介紹。

• 新增 ViewController：在 Main.storyboard 中，拖入一個新的 ViewController，這將是我們的「關於頁」。
• 設置 UI 元件：在這個頁面上，加入一個或多個 UILabel 來顯示應用的簡介或開發者資訊。
  
• 在關於頁前面插入 Navigation Controller 的連結。

Step 2: 加入 Tab Bar Controller

接著，我們將通過 Tab Bar Controller 來實現頁面之間的切換功能：

• Embed in Tab Bar Controller：選擇「故事頁」的 Navigation Controller，然後在右下角的菜單中選擇 Embed In -> Tab Bar Controller。這一步會將你的「故事頁」和 Tab Bar Controller 進行自動連接，並在 Storyboard 中生成一個新的 Tab Bar。
  

• 設置 Tab Bar Item：選中「故事頁」的 Navigation Controller，在右側的 Attributes Inspector 中找到 Tab Bar Item，你可以為這個頁面設置一個標籤（如「故事」）和一個圖示。
  

Step 3: 連接「關於頁」

現在我們將「關於頁」也加入到 Tab Bar 中：

• 拉線連接：在 Storyboard 中，在 Tab Bar Controller 上，按住右鍵，將線拉到「關於頁」的 Navigation Controller 上，選擇 Relationship Seque 的 view controllers 這樣就連接好了第二個頁面。
  
• 設置 Tab Bar Item：為「關於頁」設置 Tab Bar Item 標籤，例如「關於」，並選擇一個合適的圖示。
  

Step 4: 調整 Tab 順序與測試應用

• 調整順序：如果需要改變 Tab 頁面的順序，可以直接在 Storyboard 中拖動頁面位置。這樣就可以簡單調整哪個功能先顯示。
• 運行應用：打開模擬器，運行你的應用，並確認是否能在「故事頁」和「關於頁」之間進行順利的切換。

回顧重點

重點 1：學習如何使用 Tab Bar Controller 來建立多功能頁面之間的導航。
重點 2：通過 Storyboard 自定義 Tab Bar 中的頁面標籤和圖示，並調整其排列順序。

總結

今天，我們學會了如何使用 Tab Bar Controller 來實現應用中不同功能頁面的切換，並將「故事頁」和「關於頁」連接到 Tab Bar 中，讓用戶可以輕鬆地切換不同的頁面。這是一個非常常見且實用的 UI 元件，在許多應用中都有使用。接下來，我們將進一步學習更多的 UI 元件，像是 Table View 和 Collection View，進一步豐富我們的應用功能。

附錄：已接觸的 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） – 用來實現底部的頁面導航，例如「故事頁」和「關於頁」的切換。