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

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

2015-05-12 939
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文 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
杰克.陈
目录
相关文章
众所周知
|
2月前
|
NoSQL 编译器 C语言
C语言调试是开发中的重要技能，涵盖基本技巧如打印输出、断点调试和单步执行，以及使用GCC、GDB、Visual Studio和Eclipse CDT等工具。
C语言调试是开发中的重要技能，涵盖基本技巧如打印输出、断点调试和单步执行，以及使用GCC、GDB、Visual Studio和Eclipse CDT等工具。高级技巧包括内存检查、性能分析和符号调试。通过实践案例学习如何有效定位和解决问题，同时注意保持耐心、合理利用工具、记录过程并避免过度调试，以提高编程能力和开发效率。
众所周知
53 1
潇洒洒
|
2月前
|
监控 算法 iOS开发
深入探索iOS函数调用栈：符号化与性能调优实战
在iOS开发中，理解函数调用栈对于性能调优和问题排查至关重要。函数调用栈记录了程序执行过程中的函数调用顺序，通过分析调用栈，我们可以识别性能瓶颈和潜在的代码问题。本文将分享iOS函数调用栈的基本概念、符号化过程以及如何利用调用栈进行性能调优。
潇洒洒
42 2
追逐时光者
|
3月前
|
前端开发 JavaScript C#
CodeMaid：一款基于.NET开发的Visual Studio代码简化和整理实用插件
CodeMaid：一款基于.NET开发的Visual Studio代码简化和整理实用插件
追逐时光者
65 0
追逐时光者
|
4月前
|
存储 运维
.NET开发必备技巧：使用Visual Studio分析.NET Dump，快速查找程序内存泄漏问题！
.NET开发必备技巧：使用Visual Studio分析.NET Dump，快速查找程序内存泄漏问题！
追逐时光者
82 2
请看我回答~
|
5月前
|
JSON 搜索推荐 定位技术
打造个性化天气应用：iOS开发实战
【8月更文挑战第31天】在这篇文章中，我们将一起探索如何从零开始构建一个iOS天气应用。通过简单易懂的步骤，你将学习到如何使用Swift编程语言和苹果的开发工具Xcode来实现这个目标。我们会涉及到用户界面设计、网络编程以及数据解析等关键技能，确保你能够顺利地完成这个项目。无论你是初学者还是有一定经验的开发者，这篇文章都会带给你新的启发和收获。
请看我回答~
42 0
aqi00
|
6月前
|
C++ Windows
FFmpeg开发笔记（三十九）给Visual Studio的C++工程集成FFmpeg
在Windows上使用Visual Studio 2022进行FFmpeg和SDL2集成开发，首先安装FFmpeg至E:\msys64\usr\local\ffmpeg，然后新建C++控制台项目。在项目属性中，添加FFmpeg和SDL2的头文件及库文件目录。接着配置链接器的附加依赖项，包括多个FFmpeg及SDL2的lib文件。在代码中引入FFmpeg的`av_log`函数输出"Hello World"，编译并运行，若看到"Hello World"，即表示集成成功。详细步骤可参考《FFmpeg开发实战：从零基础到短视频上线》。
aqi00
268 0
FFmpeg开发笔记（三十九）给Visual Studio的C++工程集成FFmpeg
龙大吉
|
6月前
|
人工智能 前端开发 Devops
NET技术在现代开发中的影响力日益增强，本文聚焦其核心价值，如多语言支持、强大的Visual Studio工具、丰富的类库和跨平台能力。
【7月更文挑战第4天】**.NET技术在现代开发中的影响力日益增强，本文聚焦其核心价值，如多语言支持、强大的Visual Studio工具、丰富的类库和跨平台能力。实际应用涵盖企业系统、Web、移动和游戏开发，以及云服务。面对性能挑战、容器化、AI集成及跨平台竞争，.NET持续创新，开发者应关注技术趋势，提升技能，并参与社区，共同推进技术发展。**
龙大吉
52 1
郏国上
|
8月前
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后，期望系统导航栏背景色为白色，但是导航栏背景变成黑色问题
ios15从隐藏系统导航栏页面进入显示系统导航栏页面后，期望系统导航栏背景色为白色，但是导航栏背景变成黑色问题
郏国上
75 0
郏国上
|
8月前
|
移动开发 iOS开发 Perl
iOS客户端和h5页面的互相调用，服务器和客户端间通信方式
iOS客户端和h5页面的互相调用，服务器和客户端间通信方式
郏国上
116 0
郏国上
|
8月前
|
移动开发 Android开发 iOS开发
ios标准页面调用HTML5页面和HTML5调用ios的函数
ios标准页面调用HTML5页面和HTML5调用ios的函数
郏国上
54 0

热门文章

最新文章

  • 1
    深入探索iOS开发中的SwiftUI框架
  • 2
    深入解析iOS 14隐私保护功能：用户数据安全的新里程碑
  • 3
    安卓与iOS开发中的线程管理差异解析
  • 4
    移动应用开发之旅：探索Android和iOS平台
  • 5
    安卓与iOS开发中的跨平台策略：一次编码，多平台部署
  • 6
    探索iOS生态系统：从App Store优化到用户体验提升
  • 7
    ios样式开关按钮jQuery插件
  • 8
    探索iOS开发：从新手到专家的旅程
  • 9
    探索iOS开发之旅：从初学者到专家
  • 10
    深入探索Android与iOS系统安全性的对比分析
  • 1
    Xamarin.Android | 获取常见的10种系统权限
    136
  • 2
    使用xamarin开发Android、iOS报错failed to open directory: 系统找不到指定的文件
    131
  • 3
    在Xamarin开发中，UWP环境下无法进入断点调试standard库的问题解决方案
    131
  • 4
    Xamarin 联合创始人 Miguel de Icaza 将离开微软
    123
  • 5
    C# Xamarin数据绑定入门基础
    181
  • 6
    Xamarin 学习笔记 - 配置环境(Windows & iOS)
    1294
  • 7
    C#使用Xamarin开发可移植移动应用终章(11.获取设备信息与常用组件,开源一个可开发模版.)
    1728
  • 8
    C#使用Xamarin开发可移植移动应用进阶篇(7.使用布局渲染器,修改默认布局),附源码
    1007
  • 9
    C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码
    1186
  • 10
    C#使用Xamarin开发可移植移动应用(3.Xamarin.Views控件)附源码
    1324

    • 相关课程

    更多
  • 开源Android容器化框架Atlas开发者指南
  • AliOS Things物联网开发教程
  • C++ 入门教程开发文档

    • 相关电子书

    更多
  • 手淘iOS性能优化探索
  • From Java/Android to Swift iOS
  • 深入剖析iOS性能优化
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅