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

转载 2014年03月03日 11:15:42
前言

在前一篇教学中, 我们学会如何使用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 = newHomeScreen();
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(newUIBarButtonItem(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(newUIBarButtonItem("回到主画面", 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(true,true);
07  
08 }
09  
10 public override void ViewWillDisappear(bool animated) {
11  
12 base.ViewWillDisappear(animated);
13  
14 this.NavigationController.SetNavigationBarHidden(false,true);
15  
16 }

 

执行结果如下:

 

结语

本篇文章说明如何透过Navigation controller来建立多页面的iOS 应用程式. 在iOS中还有其他建立多页面应用程式的方法, 例如Tab控制项可以透过画面下方的页籤來切换不同画面. Storyboard 可以透过Interface Builder来建立应用程式的多个画面以及画面之间的链接.

 

转自:Terry's IT Note

了解更多移动跨平台解决方案,请访问:http://xamarin.csdn.net

 

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

前言 應用程式發展的腳步, 從來沒有停過. 從早期的Windows 應用程式, 到網路時代的web 應用程式, 再到近幾年相當盛行的行動裝置應用程式(Mobile Application), 身為C#...
  • u013695458
  • u013695458
  • 2014年03月03日 10:19
  • 12385

Visual Studio 跨平台开发实战--- Hello Xamarin! [Visual Studio + C# + Xamarin = iOS/Android/Windows Apps ]

前言 應用程式發展的腳步,從來沒有停過。從早期的 Windows 應用程式, 到網路時代的 web 應用程式,再到近幾年相當盛行的行動裝置應用程式 (Mobile Application),身為...
  • kingmax54212008
  • kingmax54212008
  • 2014年02月02日 21:56
  • 4913

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

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

Xamarin.Forms开发实战基础篇大学霸内部资料

Xamarin iOS开发实战下册 (内部资料)
  • u014621518
  • u014621518
  • 2014年09月30日 16:36
  • 2141

Xamarin iOS开发实战(内部资料)

Xamarin iOS开发实战上册 (内部资料)
  • u014621518
  • u014621518
  • 2014年08月29日 13:23
  • 1703

Xamarin Android开发实战(上册)

Xamarin Android开发实战(上册)大学霸内部资料
  • u014621518
  • u014621518
  • 2015年04月02日 10:07
  • 1857

visual studio 2017 xamarin 的性能小疑问

好久没写了博客了,今天休息终于狠心配置了电脑性能还不错,于是安装了WIN10+VS2017 15.2 打开XMARIN的一个例子程序进行生成,发现性能方面有待提高啊,第1是VS2017默认选择微软的模...
  • hecgaoyuan
  • hecgaoyuan
  • 2017年05月14日 14:24
  • 1714

vs2017开发IOS(vs2017 xamarin 连接mac)

第一次写博客,不好别喷我。(vs2017 xamarin 连接mac) 这两天突然记起巨软的Visual Studio 2017 好像有说可以用C#开发IOS和Android应用,所以就自己去尝试了下...
  • qq756288646
  • qq756288646
  • 2018年01月04日 09:40
  • 380

VisualStudio 跨平台(Linux)调试

Visual GDB 跨平台调试简介Visual GDB是集成在VisualStudio上的一款跨平台C++调试插件,终于可以在Linux上用到宇宙第一IDE了。虽然在VS2015中可以安装跨平台的L...
  • luoru
  • luoru
  • 2017年04月23日 12:42
  • 907

在mac上为unity开发安装xamarin studio

最近有了那么个契机,有机会把自己的工作平台从windows上转移到了mac上,一开始我是忐忑的,因为mac上做unity开发是没有像visual studio这样的神器呀! 直到我知道了 xamar...
  • WPAPA
  • WPAPA
  • 2017年02月20日 23:50
  • 1796
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Visual Studio 跨平台开发实战(3) - Xamarin iOS 多页面应用程式开发
举报原因:
原因补充:

(最多只允许输入30个字)