導言

昨天我們建立了一個單張的故事頁面，今天我們將進一步介紹如何使用 Storyboard 的 Segue 功能來實現畫面之間的跳轉，並設計一個簡單的多重結局應用。這是構建多場景應用的基礎功能之一，透過 Storyboard 的視覺化工具，開發者可以輕鬆地在不同畫面間切換，而不需要撰寫程式碼。

今天學習目標

• 不使用程式碼即可建立內容型 App：透過 Storyboard 的 Segue 功能進行畫面切換。
• 學會使用 Storyboard 中的 Segue 來實現畫面跳轉：設計多場景應用的基礎，學會建立導航與畫面之間的流轉。
• 探索如何觸發不同的結局畫面：透過按鈕與 Segue，實現互動式結局切換。
• 學會加入 UINavigationController 來提供返回鍵：使用者可以在不同結局間進行返回操作。

預覽效果

操作 GIF：

• 顯示從選擇畫面點擊按鈕，跳轉到不同結局的動態效果。
• 如果一直選擇第1個動作按鍵，可以到第1個結局畫面 A1.1，「雲端的歡樂」。
• 再按左上的返回鍵，再選擇第2個動作按鍵，可以到第2個結局畫面 A2.2，「動物朋友的冒險」。
  

Storyboard 完整截圖：

教學步驟

Step 1: 準備故事架構及圖片

你可以利用熟悉的 AI 工具來協助設計多重結局的故事路線及場景圖片。以下是一個簡單的範例，跟 Chatgpt 互動，最後請他整理表格，展示了多重結局應用的結構。

Step 2: 設計多個畫面

在 Main.storyboard 中設計多個路徑畫面：依據故事的路線設計不同的頁面，並為每個結局設定獨立的畫面，可以使用樹狀結構來排列每個故事分支，方便查閱。例如：這個範例總共有8個結局，可以每二個排成一列，最後 storybard 上會有4列的樹狀結構。

Step 3: 設定 Segue 實現跳轉

不需要撰寫程式碼，僅透過 Storyboard 的拖拽與設定即可完成畫面切換。這讓初學者可以輕鬆掌握 Segue 的使用。

• 建立 Segue 連結：點擊畫面中的按鈕，按住 Control 鍵或滑鼠右鍵拉出 Segue，連接到各個結局畫面。每個按鈕對應一個 Segue，並將其設定為 Show Segue。
  
• 成功連結後，可以看到有一個 Segue 線連接二個頁面
  
• 當使用者點擊按鈕時，會自動觸發 Segue，跳轉至對應的故事畫面。

Step 4: 提供返回鍵

加入 Navigation Controller：如果希望應用有返回功能，可以在初始頁面上：
點擊第一個 ViewController，在右下角選擇 Embed In，選擇 Navigation Controller。
Storyboard 左側會自動生成 Navigation Controller 連結，這樣每個跳轉頁面就會自動擁有返回鍵。

Step 5: 為頁面命名

• 加入了導航元件後，你就可以為頁面命名了，可以點選左側列表裡的 Navigation Item 或是畫布上方處如下圖所示的位子。
  

• 在右邊的 Attributes Inspector 中，修改 Navigation Item 的 Title 欄位。這是這一頁的顯示名字，也是下一頁返回鍵的顯示名字。
  

回顧重點

重點 1：學會使用 Storyboard 中的 Segue 來實現畫面跳轉。
重點 2：學會加入 UINavigationController 來提供返回鍵，增強使用者體驗。

總結

今天我們透過 Storyboard 的 Segue 功能，實現了簡單的畫面跳轉，並設計了一個多重結局的故事應用。這讓我們更深入了解如何使用 iOS 的視覺化工具來設計多場景應用。接下來，我們將探索更多 UI 元件的應用與互動，進一步增強應用的功能與用戶體驗。

參考

• View Controller Programming Guide for iOS：Using Segues

附錄：已接觸的 UIKit 元件

• UILabel （Day 01）– 用來顯示文字。
• UIButton （Day 01）– 用來處理按鈕的點擊事件。
• UIImageView （Day 01）– 用來顯示圖片。
• UINavigationController （Day 02）– 用來管理畫面之間的導航，並提供返回按鈕功能。
• Segue （Day 02）– 用來在畫面之間進行跳轉，無需撰寫程式碼。