今天來試著拉拉看 Navigation View

什麼是 Navigation View?

就是類似下圖的東西:

image

用來控制 View 之間的流程

今天我們繼續使用 storyboard 來簡單拉拉 Navigation View

首先先開一個新 project 吧!

image

接著我們到 storyboard,選擇 ViewController

再來我們要嵌入 Navigation View

所以要選擇: Edit -> Embed in -> Navigation View

image

選擇後,就會發現 storyboard 的 layout 改變了

image

Navigation View 實際上是透過 NavigationController 來控制

原本程式的進入點是 ViewController

由於我們要使用 Navigation View

因此透過 Xcode 將 NavigationController 嵌進去

讓程式進入點變成 NavigationController

再透過 NavigationController 將程式導到 ViewController

接下來我們命名一下 ViewController:

image

然後我們從右下角的 Object library 選擇 Bar Button items 加入

image

並將該物件拉到 NavigationBar 的右方

接下來我們希望點下 item 按鈕,可以到另外一個 ViewController

因此一樣從右下角的 Object library 拉一個 ViewController 到 storyboard 的空白處

直接拉一個過去就好

所以會長這樣:

image

接著就從 ViewController 的 item 上,按著 ctrl + 拖曳,

image

往右邊剛剛新增的 ViewController 拉,放開後就會選擇要做的動作,我們選擇 ‘show’

image

為了辨識起見,我們點選第二個 ViewController ,加入 Title:

image

都設定好後,按下執行,應該就可以看到 Navigation View 正常運作了!

按下 item 會到 View2, View2 會自動產生 back 鍵,回到 View1

是不是很方便呢!