AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2015-05-12 925
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文 Visual Studio跨平台开发实战(3) - Xamarin iOS多页面应用程式开发 前言 在前一篇教学中, 我们学会如何使用Visual Studio 搭配Xcode 进行iOS基本控制项的操作.

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

前言

在前一篇教学中, 我们学会如何使用Visual Studio 搭配Xcode 进行iOS基本控制项的操作. 但都是属于单一画面的应用程式. 这次我们要来练习如何透过Navigation Controller来建立多页面的iOS应用程式.

clip_image002

设定专案及画面

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

本文同时刊载于昕力资讯网站 ,转载请注明出处!

文章标签：
iOS开发
关键词：
iOS开发
iOS实战
iOS页面
visual studio实战
实战iOS
杰克.陈
目录
相关文章
游客moiomvrp3vyac2
|
8天前
|
IDE Android开发 iOS开发
探索Android与iOS开发的差异：平台选择对项目成功的影响
【9月更文挑战第27天】在移动应用开发的世界中，Android和iOS是两个主要的操作系统平台。每个系统都有其独特的开发环境、工具和用户群体。本文将深入探讨这两个平台的关键差异点，并分析这些差异如何影响应用的性能、用户体验和最终的市场表现。通过对比分析，我们将揭示选择正确的开发平台对于确保项目成功的重要作用。
游客moiomvrp3vyac2
26 4
人间真情在哪儿
|
17天前
|
开发框架 数据可视化 Java
iOS开发-SwiftUI简介
iOS开发-SwiftUI简介
人间真情在哪儿
52 3
shuj
|
5天前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案：Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上，安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择：是专注于单一平台深耕细作，还是寻找一种能够横跨两大系统的开发方案？Flutter，作为一种新兴的跨平台UI工具包，正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟，从Flutter的基础概念到实战应用，深入浅出地介绍这一技术的魅力所在。
shuj
22 7
天下无贼001
|
8天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台解决方案
【9月更文挑战第27天】在移动应用开发的广阔天地中，安卓和iOS两大操作系统如同双子星座般耀眼。开发者们在这两大平台上追逐着创新的梦想，却也面临着选择的难题。如何在保持高效的同时，实现跨平台的开发？本文将带你探索跨平台开发的魅力所在，揭示其背后的技术原理，并通过实际案例展示其应用场景。无论你是安卓的忠实拥趸，还是iOS的狂热粉丝，这篇文章都将为你打开一扇通往跨平台开发新世界的大门。
天下无贼001
26 8
shuj
|
14天前
|
前端开发 iOS开发 开发者
探索iOS开发中的SwiftUI框架
【9月更文挑战第21天】在iOS应用开发的广阔天地中，SwiftUI框架如一股清新之风，为开发者带来了声明式语法的便捷与高效。本文将深入探讨SwiftUI的核心概念、布局方式及数据绑定机制，同时通过实例演示如何运用SwiftUI构建用户界面，旨在引领读者领略SwiftUI的魅力，并激发其对iOS开发新趋势的思考与实践。
shuj
33 6
mrq4nk6ni2neg
|
14天前
|
安全 Swift iOS开发
探索iOS开发之旅：Swift语言的魅力与挑战
【9月更文挑战第21天】在这篇文章中，我们将一起潜入iOS开发的海洋，探索Swift这门现代编程语言的独特之处。从简洁的语法到强大的功能，Swift旨在让开发者能够以更高效、更安全的方式构建应用程序。通过实际代码示例，我们会深入了解Swift如何简化复杂任务，并讨论它面临的挑战和未来的发展方向。无论你是初学者还是有经验的开发者，这篇文章都将为你提供新的视角和知识。
mrq4nk6ni2neg
30 4
肥猪肥猪-17824
|
25天前
|
IDE 开发工具 Android开发
安卓与iOS开发对比：平台选择对项目成功的影响
【9月更文挑战第10天】在移动应用开发的世界中，选择正确的平台是至关重要的。本文将深入探讨安卓和iOS这两大主要移动操作系统的开发环境，通过比较它们的市场份额、开发工具、编程语言和用户群体等方面，为开发者提供一个清晰的指南。我们将分析这两个平台的优势和劣势，并讨论如何根据项目需求和目标受众来做出最佳选择。无论你是初学者还是有经验的开发者，这篇文章都将帮助你更好地理解每个平台的特性，并指导你做出明智的决策。
肥猪肥猪-17824
40 10
肥猪肥猪-17824
|
23天前
|
API Android开发 iOS开发
安卓与iOS开发中的线程管理对比
【9月更文挑战第12天】在移动应用的世界中，安卓和iOS平台各自拥有庞大的用户群体。开发者们在这两个平台上构建应用时，线程管理是他们必须面对的关键挑战之一。本文将深入探讨两大平台在线程管理方面的异同，通过直观的代码示例，揭示它们各自的设计理念和实现方式，帮助读者更好地理解如何在安卓与iOS开发中高效地处理多线程任务。
肥猪肥猪-17824
32 3
jiashufen
|
25天前
|
开发框架 Android开发 iOS开发
探索安卓与iOS开发的差异：构建未来应用的指南
在移动应用开发的广阔天地中，安卓与iOS两大平台各占半壁江山。本文将深入浅出地对比这两大操作系统的开发环境、工具和用户体验设计，揭示它们在编程语言、开发工具以及市场定位上的根本差异。我们将从开发者的视角出发，逐步剖析如何根据项目需求和目标受众选择适合的平台，同时探讨跨平台开发框架的利与弊，为那些立志于打造下一个热门应用的开发者提供一份实用的指南。
jiashufen
51 5
帅政的oss
|
25天前
|
开发工具 Android开发 iOS开发
安卓与iOS开发：平台选择的艺术与科学
在移动应用开发的广阔天地中，安卓与iOS两大平台如同东西方哲学的碰撞，既有共通之处又各具特色。本文将深入探讨这两个平台的设计理念、开发工具和市场定位，旨在为开发者提供一份简明扼要的指南，帮助他们在这场技术与商业的博弈中找到自己的道路。通过比较分析，我们将揭示每个平台的优势与局限，以及它们如何影响应用的性能、用户体验和市场接受度。无论你是初涉江湖的新手，还是经验丰富的老手，这篇文章都将为你的选择提供新的视角和思考。
帅政的oss
31 5

热门文章

最新文章

  • 1
    Visual Studio Installer打包后生成的安装文件每次执行都需要重新安装C++ 2010运行库(x86)的解决方案
  • 2
    微软官方工具：完全卸载Visual Studio
  • 3
    Visual studio 2010 中文版正式版无法安装Silverlight4 Tools的解决办法
  • 4
    Visual Studio 2013 智能提示功能消失解决办法
  • 5
    QT应用编程: 解决Visual Studio下使用qDebug没有输出、输出中文乱码
  • 6
    Visual Studio 小技巧：自定义代码片断
  • 7
    How-to: 利用Visual Studio升级Windows Phone 7工程
  • 8
    VS技巧 使用Visual Studio Icon Patcher将2010的图片注入到2012中
  • 9
    SSMS2008插件开发(2)--Microsoft Visual Studio 2008插件开发介绍
  • 10
    Visual Studio代码重构插件Refactor! Pro
  • 1
    Xamarin.Android | 获取常见的10种系统权限
    102
  • 2
    使用xamarin开发Android、iOS报错failed to open directory: 系统找不到指定的文件
    111
  • 3
    在Xamarin开发中，UWP环境下无法进入断点调试standard库的问题解决方案
    108
  • 4
    Xamarin 联合创始人 Miguel de Icaza 将离开微软
    108
  • 5
    C# Xamarin数据绑定入门基础
    164
  • 6
    Xamarin 学习笔记 - 配置环境(Windows & iOS)
    1271
  • 7
    C#使用Xamarin开发可移植移动应用终章(11.获取设备信息与常用组件,开源一个可开发模版.)
    1653
  • 8
    C#使用Xamarin开发可移植移动应用进阶篇(7.使用布局渲染器,修改默认布局),附源码
    991
  • 9
    C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码
    1155
  • 10
    C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码
    1298

    • 相关课程

    更多
  • AliOS Things物联网开发教程
  • 开源Android容器化框架Atlas开发者指南
  • Cloud Toolkit 开发部署效率提升神器

    • 相关电子书

    更多
  • 手淘iOS性能优化探索
  • From Java/Android to Swift iOS
  • 深入剖析iOS性能优化
    • 下一篇
    无影云桌面