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

上一篇文章中提到利用程式present新畫面的方式
此篇介紹另一種切畫面的方式,同樣不經過實體segue

相對於present — dismiss的顯示方式是push — pop
該方式不同的點在於只能作用於Navigation Controller上

View Controller embed Navigation Controller

首先一樣先幫原先的ViewController Embed Navigation Controller
有Navigation才有辦法觸發push新畫面的function
再拉出另一個新的ViewController作為欲切換的新畫面
續前篇,一樣幫這兩個controller加上identity ID
不同的是我們要在Second View的畫面上加上NavigationItem
要切換也要有觸發源,所以先拉一個Button做準備

Adding a NavigationItem to Second View

NavigationItem加上之後不會在畫面上看到
但不用擔心,在左側元件欄裡可以看到該元件

因為First/Second兩個畫面間並沒有用segue連接
接下來就輪到用程式的方式來做畫面切換了:

把Button, NavigationItem都拉進來做IBOutlet

@IBOutlet weak var myButton: UIButton!
@IBOutlet weak var myNavigationItem: UINavigationItem!

Button還要再拉一個IBAction來放觸發時要做的事情

@IBAction func ChangePage(_ sender: Any) {
}

還記得拉了NavigationItem的IBOutlet嗎
由於我們拉完元件沒有為他設定title
所以用這樣的方式在viewDidLoad底下幫他加上title
這樣的方式我覺得(?)比較直覺啦(🚬)

myNavigationItem.title = “First View”

我們產生一個繼承UIViewController的檔案
將該檔案作為SecondView的class
這樣可以接著後續要在新畫面執行的程序

目前我們講的部分只是畫面切換
可以什麼都不做,不過
還記得我們有在Second View上拉一組NavigationItem嗎?

雖然從Storyboard畫面上看不到NavigationItem
不過我們一樣可以從元件列上拉IBOutlet到程式上
這邊同樣是為了透過程式設定Navigation的title
從下圖中viewDidLoad程式區中有看設定了title為Second View2

Setting Navigation outlet on Second View

將設定都做好就是一個簡單的畫面切換Demo
新畫面要回到前一頁會有Navigation的Back按鈕在畫面左上
點該按鈕即可回到前一頁,不用另外加Button

non-segue Navigation Controller Demo 01

咦,有發現Domo畫面上又多一個Page3的按鈕嗎?
這是一樣是要用來做Navigation切換用的按鈕

新增第三個ViewController並新增class檔案
這些設定與第二個畫面設定只有:不拉NavigationItem
第三個頁面的返回不透過Navigation Back Button
我們在畫面上額外拉一個實體的Button來返回

由於Navigation是影響全畫面的
由Navigation觸發換頁的畫面頂部也會有Navigation Bar
即使我們一開始設計畫面的時候沒有額外拉元件

所以將下段程式放在viewDidLoad裡面
一開始畫面準備好就將Navigation Bar隱藏

self.navigationController?.setNavigationBarHidden(true, animated: false)

這樣畫面就很乾淨剩下額外拉的Button元件
像我們在設計Storyboard的時候一樣

Third page setting

先前提過Navigation是透過push — pop來做畫面切換
上面例子裡面我們還是使用Navigation原生的Back按鈕
所以並沒有做到返回的程序(原生按鈕已幫我們做了)

接下來我們就拉Back Button的IBAction來做觸發程序
將處理Navigation Controller pop的程序放到func裡面
這樣我們在黃背景頁面就可以利用Button返回前頁

self.navigationController?.popViewController(animated: true)

不過黃頁面回到前頁之前還要記得將Navigation Bar叫回來
不然回到前頁之後會卡在Navigation Bar Hidden的狀態裡
這樣整合起來就可以不用手動拉segue也可以換頁/返回了

self.navigationController?.setNavigationBarHidden(false, animated: false)
non-segue Navigation Controller Demo 02

完成手動換頁算是多頁設計入門了
接下來就是如何讓資料可以在頁面間傳遞
底下Project檔案連結作為紀錄

--

--