不從Storyboard連segue切換畫面(一)

設計App切換畫面的時候多半都是從Storyboard上拉segue
舉凡利用Button, Navigation Bar, Tab Bar⋯⋯來切換畫面時

Segue setting

建立切換畫面可以不用手動建立seque
也可以利用觸發事件來建立畫面切換
例如:點擊Button觸發點擊事件後由程式presen出新畫面

首先先在Storyboard上拉出一個新的Viewcontroller作為新畫面
新增一份新的Viewcontroller2.swift檔案並由新畫面選擇
在原先/新的Viewcontroller的identity頁面上新增各自的ID
1. firstPage
2. secondPage

Viewcontroller identity setting

兩個畫面都放置一個Button元件
原畫面作轉場用,新畫面用來退回舊畫面
在viewDidLoad加上圓角(到底多愛圓角

為Button拉一個IBAction建立觸發程序
並將以下內容加入程序內

if let controller = storyboard?.instantiateViewController(withIdentifier: “secondPage”) {
present(controller, animated: true, completion: nil)
}

其中產生畫面為底下的方法,但前提是要有該畫面
而這個withIdentifier就是我們設定的畫面ID
因為不一定有畫面存在所以該方法所產生結果為Optional
故上面原內容才會以Optional Chaining的方式來處理

storyboard?.instantiateViewController(withIdentifier:String)

而在這邊顯示新畫面的方法為“present”
這種顯示方式是將新畫面由最底下往上推上來

present(viewControllerToPresent: UIViewController:UIViewController, animated: Bool, completion: (() -> Void)?)

第一個參數為要顯示的controller ID,這邊填入設定的ID
第二個參數為是否要顯示動畫,畫面由下往上顯示
第三個參數是一個closure,若不新增程序可為 “nil”
基本上Button觸發程序這邊寫好之後就可以達成顯示新畫面的結果

Page changing by Button

既然都可以切換到新頁面了
再利用Button回到原本的畫面應該也沒有問題?

首先我們切換畫面是透過present
所以回到原畫面要搭配的動作就是“dismiss”
(還有push — pop,這又是後話了🚬)

退回的部分將程序加在開專案時新增的Viewcontroller2.swift裡面
當然不免俗在Button上還是要圓角啊(喂~

dismiss(animated: Bool, completion: (() -> Void)?)

退回的部分只有兩個參數
第一個為是否顯示動畫,退回的部分動畫方向與顯示反方向
第二個參數也是一個closure,如果不新增程序可為“nil”

Page back by Button

雖然只是簡單練習present — dismiss
一樣上傳到GitHub供參考也留個紀錄

--

--