前言

在前一篇教學中, 我們學會如何使用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 //初始化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方法如下圖所示:

在上面的程式碼中, 我們先初始化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. 執行專案後的結果如下:

載入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

新增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. 執行專案的結果如下:

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

客製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. 執行專案的結果如下:

可以對照一下先前的執行結果, 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 }

執行結果如下:

結語

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

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

  1. Visual Studio 跨平台開發實戰(5) - Xamarin Android 多頁面應用程式開發 (转帖)

    前言 大部份的Android 都具有實體或虛擬的Back鍵. 因此在處理多頁面應用程式時, 與先前所介紹的iOS Navigation controller 比較起來會簡單許多. 1. 開啟Visua ...

  2. Visual Studio 跨平台開發實戰(2) - Xamarin.iOS 基本控制項介紹 (转帖)

    前言 在上一篇文章中, 我們介紹了Xamarin 以及簡單的HelloWorld範例, 這次我們針對iOS的專案目錄架構以及基本控制項進行說明. 包含UIButton,, UISlider, UISw ...

  3. Visual Studio 跨平台開發實戰(4) - Xamarin Android 基本控制項介紹 (转帖)

    前言 不同於iOS, Xamarin 在Visual Studio中針對Android, 可以直接設計使用者介面. 在本篇教學文章中, 筆者會針對Android的專案目錄結構以及基本控制項進行介紹, ...

  4. Visual Studio跨平台开发Xamarin

    台湾微软的一系列Visual Studio跨平台开发Xamarin的资料,上面还有视频.具体参看 http://www.microsoft.com/taiwan/newsletter/library/ ...

  5. Visual Studio跨平台开发实战(5) - Xamarin Android多页面应用程式开发

    原文 Visual Studio跨平台开发实战(5) - Xamarin Android多页面应用程式开发 前言 大部份的Andr​​oid 都具有实体或虚拟的Back键. 因此在处理多页面应用程式时 ...

  6. Visual Studio跨平台开发实战(4) - Xamarin Android基本控制项介绍

    原文 Visual Studio跨平台开发实战(4) - Xamarin Android基本控制项介绍 前言 不同于iOS,Xamarin 在Visual Studio中针对Android,可以直接设 ...

  7. Visual Studio跨平台开发实战(3) - Xamarin iOS多页面应用程式开发

    原文 Visual Studio跨平台开发实战(3) - Xamarin iOS多页面应用程式开发 前言 在前一篇教学中, 我们学会如何使用Visual Studio 搭配Xcode 进行iOS基本控 ...

  8. Visual Studio跨平台开发实战(2) - Xamarin.iOS基本控制项介绍

    原文 Visual Studio跨平台开发实战(2) - Xamarin.iOS基本控制项介绍 前言 在上一篇文章中, 我们介绍了Xamarin 以及简单的HelloWorld范例, 这次我们针对iO ...

  9. Visual Studio跨平台开发实战(1) - Hello Xamarin!

    原文 Visual Studio跨平台开发实战(1) - Hello Xamarin! 前言 应用程式发展的脚步, 从来没有停过. 从早期的Windows 应用程式, 到网路时代的web 应用程式, ...

随机推荐

  1. HITS

    HITS 1 概述 HITS(hypertext induced topic search)超链接归纳主题搜索是由kleinbers在90年代提出的基于链接分析的网页排名算法.Hits算法是利用Hub ...

  2. tp5 根据经纬度计算门店距离 可排序

    $branchInfo=Db::name('Branch')->where('b_id','250')->find(); $map['p.cate_id']=array('eq',5); ...

  3. iOS隐藏导航条1px的底部横线

    第二种方法:1)声明UIImageView变量,存储底部横线 @implementation MyViewController { UIImageView *navBarHairlineImageVi ...

  4. Appium 之处理首次启动手机App时的系统权限弹框

    一般首次启动一个手机App时都会有系统权限弹框,如下图所示: 权限弹窗上面的按钮都是固定的,只需要定位到“ALLOW”按钮,点击就可以了,代码如下: 这里主要用selenium里面的显示等待模块(We ...

  5. Java之RandomAccessFile小结

    今天跟大家分享一下javase中的关于I/O的操作: 有时我们需要在文件的末尾追加一些内容,在这时用RandomAccessFile就很好. 这个类有两个构造方法: RandomAccessFile( ...

  6. subprocess.Popen命令如何隐藏弹框

    在用PYQT编写GUI界面时,代码中有用到subprocess.Popen(),打包exe后每次遇到subprocess语句是就会弹出命令框,很是头疼, 下面是解决的办法 import subproc ...

  7. C#中==操作符存在的缺陷

    ==操作符因为语法简洁而备受欢迎,但它本身也存在着局限性,比如继承或泛型问题.下面让我们依次来看看吧. 1.==和继承性问题 关于==运算符在继承时存在的问题,我们以String类型为例进行说明. s ...

  8. SharePoint Caml Query 使用

    需要注意的是: 再使用ListQueryWebPart部件时,默认查看的list列表会出现乱码的情况,需要开启服务器呈现模式,如图: 特此记录一下

  9. django系列8.5--使用装饰器(视图函数中)实现用户登录状态检验

    views.py def session_auth(fn): def inner(request,*args,**kwargs): status = request.session.get('sess ...

  10. Java中Arrays工具类

    以下是实现六种功能的方法: 1.比较两个数组值是否相等: 结果为true.false.(布尔型不能比较) int []a={10,20,30}; int []b={10,20,30}; int []c ...