前言

不同于iOS, Xamarin 在Visual Studio中针对Android, 可以直接设计使用者界面. 在本篇教学文章中, 笔者会针对Android的专案目录结构以及基本控制项进行介绍, 包含TextView, EditView, Toggle/ Switch以及Seekbar控制项.

Android 专案目录结构

在Visual Studio建立Android 应用程序专案后, 在方案总览中会看到如下图的目录结构:

Assets:放置在Assets文件夹中的文件, 将会一起被封装进Android的封装文档中(建构动作设定为"AndroidAsset"). 之后便可以通过如下的陈述式来存取Assets的资源。

1 public class ReadAsset : Activity
2  
3 {
4  
5 protected override void OnCreate (Bundle bundle) {
6  
7 base.OnCreate (bundle);
8  
9 InputStream input = Assets.Open ("my_asset.txt");}}

Resources
含Drawable, Layout以及Values文件夹. Drawable用来放置图片. 依照设备的解析度不同,
还可以新增drawable-hdpi, drawable-mdpi, drawable-ldpi等文件夹来存放不同解析度的文件.
Layout文件夹则是存放使用者界面文档(副文档名为.axml). 而Value文件夹则是可以存放不同类别的XML对应文档,
例如styles.xml, colors.xml… 针对Resources底下的文件, 动作请设定为”AndroidResource”

若您开启预设的Main.axml, 会看到如同下面的XML描述

  • LinearLayout: 主要的页面框架, 以垂直或水平的方式排列页面上的对象, 相当于Silverlight 中的stack panel
  • @+id/[对象名称]: 告诉Android parser, 为对象建立一个resource id
  • @string/[名称]: 在String.xml中建立一个字符串资源, 后续可供Resource类别存取.

上述的@string则会对应到文件夹Resources\Values\String.xml

  • 名称Hello对应到UI中Button的Text属性
  • 名称ApplicationName对应到专案属性中的应用程序名称
  • 名称Hello2为自行定义的字符串资源.

有了以上的基本概念后, 接下来我们来介绍Android的基本控制项。

TextView

1. 开启Lab03-BasicControls 专案并开启Layout文件夹下的TextView.axml

2. 从左边的工具列将TextView拖放到画面中, 双击TextView并编辑文字

3. 接着拖拉一个TextView, 并在右边的属性视窗设定textcolor为#2A3748, textsize为24dip

4. 再拖拉一个TextView并输入文字, 包含一个超链接. 在属性中将autolink的属性值改为web.

结果如下:链接文字会自动变成超链接.

5. 最后拖拉一个TextView并输入文字, 包含超过5位数的数字, 在属性中将autolink的属性值改为phone

结果如下: 数字被更改为超链接

6. 开启TextViewScreen.cs 并在OnCreate 事件中载入Layout中的TextView

SetContentView(Resource.Layout.TextView);

7. 执行专案并检视及操作有链接的TextView內容.

EditText

1. 开启Layout文件夹下的EditText.axml

2. 从工具箱中拖拉1个Text(Small)及1个Plain Text对象到画面上并编辑Text的文字如下:

将属性中的autoText设为true

3. 拖拉一组Text及Plain Text对象到画面上并编辑Text的文字如下:

将属性中的capitalize设为words.

4. 拖拉一组Text及password对象到画面上并编辑Text的文字如下:

5. 开启EditTextScreen.cs 并在OnCreate 事件中载入Layout中的TextView

SetContentView(Resource.Layout.EditText);

6. 执行专案, 在第一个栏位输入错的单字, 将会出现拼字错误及建议视窗.

7. 其他栏位效果如下:

Switch / Toggle button

Switch跟Toggle其实是很相似的控制项, 都是控制开和关的选项, 但显示的方式有所不同. 我们在同一个练习中使用这2个控制项.
(注: Switch控制项是在Android 4.0(API14)后才有, 因此在工具箱中找不到此控制项, 必须在XML中自行输入. 此外,
您的模拟器也必须是Android 4.0以上才能执行)

1. 开启SwitchToggle.axml. 在画面上依序部署1个TextView, 用来显示讯息, 1个ToggleButton以及1个Switch控制项. 如下图所示:

Axml的声明如下, 请微调部分属性:

01 http://schemas.android.com/apk/res/android"
02  
03 android:orientation="vertical"
04  
05 android:layout_width="fill_parent"
06  
07 android:layout_height="fill_parent">
08  
09  
10  
11 android:textAppearance="?android:attr/textAppearanceMedium"
12  
13 android:layout_width="fill_parent"
14  
15 android:layout_height="wrap_content"
16  
17 android:id="@+id/textView1"/>
18  
19  
20  
21 android:layout_width="fill_parent"
22  
23 android:layout_height="wrap_content"
24  
25 android:id="@+id/toggleButton1"
26  
27 android:textOn="开"
28  
29 android:textOff="关"
30  
31 android:layout_marginBottom="6.7dp"/>
32  
33  
34  
35 android:layout_width="fill_parent"
36  
37 android:layout_height="wrap_content"
38  
39 android:textOn="开"
40  
41 android:textOff="关"
42  
43 android:id="@+id/Switch1"
44  
45 android:layout_marginRight="225.3dp"/>
46  
47  

2. 开启SwitchToggleScreen.cs. 并编写以下代码.

01 //载入页面
02  
03 SetContentView(Resource.Layout.SwitchToggle);
04  
05 //声明并取得控制项实体
06  
07 ToggleButton toggle = FindViewById(Resource.Id.toggleButton1);
08  
09 Switch _switch = FindViewById(Resource.Id.Switch1);
10  
11 TextView msg = FindViewById(Resource.Id.textView1);
12  
13 //处理Toggle Button的Click事件, 并将状态显示在TextView
14  
15 toggle.Click+= (sender, e) => {
16  
17 if (toggle.Checked) {
18  
19 msg.Text = "目前Toggle Button的状态是\"开\"";}
20  
21 else{
22  
23 msg.Text = "目前Toggle Button的状态是\"关\"";};};
24  
25 //处理Switch的Click事件, 并将状态显示在TextView
26  
27 _switch.Click += (sender, e) => {
28  
29 if (_switch.Checked) {
30  
31 msg.Text = "目前Switch Button的状态是\"开\"";}
32  
33 else{
34  
35 msg.Text = "目前Switch Button的状态是\"关\"";};};

Toggle Button及Switch 控制项的操作几乎完全相同, 主要就是处理控制项的click事件并判断目前的开关状况.

3. 执行专案并检视执行结果.

Seek Bar

1. 开启seekBar.axml并从工具箱拖放TextView及SeekBar控制项进银幕

界面声明的xml如下:

01 http://schemas.android.com/apk/res/android"
02  
03 android:orientation="vertical"
04  
05 android:layout_width="fill_parent"
06  
07 android:layout_height="fill_parent">
08  
09  
10  
11 android:textAppearance="?android:attr/textAppearanceMedium"
12  
13 android:layout_width="fill_parent"
14  
15 android:layout_height="wrap_content"
16  
17 android:id="@+id/textView1"/>
18  
19  
20  
21 android:layout_width="fill_parent"
22  
23 android:layout_height="wrap_content"
24  
25 android:id="@+id/seekBar1"
26  
27 android:layout_marginTop="48.0dp"/>
28  
29  

2. 开启SeekBarScreen.cs并在OnCreate事件中编写以下代码:

01 //载入页面
02  
03 SetContentView(Resource.Layout.SeekBar);
04  
05 //声明并取得页面上的控制项
06  
07 var msg = FindViewById(Resource.Id.textView1);
08  
09 var seekbar = FindViewById(Resource.Id.seekBar1);
10  
11 //将seekBar的最大值设定为100
12  
13 seekbar.Max = 100;
14  
15 //处理SeekBar的ProgressChanged事件, 并将目前的大小(进度)通过extView呈现
16  
17 seekbar.ProgressChanged += (sender, e) => {
18  
19 msg.Text = string.Format("目前Seekbar的大小为{0}", seekbar.Progress.ToString());
20  
21 };

SeekBar的操作非常的直截. 您只需要处理SeekBar控制项的ProgressChanged事件即可.

3. 执行专案并检视执行结果.

结语

Android 的开发方式, 与先前介绍的iOS略有不同. iOS通过Outlet及Action将View及Controller进行连接.
而Android 则是通过Parser, 为页面上的控制项建立id属性,
让Activity可以通过FindViewById方式建立控制项的对象实体, 接下来的处理方式就与iOS或Windows
Form在操作控制项的方式类似. 在下一篇教学文章中, 将说明Android应用程序的多页面处理.

Visual Studio跨平台开发(4):Xamarin Android控制项介绍的更多相关文章

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

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

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

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

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

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

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

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

  5. Visual Studio跨平台开发(1):Hello Xamarin!

    前言 应用程序发展的脚步, 从来没有停过. 从早期的Windows 应用程序, 到网络时代的web 应用程序, 再到近几年相当盛行的行动装置应用程序(Mobile Application), 身为C# ...

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

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

  7. Visual Studio跨平台开发Xamarin

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

  8. Visual Studio跨平台开发(3):Xamarin iOS多页面应用开发

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

  9. Visual Studio跨平台开发(2):Xamarin.iOS基本控制项介绍

    前言 在上一篇文章中, 我们介绍了Xamarin 以及简单的HelloWorld范例, 这次我们针对iOS的专案目录架构以及基本控制项进行说明. 包含UIButton,UISlider,UISwitc ...

随机推荐

  1. Oracle 11g数据库安装与卸载的方法图解(windows)

    一.Oracle 11g安装 安装之前要先确定自己的电脑配置,以windows为例,如果是win7以下系统如xp等,可以选择Oracle 10g.因为10g的程序文件只有200多兆,而11g及达到了2 ...

  2. SDK支付流程

    1.普通支付流程 2.代理流程 易接.U8SDK

  3. Python读取不同文件夹下的图片并且分类放到新创建的训练文件夹和标签文件夹

    在深度学习的训练时,经常会碰到训练的样本数据集和标签数据集是在一个文件夹中,这个时候我们就不得不进行一些数据的预处理和文件的分类,例如将训练(training data)数据集和标签数据集(label ...

  4. CodeSimth - .Net Framework Data Provider 可能没有安装。解决方法[转载 ]

    原文:http://www.cnblogs.com/chenrui7/p/3592082.html 今天想使用CodeSimth生成一个sqlite数据库的模板.当添加添加数据库的时候发现: .Net ...

  5. Codeforces Round #326(Div2)

    CodeForces 588A 题意:Duff喜欢吃肉,想在接下来的n天,每天都有Ai斤肉吃,但每一天肉的单价Pi不定,肉 可以保存不过期,现已知n天每天肉的斤数Ai,以及单价Pi,为了使每天都   ...

  6. jQuery选择器之id选择器

    页面的任何操作都需要节点的支撑,开发者如果快速高效的找到指定的节点也是前端开发中的一个重点.jQuery提供了一系列的选择器帮助开发者达到这一目的,让开发者可以更少的处理复杂选择过程与性能优化,更多专 ...

  7. rxjs的世界

    rxjs学习了几个月了,看了大量的东西,在理解Observable的本文借鉴的是渔夫的故事,原文,知识的主线以<深入浅出rxjs>为主,动图借鉴了rxjs中文社区翻译的文章和国外的一个动图 ...

  8. IIS7 无法显示 htm js 图片 css的问题

    中文:开始->控件面板->程序->打开或关闭windows功能->Internet信息服务->万维网服务->常见http功能->静态内容(选中) englis ...

  9. 省选算法学习-回文自动机 && 回文树

    前置知识 首先你得会manacher,并理解manacher为什么是对的(不用理解为什么它是$O(n)$,这个大概记住就好了,不过理解了更方便做$PAM$的题) 什么是回文自动机? 回文自动机(Pal ...

  10. RocketMQ 源码分析 RouteInfoManager(四)

    在上一章分析了NamesrvController的构造函数时,会生成一个RouteInfoManager对象,该对象存放着整个消息集群的相关消息,所以这里单独拿出来分析.其实试想一下namesrv的功 ...