Visual Studio跨平臺開發實戰(3) - Xamarin iOS多頁面應用程式開發

原文 Visual Studio跨平臺開發實戰(3) - Xamarin iOS多頁面應用程式開發

前言

在前一篇教學中, 咱們學會如何使用Visual Studio 搭配Xcode 進行iOS基本控制項的操做. 但都是屬於單一畫面的應用程式. 此次咱們要來練習如何透過Navigation Controller來創建多頁面的iOS應用程式.

設定專案及畫面

1. 開啓Xamarin Studio 並創建新專案, 專案類型爲iOS=>iPhone=>空白專案, 專案名稱爲02-Navigation.

2. 在專案中添加3個iPhone View Controller 的檔案, 檔案名稱以下：

• HomeScreen 
  Level1Screen 
  Level2Screen

新增後檔案結構以下圖所示：

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

4. 點選編輯區的HomeScreen, 並在右邊的Attributes Inpsctor將Top Bar變動爲」Navigation Bar」

5. 在Object Library中拖拉一個Button至畫面中並將文字改成」Go to Level 1 Screen」

6. 爲Button創建一個Outlet並命名爲」btnToLv1」. 以後請關閉Xcode

7. 在Visual Studio 中開啓此專案, 在專案屬性中設定應用程式名稱及版本等資訊, 並開啓」 AppDelegate.cs」 檔. 在FinishedLaunching事件中加入如下程式碼:

01	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">//初始化UINavigationController</span> //初始化UINavigationController</span>

02

03	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">var rootNavigationController = new UINavigationController();</span> var rootNavigationController = new UINavigationController();</span>

04

05	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">//初始化HomeScreen</span> //初始化HomeScreen</span>

06

07	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">HomeScreen home = new HomeScreen();</span> HomeScreen home = new HomeScreen();</span>

08

09	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">//將HomeScreen加入到rootNavigationController</span> //將HomeScreen加入到rootNavigationController</span>

10

11	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">rootNavigationController.PushViewController(home, false);</span> rootNavigationController.PushViewController(home, false);</span>

12

13	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">//將rootNavigationController 設為Window的RootViewController</span> //將rootNavigationController 設爲Window的RootViewController</span>

14

15	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">this.window.RootViewController = rootNavigationController;</span> this.window.RootViewController = rootNavigationController;</span>

完成後的FinishedLaunching方法以下圖所示：

在上面的程式碼中, 咱們先初始化Window, UINavigationController以及HomeScreen物件. 接着透過PushViewController方法將HomeScreen加入到NavigationController. 而後將rootNavigationController指定到Window.RootViewController屬性. 最後則是顯示Window.

8. 開啓HomeScreen.cs, 在建構子中設定主畫面的標題

1	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">public HomeScreen()</span> public HomeScreen()</span>

2

3	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">: base("HomeScreen", null)</span> : base("HomeScreen", null)</span>

4

5	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">{</span> {</span>

6

7	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">this.Title = "我是主畫面";</span> this.Title = "我是主畫面";</span>

8

9	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">}</span> }</span>

9. 執行專案後的結果以下：

載入Level 1 Screen

1. 咱們要在點擊主頁面上的button後載入Level1Screen. 所以咱們開啓HomeScreen.cs. 在類別下先宣告Level1Screen物件.

1	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">//宣告Level 1 screen</span> //宣告Level 1 screen</span>

2

3	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">Level1Screen lv1scr;</span> Level1Screen lv1scr;</span>

在ViewDidLoad事件中, 加入btnToLv1的touchupinside事件處理, 程式碼以下:

01	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">//撰寫HomeScreen的BtnToLv1按鈕事件, 判斷先前是否已瀏覽過level 1 screen,</span> //撰寫HomeScreen的BtnToLv1按鈕事件, 判斷先前是否已瀏覽過level 1 screen,</span>

02

03	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">//若無, 則進行初始化並將lv1scr加入NavigationController</span> //若無, 則進行初始化並將lv1scr加入NavigationController</span>

04

05	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">this.btnToLv1.TouchUpInside += (sender, e) =>{</span> this.btnToLv1.TouchUpInside += (sender, e) =>{</span>

06

07	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">if (this.lv1scr == null) { this.lv1scr = new Level1Screen(); }</span> if (this.lv1scr == null) { this.lv1scr = new Level1Screen(); }</span>

08

09	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">this.NavigationController.PushViewController(lv1scr, true);</span> this.NavigationController.PushViewController(lv1scr, true);</span>

10

11	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">};</span> };</span>

在上述程式碼中, 咱們一樣透過PushViewController方法將Level1Screen加入到Navigation控制項.

2. 執行專案並在主畫面中點擊按鈕以載入Level 1 Screen. 您會看到空白畫面被載入, 且NavigationBar左邊的按鈕會顯示上一個頁面的Title

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

在前一個練習, 咱們載入了Level 1 Screen, NavigationBar左邊是回到上一個頁面, 在這個練習中, 咱們要在NavigationBar中新增右邊的按鈕, 並透過按鈕來載入Level 2 Screen.

1. 開啓level1s​​creen.cs, 並在類別下加入Level2Screen的宣告

1	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">//宣告Level 2 screen</span> //宣告Level 2 screen</span>

2

3	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">Level2Screen lv2scr;</span> Level2Screen lv2scr;</span>

2. 在level1s​​creen.cs的ViewDidLoad事件中, 加入如下程式碼：

1

<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">//設定右邊按鈕this.NavigationItem.SetRightBarButtonItem(new UIBarButtonItem(UIBarButtonSystemItem.Edit, (sender, e) =></span> //設定右邊按鈕this.NavigationItem.SetRightBarButtonItem(new UIBarButtonItem(UIBarButtonSystemItem.Edit, (sender, e) =></span>

2

3	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">{</span> {</span>

4

5	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">if (this.lv2scr == null) { this.lv2scr = new Level2Screen(); }</span> if (this.lv2scr == null) { this.lv2scr = new Level2Screen(); }</span>

6

7	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">this.NavigationController.PushViewController(lv2scr, true);</span> this.NavigationController.PushViewController(lv2scr, true);</span>

8

9	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">}), true);</span> }), true);</span>

咱們透過SetRightBarButtonItem方法, 新增一個UIBarButtonItem, 在這裏咱們使用系統內建的Edit項目. 您也可使用自訂的圖示或文字來創建. 並在第2個參數, 直接透過Lambda Expression 來創建按鈕按下去的處理. 咱們一樣透過PushViewController方法將Level 2 Screen載入.

3. 執行專案的結果以下：

按下Level 1 右邊的」Edit」按鈕, 便會載入Level 2 Screen. 由於咱們沒有設定Level 1 Screen的Title, 所以在Level 2 Screen左邊的按鈕會顯示預設的」Back」

客制NavigationBar左邊的按鈕

在目前的練習中, NavigationBar左邊按鈕的顯示文字爲上一個畫面的Title, 若沒有設定Title則會顯示Back. 接下來咱們來客制Level 1 Screen左邊的按鈕文字, 方法以下：

1. 開啓level1s​​creen.cs, 在ViewDidLoad事件中, 新增如下程式碼：

1

<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">//客製化左邊按扭this.NavigationItem.SetLeftBarButtonItem(new UIBarButtonItem("回到主畫面", UIBarButtonItemStyle.Plain,</span> //客製化左邊按扭this.NavigationItem.SetLeftBarButtonItem(new UIBarButtonItem("回到主畫面", UIBarButtonItemStyle.Plain,</span>

2

3	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">(sender, e) =></span> (sender, e) =></span>

4

5	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">{</span> {</span>

6

7	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">this.NavigationController.PopViewControllerAnimated(true);</span> this.NavigationController.PopViewControllerAnimated(true);</span>

8

9	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">}), true);</span> }), true);</span>

由上述的程式碼可知, 咱們一樣是呼叫SetLeftBarButtonItem (剛剛是SetRightBarButtonItem)的方式, 新增一個按鈕來取代預設的按鈕. 而後輸入自訂的文字」回到主畫面」.

2. 執行專案的結果以下：

能夠對照一下先前的執行結果, NavigationBar左邊按鈕的文字已經取代爲咱們自訂的文字了.

隱藏主畫面的NavigationBar

若是不想在主畫面中也顯示NavigationBar, 能夠透過在HomeScreen.cs中新增ViewWillAppear及ViewWillDisappear事件處理來將主畫面中的NavigationBar隱藏起來, 程式碼以下：

01

<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">//透過ViewWillAppear及ViewWillDisappear 事件將Home Screen的Navigation controller 隱藏public override void ViewWillAppear(bool animated) {</span> //透過ViewWillAppear及ViewWillDisappear 事件將Home Screen的Navigation controller 隱藏public override void ViewWillAppear(bool animated) {</span>

02

03	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">base.ViewWillAppear(animated);</span> base.ViewWillAppear(animated);</span>

04

05	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">this.NavigationController.SetNavigationBarHidden(true, true);</span> this.NavigationController.SetNavigationBarHidden(true, true);</span>

06

07	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">}</span> }</span>

08

09	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">public override void ViewWillDisappear(bool animated) {</span> public override void ViewWillDisappear(bool animated) {</span>

10

11	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">base.ViewWillDisappear(animated);</span> base.ViewWillDisappear(animated);</span>

12

13	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">this.NavigationController.SetNavigationBarHidden(false, true);</span> this.NavigationController.SetNavigationBarHidden(false, true);</span>

14

15	<span class="notranslate" onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">}</span> }</span>

執行結果以下：

結語

本篇文章說明如何透過Navigation controller來創建多頁面的iOS 應用程式. 在iOS中還有其餘創建多頁面應用程式的方法, 例如Tab控制項能夠透過畫面下方的頁籤來切換不一樣畫面. Storyboard 能夠透過Interface Builder來創建應用程式的多個畫面以及畫面之間的連結. 有興趣的朋友能夠參考如下文章：

Using XCode, Interface Builder, and Storyboards 
http://docs.xamarin.com/guides/ios/user_interface/tables/part_5_-_using_xcode,_interface_builder,_and_storyboards

Creating Tabbed Applications

http://docs.xamarin.com/guides/ios/user_interface/creating_tabbed_applications

範例程式碼下載: Lab02-Navigation.zip

本文同時刊載於昕力資訊網站 ,轉載請註明出處!