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

前言
不同于iOS,Xamarin 在Visual Studio中针对Android,可以直接设计用户接口。在本篇教学文章中,笔者会针对Android的项目目录结构以及基本控件进行介绍,包含TextView,EditView,Toggle/ Switch以及Seekbar控件。
Android 项目目录结构
在Visual Studio建立Android 应用程序项目后,在方案总管中会看到如下图的目录结构:
Assets: 放置在Assets文件夹中的档案,将会一起被封装进Android的封装档中(建置动作要设定为"AndroidAsset"). 之后便可以透过如下的语句来存取Assets的资源。

public class ReadAsset : Activity
{
protected override void OnCreate (Bundle bundle) {
base.OnCreate (bundle);
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 pane
  • @+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的宣告如下,请微调部份属性:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:textAppearance=&quot;?android:attr/textAppearanceMedium"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/textView1"/>
<ToggleButton
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/toggleButton1"
android:textOn="开"
android:textOff="关"
android:layout_marginBottom="6.7dp" />
<Switch
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textOn="开"
android:textOff="关"
android:id="@+id/Switch1"
android:layout_marginRight="225.3dp" />

</LinearLayout>

2. 开启SwitchToggleScreen.cs. 并撰写以下程序代码

//载入页面
SetContentView(Resource.Layout.SwitchToggle);

//宣告并取得控件实体
ToggleButton toggle = FindViewById<ToggleButton>(Resource.Id.toggleButton1);
Switch _switch = FindViewById<Switch>(Resource.Id.Switch1);
TextView msg = FindViewById<TextView>(Resource.Id.textView1);

//处理Toggle Button的Click事件, 并将状态显示在TextView
toggle.Click+= (sender, e) => {
if (toggle.Checked) {
msg.Text = "目前Toggle Button的状态是\"开\"";}
else{
msg.Text = "目前Toggle Button的状态是\"关\"";};};

//处理Switch的Click事件, 并将状态显示在TextView
_switch.Click += (sender, e) => {
if (_switch.Checked) {
msg.Text = "目前Switch Button的状态是\"开\"";}
else{
msg.Text = "目前Switch Button的状态是\"关\"";};};

Toggle Button及Switch 控件的操作几乎完全相同,主要就是处理控件的click事件并判断目前的开关状况
3. 执行项目并检视执行结果.
 
Seek Bar
1. 开启seekBar.axml并从工具箱拖放TextView及SeekBar控件进屏幕
界面宣告的xml如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:textAppearance=&quot;?android:attr/textAppearanceMedium"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/textView1"/>
<Seekbar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/Seekbar1"
android:layout_marginRight="48.0dp" />

</LinearLayout>

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

//载入页面

SetContentView(Resource.Layout.SeekBar);

//宣告并取得页面上的控件

var msg = FindViewById<TextView>(Resource.Id.textView1);

var seekbar = FindViewById<SeekBar>(Resource.Id.seekBar1);

//将seekBar的最大值设定为100

seekbar.Max = 100;

//处理SeekBar的ProgressChanged事件,并将目前的大小(进度)透过TextView呈现

seekbar.ProgressChanged += (sender,e) => {

msg.Text = string.Format("目前Seekbar的大小为{0}",seekbar.Progress.ToString());

};

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跨平台开发实战(2) - Xamarin.iOS基本控制项介绍

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

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

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

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

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

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

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

  5. Visual Studio跨平台开发(4):Xamarin Android控制项介绍

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

  6. Visual Studio跨平台开发(5):Xamarin Android多页面应用开发

    前言 大部份的Android 都具有实体或虚拟的Back键. 因此在处理多页面应用程序时, 与先前所介绍的iOS Navigation controller 比较起来会简单许多. 1. 开启Visua ...

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

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

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

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

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

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

随机推荐

  1. unity3d ngui-TweenRotation-TweenPosition-TweenScale

    using UnityEngine; using System.Collections; public class TweenFlipCARDS : MonoBehaviour { private f ...

  2. Matlab的parfor并行编程

    Matlab的parfor并行编程 通常消耗最多计算资源的程序往往是循环. 把循环并行化.或者优化循环体中的代码是最经常使用的加快程序执行速度的思路. Matlab提供了parforkeyword,能 ...

  3. 安装logstash,elasticsearch,kibana三件套(转)

    logstash,elasticsearch,kibana三件套 elk是指logstash,elasticsearch,kibana三件套,这三件套可以组成日志分析和监控工具 注意: 关于安装文档, ...

  4. Cocos2d-X3.0 刨根问底(九)----- 场景切换(TransitionScene)源代码分析

    上一章我们分析了Scene与Layer相关类的源代码,对Cocos2d-x的场景有了初步了解,这章我们来分析一下场景变换TransitionScene源代码. 直接看TransitionScene的定 ...

  5. Codeforces Round #275 (Div. 2) C - Diverse Permutation (构造)

    题目链接:Codeforces Round #275 (Div. 2) C - Diverse Permutation 题意:一串排列1~n.求一个序列当中相邻两项差的绝对值的个数(指绝对值不同的个数 ...

  6. mooon编译系统介绍(可复用Makefile)

    mooon编译系统介绍(可复用Makefile).pdf(ChinaUnix下载) CSDN下载:http://download.csdn.net/detail/aquester/5626929 mo ...

  7. Lisp: Common Lisp, Racket, Clojure, Emacs Lisp - Hyperpolyglot

    Lisp: Common Lisp, Racket, Clojure, Emacs Lisp - Hyperpolyglot Lisp: Common Lisp, Racket, Clojure, E ...

  8. jQuery 自学笔记—9 常见特效 (终章)

    隐藏.显示.切换,滑动,淡入淡出,以及动画 效果演示 点击这里,隐藏/显示面板 一寸光阴一寸金,因此,我们为您提供快捷易懂的学习内容. 在这里,您可以通过一种易懂的便利的模式获得您需要的任何知识. 实 ...

  9. [置顶] 初识window.location.search

    window.location.search是从当前URL的?号开始的字符串 如:http://www.domain.com/item?id=0064014 它的search就是?id=0064014

  10. jquery学习之AJAX

    1,关于AJAX的简单介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准 ...