星期六, 5月 13, 2017

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

我們需要您的贊助

影片教學


學習目標

  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 切換頁面初體驗 程式碼下載

0 意見 :

張貼留言

回覆意見時,麻煩輸入一下暱稱
(隨便取個名字也好~ ^_^)
好讓我方便回覆您的問題,
選擇「名稱/網址」輸入您的暱稱,
麻煩一下,謝謝大家。

關閉廣告 [X]