【 iOS 中文開放式課程 】Segue 切換頁面
(XCode 9, iOS 11 , Swift4 )
我們需要您的贊助
學習目標
學習如何使用 Segue 來切換頁面
APP UI 介面草圖
操作步驟與說明
- 點擊 Xcode 圖示,開啟 Xcode 應用程式
- 在歡迎畫面中,選擇 『 Create a new Xcode project 』
- 選擇最基本的單頁畫面範本來建立專案
- iOS -> Single View App ->Next
- 設定APP名稱
Product Name: DemoSegueSwitchPage - 選擇設定專案存放點
- 在左側專案導覽視窗中,點擊 Main.storboard
- 在右下角,元件庫中找到 view controllew,將它拖曳出來到Main.storboard 中:
- APP 一個畫面,即是代表一個場景(Scene)
- 繼續再元件庫中找到 Button,將它拖曳出到各場景(Scene)中:
- 在左側第二場景元件列表中,點擊 view 後,再到右上角的點擊「屬性面板」,設定背景顏色,為綠色:
跳到下一頁
- 點擊第一場景中的 Button,滑鼠右鍵(或是按住control 鍵)拖曳到第二場景中放開,在動作面版中選擇 Show 即完成建立 Segue 連線事件
- 此時運行模擬器,看效果,即可以發現當點擊畫面中 Button 即可以跳到第二個場景綠色畫面。
返回上一頁
- 開啟 ViewController.swift 加入 UnWind 程式。
@IBAction func UnWind(for segue :UIStoryboardSegue)
{
print("UnWind...")
}
- 開啟Main.storyboard,點擊第二場景中的 Button,滑鼠右鍵(或是按住control 鍵)拖曳到上方的Exit,在動作面版中選擇 UnWind 事件。
特別注意:一定要先在 ViewController.swift中,加入UnWind 程式該片段程式,否則拖曳到上方的Exit 會看不到UnWind 事件喔。
- 此時運行模擬器,看效果,即可以發現當點擊畫面中 Button 即可以跳到第二個場景綠色畫面。點擊第二場景中的按鈕,即可以返回上一頁。