不從Storyboard連segue切換畫面(二)
上一篇文章中提到利用程式present新畫面的方式
此篇介紹另一種切畫面的方式,同樣不經過實體segue
相對於present — dismiss的顯示方式是push — pop
該方式不同的點在於只能作用於Navigation Controller上
首先一樣先幫原先的ViewController Embed Navigation Controller
有Navigation才有辦法觸發push新畫面的function
再拉出另一個新的ViewController作為欲切換的新畫面
續前篇,一樣幫這兩個controller加上identity ID
不同的是我們要在Second View的畫面上加上NavigationItem
要切換也要有觸發源,所以先拉一個Button做準備
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
將設定都做好就是一個簡單的畫面切換Demo
新畫面要回到前一頁會有Navigation的Back按鈕在畫面左上
點該按鈕即可回到前一頁,不用另外加Button
咦,有發現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的時候一樣
先前提過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)
完成手動換頁算是多頁設計入門了
接下來就是如何讓資料可以在頁面間傳遞
底下Project檔案連結作為紀錄