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

时间:2022-12-07 03:26:35

前言

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

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

設定專案及畫面

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

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

  • HomeScreen Level1Screen Level2Screen

新增後檔案結構如下圖所示:

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

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

4. 點選編輯區的HomeScreen, 並在右邊的Attributes Inpsctor將Top Bar變更為”Navigation Bar”

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

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

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

6. 為Button建立一個Outlet並命名為”btnToLv1”. 之後請關閉Xcode

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

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

01 //初始化UINavigationController
02  
03 var rootNavigationController = new UINavigationController();
04  
05 //初始化HomeScreen
06  
07 HomeScreen home = new HomeScreen();
08  
09 //將HomeScreen加入到rootNavigationController
10  
11 rootNavigationController.PushViewController(home, false);
12  
13 //將rootNavigationController 設為Window的RootViewController
14  
15 this.window.RootViewController = rootNavigationController;

完成後的FinishedLaunching方法如下圖所示:

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

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

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

1 public HomeScreen()
2  
3 base("HomeScreen"null)
4  
5 {
6  
7 this.Title = "我是主畫面";
8  
9 }

9. 執行專案後的結果如下:

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

載入Level 1 Screen

1. 我們要在點擊主頁面上的button後載入Level1Screen. 因此我們開啟HomeScreen.cs. 在類別下先宣告Level1Screen物件.

1 //宣告Level 1 screen
2  
3 Level1Screen lv1scr;

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

01 //撰寫HomeScreen的BtnToLv1按鈕事件, 判斷先前是否已瀏覽過level 1 screen,
02  
03 //若無, 則進行初始化並將lv1scr加入NavigationController
04  
05 this.btnToLv1.TouchUpInside += (sender, e) =>{
06  
07 if (this.lv1scr == null) { this.lv1scr = new Level1Screen(); }
08  
09 this.NavigationController.PushViewController(lv1scr, true);
10  
11 };

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

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

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

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

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

1. 開啟level1screen.cs, 並在類別下加入Level2Screen的宣告

1 //宣告Level 2 screen
2  
3 Level2Screen lv2scr;

2. 在level1screen.cs的ViewDidLoad事件中, 加入以下程式碼:

01 //設定右邊按鈕
02  
03 this.NavigationItem.SetRightBarButtonItem(new UIBarButtonItem(UIBarButtonSystemItem.Edit, (sender, e) =>
04  
05 {
06  
07 if (this.lv2scr == null) { this.lv2scr = new Level2Screen(); }
08  
09 this.NavigationController.PushViewController(lv2scr, true);
10  
11 }), true);

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

3. 執行專案的結果如下:

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

按下Level 1 右邊的”Edit”按鈕, 便會載入Level 2 Screen. 因為我們沒有設定Level 1 Screen的Title, 因此在Level 2 Screen左邊的按鈕會顯示預設的”Back”

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

客製NavigationBar左邊的按鈕

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

1. 開啟level1screen.cs, 在ViewDidLoad事件中, 新增以下程式碼:

01 //客製化左邊按扭
02  
03 this.NavigationItem.SetLeftBarButtonItem(new UIBarButtonItem("回到主畫面", UIBarButtonItemStyle.Plain,
04  
05 (sender, e) =>
06  
07 {
08  
09 this.NavigationController.PopViewControllerAnimated(true);
10  
11 }), true);

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

2. 執行專案的結果如下:

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

可以對照一下先前的執行結果, NavigationBar左邊按鈕的文字已經取代為我們自訂的文字了.

隱藏主畫面的NavigationBar

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

01 //透過ViewWillAppear及ViewWillDisappear 事件將Home Screen的Navigation controller 隱藏
02 public override void ViewWillAppear(bool animated) {
03  
04 base.ViewWillAppear(animated);
05  
06 this.NavigationController.SetNavigationBarHidden(truetrue);
07  
08 }
09  
10 public override void ViewWillDisappear(bool animated) {
11  
12 base.ViewWillDisappear(animated);
13  
14 this.NavigationController.SetNavigationBarHidden(falsetrue);
15  
16 }

執行結果如下:

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

結語

本篇文章說明如何透過Navigation controller來建立多頁面的iOS 應用程式. 在iOS中還有其他建立多頁面應用程式的方法, 例如Tab控制項可以透過畫面下方的頁籤來切換不同畫面. Storyboard 可以透過Interface Builder來建立應用程式的多個畫面以及畫面之間的連結.