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

 

 

运行效果：

 

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

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