Android开发——UI组件详解及注册提交表单实现

今天讲解的内容是UI组件的TextView组件和EditView组件。

通过今天的作业提现各种组件的用法并介绍通用属性。

作业；                             

上图为今天的作业，要求用Android实现上述页面布局，不用实现功能。

首先，我写了一下string.xml文件，把所有字符串都写到里面，代码如下：

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

<resources>

   <stringname="title">杨博的登录作业</string>

   <stringname="mail">电子邮件:</string>

   <stringname="user">用户名:</string>

   <stringname="pass">密码:</string>

   <stringname="repass">确认密码:</string>

   <stringname="num">验证码:</string>

   <stringname="really"><a href="#">看不清？</a></string>

   <stringname="again"><a href="#">换一个</a></string>

   <stringname="xieyi">我已阅读并同意《凤凰使用协议》</string>

   <stringname="sub"><a href="#">提交注册</a></string>

</resources>

写好string.xml文件后，我们需要写布局文件。对于这个提交注册表单，我们需要用到的布局方式不是单一的，而是多种嵌套。因为，如果我们用线性布局，每行或列只能放一个组件，不能满足上图要求。用相对布局显得太繁琐。用表格布局，前四行可以完成，但验证码这一行就有点困难了，所以综述这点，我用了表格布局+相对布局的方式。

布局文件如下：

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

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

   android:layout_width="fill_parent"

   android:layout_height="fill_parent"

   android:background="@drawable/girl"

  >

   <!-- 电子邮件 -->

   <TableRow>

       <TextView

           android:layout_width="fill_parent"

           android:layout_height="wrap_content"

           android:text="@string/mail"

            android:textSize="20dp"

           android:textStyle="bold"/>

       

       <EditText

           android:layout_width="200dp"

           android:layout_height="wrap_content"

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

        

       

   </TableRow>

  <!-- 用户名 -->

    <TableRow>

       <TextView

           android:layout_width="fill_parent"

           android:layout_height="wrap_content"

           android:text="@string/user"

           android:textSize="20dp"

           android:textStyle="bold"/>

       

       <EditText

           android:layout_width="200dp"

           android:layout_height="wrap_content"

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

       

   </TableRow>

   <!-- 密码 -->

    <TableRow>

       <TextView

           android:layout_width="fill_parent"

           android:layout_height="wrap_content"

           android:text="@string/pass"

           android:textSize="20dp"

           android:textStyle="bold"/>

       

       <EditText

           android:layout_width="200dp"

           android:layout_height="wrap_content"

           android:password="true"

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

       

   </TableRow>

   <!-- 确认密码 -->

    <TableRow>

       <TextView

           android:layout_width="fill_parent"

            android:layout_height="wrap_content"

           android:text="@string/repass"

           android:textSize="20dp"

           android:textStyle="bold"/>

       

       <EditText

           android:layout_width="200dp"

           android:layout_height="wrap_content"

           android:password="true"

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

       

   </TableRow>

 

 

    <RelativeLayout >

       <!-- 验证码 -->

        <TextView

            android:id="@+id/num_tv"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_alignParentLeft="true"

            android:paddingRight="20dp"

            android:paddingTop="15dp"

            android:text="@string/num"

             android:textSize="20dp"

            android:textStyle="bold" />

        <!-- 验证码输入框 -->

        <EditText

            android:id="@+id/num"

            android:layout_width="60dp"

            android:layout_height="wrap_content"

            android:layout_toRightOf="@id/num_tv" >

 

            <requestFocus />

        </EditText>

           <!-- 验证码图片 -->

        <TextView

            android:id="@+id/pic"

            android:layout_width="50dp"

            android:layout_height="wrap_content"

            android:layout_marginTop="5dp"

            android:layout_toRightOf="@id/num"

            android:background="@drawable/num" />

         <!-- “看不清” -->

      <TextView

            android:id="@+id/really"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginTop="20dp"

            android:layout_toRightOf="@id/pic"

            android:text="@string/really"

            android:textSize="15dp"

             android:textStyle="bold"/>

     <!-- “换一个” -->

    <TextView

            

        android:id="@+id/again"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="20dp"

         android:text="@string/again"

        android:textSize="15dp"

        android:textStyle="bold"

        android:layout_toRightOf="@id/really" />

         <!--协议复选框 -->

        <CheckBox

            android:layout_width="wrap_content"

             android:layout_height="wrap_content"

            android:text="@string/xieyi"

            android:layout_alignParentBottom="@id/num_tv"

            android:gravity="center"

            android:id="@+id/xieyi"

            android:layout_marginTop="45dp"/>

        

         <!--提交注册 -->

        <Button

            android:layout_width="80dp"

            android:layout_height="40dp"

            android:text="@string/sub"

            android:layout_alignParentBottom="@id/xieyi"

            android:gravity="center"

            android:layout_marginTop="110dp"

            android:textColor="#FFFFFF"

            android:background="#FFCC66"

            android:layout_marginLeft="120dp"

           />

    </RelativeLayout>

</TableLayout>

写布局文件时候，我们可以熟知命名空间是：Android，所以我们必须在每个属性添加前都写上Android。每行都写了一组<TextView>和<EditView>组件，前四行都用标准的表格布局显示。验证码这行用的是线性布局，在插入图片的时候遇到了问题，不过已经解决了，现在总结一下：

插入图片的方法有多种，其中一中是写一个<TextView>组件，然后写定长宽，写一个：Android:background=””这条属性就是定义图片的，或者说是背景图片，我们在双引号中可以加入ID，drawable等等，实现我们想要的效果；

或者是添加一个<imageView>组件，在属性中指定长宽和背景图片即可。

我在调整图片边距的时候遇到了一些问题，说白了还是对以前知识掌握的不够扎实，就是外边距和内边距的区别，事由是这样的：我创建了一个<Button>组件，想让按钮的左边距不为0dp，于是，我就设置了gravity这个属性的Center值，但结果是按钮的文字有了效果，但按钮本身没有变化，最终通过改变margin-left的值解决了这个问题。

还有就是，无论需要改变什么组件的背景图或者插入图片都可以使用通用的属性：Android:background=””，这个属性来实现，本例子中有对屏幕的背景颜色和按钮的背景色做出实例化改变。

最终的实现效果如下：