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

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

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

<?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里自带的：

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的文件，内容如下：

<?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方法里增加：

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事件绑定处理方法：

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

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

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中传入该类的实例化对象：

Button btnOK = FindViewById<Button>(Resource.Id.btnOK); btnOK.SetOnClickListener(new MyClickListener(this)); 

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, "注册成功"); } } 

 

运行效果：

 

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