前言

在前一篇教學(xué)中, 我們學(xué)會(huì)如何使用Visual Studio 搭配Xcode進(jìn)行iOS基本控制項(xiàng)的操作. 但都是屬于單一畫面的應(yīng)用程式. 這次我們要來練習(xí)如何通過Navigation Controller來建立多頁面的iOS應(yīng)用程式.

設(shè)定專案及畫面

1. 開啟Xamarin Studio 并建立新專案, 專案類型為iOS=>iPhone=>空白專案, 專案名稱為 02-Navigation.

2. 在專案中添加3個(gè)iPhone View Controller 的檔案, 檔案名稱如下：

• HomeScreen
  Level1Screen
  Level2Screen

新增后檔案結(jié)構(gòu)如下圖所示：

3. 雙擊HomeScreen.xib 以開啟Xcode.

4. 點(diǎn)選編輯區(qū)的HomeScreen, 并在右邊的Attributes Inpsctor將Top Bar變更為”Navigation Bar”

5. 在Object Library中拖拉一個(gè)Button至畫面中并將文字改為”Go to Level 1 Screen”

6. 為Button建立一個(gè)Outlet并命名為”btnToLv1”. 之后請(qǐng)關(guān)閉Xcode

7. 在Visual Studio中開啟此專案, 在專案屬性中設(shè)定應(yīng)用程式名稱及版本等信息, 并開啟” AppDelegate.cs”選項(xiàng). 在FinishedLaunching事件中加入以下代碼:

完成后的FinishedLaunching方法如下圖所示：

在上面的代碼中, 我們先初始化Window, UINavigationController以及HomeScreen對(duì)象. 接著通過PushViewController方法將HomeScreen加入到NavigationController. 然后將rootNavigationController指定到Window.RootViewController屬性. 最后則是顯示W(wǎng)indow.

8. 開啟HomeScreen.cs, 在建構(gòu)子中設(shè)定主畫面的標(biāo)題

9. 執(zhí)行專案后的結(jié)果如下：

載入Level 1 Screen

1. 我們要在點(diǎn)擊主頁面上的button后載入Level1Screen. 因此我們開啟HomeScreen.cs. 在類別下先聲明Level1Screen對(duì)象.

在ViewDidLoad事件中, 加入btnToLv1的touchupinside事件處理, 代碼如下:

在上述代碼中, 我們同樣通過PushViewController方法將Level1Screen加入到Navigation控制項(xiàng).

2. 執(zhí)行專案并在主畫面中點(diǎn)擊按鈕以載入Level 1 Screen. 您會(huì)看到空白畫面被載入, 且NavigationBar左邊的按鈕會(huì)顯示上一個(gè)頁面的Title

新增NavigationBar右邊的按鈕載入Level 2 Screen

在前一個(gè)練習(xí), 我們載入了Level 1 Screen, NavigationBar左邊是回到上一個(gè)頁面, 在這個(gè)練習(xí)中, 我們要在NavigationBar中新增右邊的按鈕, 并通過按鈕來載入 Level 2 Screen.

1. 開啟level1screen.cs, 并在類別下加入Level2Screen的聲明

2. 在level1screen.cs的ViewDidLoad事件中, 加入以下代碼：

我們通過SetRightBarButtonItem方法, 新增一個(gè)UIBarButtonItem, 在這里我們使用系統(tǒng)內(nèi)置的Edit項(xiàng)目. 您也可以使用自定義的圖示或文字來建立. 并在第2個(gè)參數(shù), 直接通過Lambda Expression 來建立按鈕按下去的處理. 我們同樣通過PushViewController方法將Level 2 Screen載入.

3. 執(zhí)行專案的結(jié)果如下：

按下Level 1 右邊的”Edit”按鈕, 便會(huì)載入Level 2 Screen. 因?yàn)槲覀儧]有設(shè)定Level 1 Screen的Title, 因此在Level 2 Screen左邊的按鈕會(huì)顯示預(yù)設(shè)的”Back”

定制NavigationBar左邊的按鈕

在目前的練習(xí)中, NavigationBar左邊按鈕的顯示文字為上一個(gè)畫面的Title, 若沒有設(shè)定Title則會(huì)顯示Back. 接下來我們來定制Level 1 Screen左邊的按鈕文字, 方法如下：

1. 開啟level1screen.cs, 在ViewDidLoad事件中, 新增以下代碼：

由上述的代碼可知, 我們同樣是呼叫SetLeftBarButtonItem (剛剛是SetRightBarButtonItem)的方式, 新增一個(gè)按鈕來取代預(yù)設(shè)的按鈕. 然后輸入自定義的文字”回到主畫面”.

2. 執(zhí)行專案的結(jié)果如下：

可以對(duì)照一下先前的執(zhí)行結(jié)果, NavigationBar左邊按鈕的文字已經(jīng)取代為我們自定義的文字了.

隱藏主畫面的NavigationBar

如果不想在主畫面中也顯示NavigationBar, 可以通過在HomeScreen.cs中新增ViewWillAppear及ViewWillDisappear事件處理來將主畫面中的NavigationBar隱藏起來, 代碼如下：

執(zhí)行結(jié)果如下：

結(jié)語

本篇文章說明如何通過Navigation controller來建立多頁面的iOS 應(yīng)用程式. 在iOS中還有其他建立多頁面應(yīng)用程式的方法, 例如Tab控制項(xiàng)可以通過畫面下方的頁簽來切換不同畫面. Storyboard 可以通過Interface Builder來建立應(yīng)用程式的多個(gè)畫面以及畫面之間的鏈接.

本文轉(zhuǎn)載自