MonoDroid学习笔记（九）—— 控件大串烧，在Android上做一个CSDN的注册页面。

搞过winform或webform的朋友肯定都对控件非常熟悉，开发过程中界面上都要用到很多的相关控件。今天我们就来学习一下Android里的几个常用控件。拿CSDN的注册页面来作为参考，我们也来布局一个类似的手机页面。

CSDN的注册页面如下：http://passport.csdn.net/account/register，查看这个页面的源代码我们就可以发现，它是由一个table来进行布局的。那我们很自然的就想到我们手机的页面就使用TableLayout来进行布局吧：

[xhtml] view
plaincopyprint?

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TableLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:stretchColumns="1">

<TextView android:text="帐户信息"

android:background="#FFFFEFDB"

android:layout_width="fill_parent"

android:layout_height="30px"

android:textColor="#FF000000"

android:layout_centerVertical="true"/>

<TableRow>

<TextView android:text="用户名："

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<EditText android:id="@+id/txtUserName"

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:layout_column="1"

android:layout_alignParentRight="true" />

</TableRow>

<TableRow>

<TextView android:text="密码："

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<EditText android:id="@+id/txtPassword"

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:layout_column="1"

android:password="true"/>

</TableRow>

<TableRow>

<TextView android:text="密码确认："

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/tvConfirm"/>

<EditText android:id="@+id/txtConfirmPassword"

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:layout_column="1"

android:password="true"/>

</TableRow>

<TableRow>

<TextView android:text="E-Mail："

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<EditText android:id="@+id/txtEmail"

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:layout_column="1"/>

</TableRow>

<TextView android:text="用户信息"

android:background="#FFFFEFDB"

android:layout_width="fill_parent"

android:layout_height="30px"

android:textColor="#FF000000"

android:layout_centerVertical="true"/>

<TableRow>

<TextView android:text="来自："

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<Spinner android:id="@+id/spinFrom"

android:layout_height="wrap_content"

android:layout_width="fill_parent"></Spinner>

</TableRow>

<TableRow>

<TextView android:text="性别："

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<RadioGroup android:orientation="horizontal"

android:id="@+id/rgGender"

android:layout_height="wrap_content"

android:layout_width="fill_parent">

<RadioButton android:id="@+id/rbMale"

android:text="男"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<RadioButton android:id="@+id/rbFemale"

android:text="女"

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

</RadioGroup>

</TableRow>

<TableRow>

<TextView android:text="职位："

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<Spinner android:id="@+id/spinPosition"

android:layout_height="wrap_content"

android:layout_width="fill_parent"></Spinner>

</TableRow>

<TableRow>

<TextView android:text="行业："

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<Spinner android:id="@+id/spinIndustry"

android:layout_height="wrap_content"

android:layout_width="fill_parent"></Spinner>

</TableRow>

<TableRow>

<TextView android:text="工作年限："

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<Spinner android:id="@+id/spinWorkExp"

android:layout_height="wrap_content"

android:layout_width="fill_parent"

android:entries="@+array/workExp">

</Spinner>

</TableRow>

<TableRow>

<TextView android:text="校验码："

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<EditText android:id="@+id/txtValidate"

android:layout_height="wrap_content"

android:layout_width="fill_parent"/>

</TableRow>

<TableRow android:visibility="gone" android:id="@+id/rowValidate">

<TextView android:id="@+id/tvValidate"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_column="1"/>

</TableRow>

<TableRow>

<TextView android:text="注册条款："

android:layout_width="wrap_content"

android:layout_height="wrap_content"/>

<CheckBox android:text="我已仔细阅读并接受CSDN注册条款"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/cbAccept"/>

</TableRow>

<TableRow>

<Button android:id="@+id/btnOK"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="确定"/>

</TableRow>

</TableLayout>

</ScrollView>

从上面的布局文件我们可以看到，由于我们的手机屏幕较小，不能在一屏显示所有的信息，所以在TableLayout外面还套了一层ScollView，当页面内容超出一屏时，会出现纵向滚动条。

如果页面某些字段没有填写，我们需要弹出提示。还记得我们之前已经封装过一个MessageBox类了吗？但里面的AlertDialog标题中只有文字而没有图标，我们再增加一个Alert方法，使其弹出的对话框的标题中显示一个叹号图片，这个图片是Android里自带的：

[c-sharp] view
plaincopyprint?

public static void Alert(Context ctx, string message)

{

CreateDialog(ctx, "提示", message).SetIcon(Android.Resource.Drawable.IcDialogAlert).SetPositiveButton("确定", delegate { }).Show();

}

Android中的下拉菜单是Spinner，相当于winform中的ComboBox，Html中的<select>，由于手机画面有限，在有限的范围选择项目，下拉菜单是唯一，也是较好的选择。为Spinner增加下拉项有很多种方法，在这里我使用了两种方法。一是直接在布局文件Main.axml中指定了Spinner的android:entries属性，见上面布局文件中的“工作年限”这一项，有这么个属性：android:entries="@+array/workExp"。这代表这个Spinner引用了一个叫做workExp的array。那么这个array是在哪里定义的呢？我们在Layout文件下新增一个叫做WorkExperience.xml的文件，内容如下：

[xhtml] view
plaincopyprint?

<?xml version="1.0" encoding="utf-8"?>

<resources>

<string-array name="workExp">

<item>学生</item>

<item>一年</item>

<item>两年</item>

<item>三年</item>

<item>三年到五年</item>

<item>五年以上</item>

</string-array>

</resources>

这里的workExp就是被Spinner引用的array了。

另一种方法是在OnCreate方法里增加：

[c-sharp] view
plaincopyprint?

Spinner spinFrom = FindViewById<Spinner>(Resource.Id.spinFrom);

spinFrom.Adapter = InitAdapter(new string[] { "北京", "上海", "广州", "深圳", "杭州", "南京", "成都", "武汉" });

Spinner spinPosition = FindViewById<Spinner>(Resource.Id.spinPosition);

spinPosition.Adapter = InitAdapter(new string[] { "CTO", "产品总监", "项目总监", "产品经理", "技术经理", "项目经理", "系统架构师", "需求分析师", "软件工程师" });

Spinner spinIndustry = FindViewById<Spinner>(Resource.Id.spinIndustry);

spinIndustry.Adapter = InitAdapter(new string[] { "移动与手机应用", "金融", "电信", "互联网", "物流", "电子政务" });

在点击校验码的输入框时，我们会出现一组五位随机字符串的验证码，这个效果我是这样实现的。在布局文件中有一个TableRow放了一个TextView，用来生成校验码，TableRow一开始是隐藏的，在点击了输入验证码的输入框后才可见。所以我们要对txtValidate输入框的Touch事件绑定处理方法：

[c-sharp] view
plaincopyprint?

EditText txtValidate = FindViewById<EditText>(Resource.Id.txtValidate);

txtValidate.SetOnTouchListener(new MyTouchListener());

MyTouchListener是一个实现了EditText.IOnTouchListener接口的类，用以实现点击输入框时的逻辑。记得实现Java的接口时，要继承Java.Lang.Object类：

[c-sharp] view
plaincopyprint?

class MyTouchListener : Java.Lang.Object, EditText.IOnTouchListener

{

const string str = "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ";

public bool OnTouch(View v, MotionEvent e)

{

TableRow row = ((Activity)v.Context).FindViewById<TableRow>(Resource.Id.rowValidate);

row.Visibility = ViewStates.Visible;

TextView tv = ((Activity)v.Context).FindViewById<TextView>(Resource.Id.tvValidate);

tv.Visibility = ViewStates.Visible;

Random r = new Random();

char[] chars = new char[5];

for (int i = 0; i < 5; i++)

{

chars[i] = str[r.Next(0, str.Length)];

}

tv.Text = new string(chars);

return true;

}

}

在点击确定按钮时，我们要对页面的字段进行校验，有非空的校验，也有输入内容一致性的校验，这部分内容比较简单，我就不一一介绍了，先定义一个实现Button.IOnClickListener接口的类，实现按钮点击的逻辑，然后在按钮的SetOnClickListener中传入该类的实例化对象：

[c-sharp] view
plaincopyprint?

Button btnOK = FindViewById<Button>(Resource.Id.btnOK);

btnOK.SetOnClickListener(new MyClickListener(this));

[c-sharp] view
plaincopyprint?

class MyClickListener : Java.Lang.Object, Button.IOnClickListener

{

Activity act;

public MyClickListener(Activity act)

{

this.act = act;

}

private bool ValidateEditText(int id, string name)

{

if (string.IsNullOrEmpty(act.FindViewById<EditText>(id).Text))

{

MessageBox.Alert(act, name + "不能为空");

return false;

}

return true;

}

public void OnClick(View v)

{

Activity act = v.Context as Activity;

if (!ValidateEditText(Resource.Id.txtUserName, "用户名"))

return;

EditText txtPassword = act.FindViewById<EditText>(Resource.Id.txtPassword);

if (!ValidateEditText(Resource.Id.txtPassword, "密码"))

return;

if (!ValidateEditText(Resource.Id.txtConfirmPassword, "密码确认"))

return;

if (act.FindViewById<EditText>(Resource.Id.txtPassword).Text != act.FindViewById<EditText>(Resource.Id.txtConfirmPassword).Text)

{

MessageBox.Alert(act, "两次输入密码不一致");

return;

}

if (!ValidateEditText(Resource.Id.txtEmail, "邮箱"))

return;

if (!act.FindViewById<RadioButton>(Resource.Id.rbMale).Checked && !act.FindViewById<RadioButton>(Resource.Id.rbFemale).Checked)

{

MessageBox.Alert(act, "请选择性别");

return;

}

if (!ValidateEditText(Resource.Id.txtValidate, "校验码"))

return;

if (act.FindViewById<EditText>(Resource.Id.txtValidate).Text != act.FindViewById<TextView>(Resource.Id.tvValidate).Text)

{

MessageBox.Alert(act, "校验码输入错误");

return;

}

if (!act.FindViewById<CheckBox>(Resource.Id.cbAccept).Checked)

{

MessageBox.Alert(act, "你必须接受CSDN协议");

return;

}

MessageBox.Alert(act, "注册成功");

}

}

运行效果：



这里介绍了控件的一些常用属性和操作，更深入的应用留给大家慢慢发掘了~~

转载http://blog.csdn.net/ojlovecd/article/details/6319186