星期六, 7月 08, 2017

【 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 即可以跳到第二個場景綠色畫面。點擊第二場景中的按鈕,即可以返回上一頁。

0 意見 :

張貼留言

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

關閉廣告 [X]