【iOS 中文開放式課程】Segue 切換頁面初體驗

我們需要您的贊助

https://goo.gl/xIeQ8t

影片教學

學習目標

1. 學習如何使用 Segue 來跳轉頁面
2. 學習如何 unwind 返回上一頁

APP UI 介面草圖

操作步驟與說明

• 點擊 Xcode 圖示，開啟 Xcode 應用程式
  
• 在歡迎畫面中，選擇 『 Create a new Xcode project 』
  
• 選擇最基本的單頁畫面範本來建立專案
• iOS -> Single View Application ->Create
  
• 設定專案名稱 DemoSegue
• 點擊 ViewController.swift 更名為 Main.swift
  
• 務必記得，程式碼也要更名為MainVC
  
• 新增兩個Cocoa Touch Class 並分別取名為RedVC 和 GreenVC
• File -> New -> File…
  
• 選擇 Cocoa Touch Class
  
• 取名為RedVC
  
• 再新建一個Cocoa Touch Class，並取名為GreenVC
  
• 點擊 Main.storyboard 設定第一個 ViewController 的 class 為 Main.VC
  
• 新增兩個 ViewController
  
• 設定右上角的 ViewController 的 class 為 RedVC
  
• 並且將他背景顏色設為紅色
  
• 設定右下角的 ViewController 的 class 為 GreenVC
  
• 並且將他背景顏色設為綠色
  
• 新增兩個 Button
  
• 設定上面按鈕顯示文字為「跳到紅頁」、字體大小為「30」、顏色為「紅色」
  
• 設定下面按鈕顯示文字為「跳到綠頁」、字體大小為「30」、顏色為「紅色」
  
• 滑鼠右鍵（使用觸控板則是按住 Control）拖曳至紅頁，鬆開選擇 「Show」
  
• 同理，滑鼠右鍵（使用觸控板則是按住 Control）拖曳至綠頁，鬆開選擇 「Show」
• 可以在畫面看到有 Segue 連線，在連線面板中也可以看到連線資訊
  
• 點擊 Segue 設定識別為「segue_red」
  
• 點擊 Segue 設定識別為「segue_green」
  
• 點擊 MainVC Scene ，再點右上角的雙圈圈，開啟 StroBoard 和程式碼同時觀看模式
  （右側將自動開啟 MainVC.swift，若不是請在檔案路徑手動切換）
  
• 建立IBAction，滑鼠右鍵（使用觸控板則是按住 Control）拖曳至MainVC.swift，鬆開將會跳出設定面板
  
• Connection 設定為「Action」，Name 設定為「JumpToRedPage」，完成後點擊 Connect 按鈕。
  
• 可以在MainVC.swift看到自動生成的 IBAction程式碼
  
• 我們在這個 function 裡，寫入performSegue 跳頁程式碼，識別為 segue_red

 @IBAction func JumpToRedPage(_ sender: UIButton) {
        self.performSegue(withIdentifier: "segue_red", sender: self)
    }

同理，跳到綠頁，建立 JumpToGreenPage 的名稱，完成IBAction後：

• 我們在這個 function 裡，寫入performSegue 跳頁程式碼，識別改為 segue_green

 @IBAction func JumpToGreenPage(_ sender: UIButton) {
        self.performSegue(withIdentifier: "segue_green", sender: self)
    }

---

返回往上一頁

在 MainVC.swift 加入 unwind

 @IBAction func UnWind(for segue :UIStoryboardSegue)
{
  print("unwind...")
}

• 分別在RedVC 和 GreenVC 的 Scene 加入按鈕，名稱為「返回」，字體大小為「30」
  
• 點選返回按鈕，按住滑鼠右鍵（使用觸控板則是按住 Control）鍵拖曳至 exit，後鬆開
  
• 鬆開後，選擇 unwindfor
  (若你還未 MainVC.swift 加入 unwind，將不會看到)
  
• 執行結果：
  

同理，綠頁也是這樣設定返回喔！！！

• 最後執行結果：
  

---

【iOS 中文開放式課程】Segue 切換頁面初體驗 程式碼下載