Android用户注册界面简单设计

本文实例为大家分享了android用户注册界面的设计，供大家参考，具体内容如下

i. 实例目标
设计一个用户注册界面，在其中要使用到一些基础控件，如 文本框、编辑框、按钮、复选框等控件

ii. 技术分析
首先在布局文件中使用控件的标记来配置所需要的各个控件，然后在 主activity中获取到该控件，给其添加监听器来监听其操作，最后在控制台输出所操作的内容。

iii. 实现步骤
在eclipse中创建 android项目，名称为 testuserregister 。设计一个用户注册界面，在其中要使用到 文本框、编辑框、按钮、单选按钮、复选框、列表选择框、列表视图、图片视图 等控件。

（1）在项目 res 目录下的 drawable_ldpi 文件夹中，放入两张名称分别为 logo5.jpg 和 background3.jpg 的图片，用于作为显示的 logo 图片和背景图片。

（2）在项目的res/values 目录中新建数组资源文件 arrays.xml ，在该文件中添加两个字符串数组，名称分别为 type 和 care，代码如下

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string-array name = "type">
    <item>学生</item>
    <item>老师</item>
    <item>白领</item>
    <item>工程师</item>
    <item>其他</item>
  </string-array>

  <string-array name = "care">
    <item>1.保护用户个人信息</item>
    <item>2.用户在本网站上不得发布违法信息</item>
    <item>3.保护个人账号和密码安全</item>
    <item>4.本网站所有权和解释权归本网站拥有</item>
  </string-array>

</resources>

（3）在项目的res/layout 目录下修改 activity _main.xml 文件，首先将界面整体布局改为表格布局，并设置背景，之后添加一个图像视图作为 logo 图像显示，代码如下：

<tablelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:background="@drawable/background3">

  <imageview 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/logo5"
    android:id="@+id/imageview02"
    android:layout_margin="5dp"
    android:adjustviewbounds="true"
    android:maxwidth="75dp"
    android:maxheight="60dp"/>
</tablelayout>

上述代码中，android:adjustviewbounds 属性用于设置 imageview 是否调整自己的边界来保持所需显示图片的长度变化，为 true 时表示调整自己的边界来保持所需显示图片的长度变化； android:maxwidth 和 android:maxheight 分别表示 imageview 的最大宽度和最大高度。

（4）添加三个 tablerow 表格行，并在其中添加 3 个 文本框(textview) 和 编辑框控件(edittext) ,用来显示和填写 用户名、密码 和 确认密码。具体代码如下：

<tablerow>

    <textview 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="用户名："
      android:layout_marginleft="5dp"/>

    <edittext 
      android:layout_width="250dp"
      android:layout_height="wrap_content"
      android:hint="请输入用户名"
      android:id="@+id/edittext01"
      android:singleline="true"
      android:inputtype="textpersonname"/>

  </tablerow>


  <tablerow>
    <textview 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="密码："
      android:layout_marginleft="5dp"/>

    <edittext 
      android:layout_width="250dp"
      android:layout_height="wrap_content"
      android:hint="请输入密码"
      android:id="@+id/edittext02"
      android:singleline="true"
      android:inputtype="textpassword"/>
  </tablerow>

  <tablerow>
    <textview 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="确认密码："
      android:layout_marginleft="5dp"/>

    <edittext 
      android:layout_width="250dp"
      android:layout_height="wrap_content"
      android:hint="请输入密码"
      android:id="@+id/edittext03"
      android:singleline="true"
      android:inputtype="textpassword"/>
  </tablerow>

在上述代码中，edittext 控件中的 android:singleline = “true” 表示单行输入文本， android:inputtype=”textpersonname” 表示输入类型为用户名。 android:inputtype=”textpassword” 表示输入的内容为密码，将用 “ . ” 代替输入的内容，避免密码泄露。

（5）添加一个线性布局，在其中添加一个文本框控件(textview)和一个单选按钮组(radiogroup) , 其中在单选按钮组中添加两个单选按钮控件，其中线性布局的 android:orientation 属性设置为 “horizontal”，具体代码如下

<linearlayout 
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:layout_margintop="10dp">

    <textview
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginleft="5dp"
      android:layout_gravity="center_vertical"
      android:text="请选择您的性别" />

    <radiogroup

       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:id="@+id/sex">

      <radiobutton 
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="男"
         android:id="@+id/radiobutton1"/>

      <radiobutton 
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="女"
         android:id="@+id/radiobutton2"/>
    </radiogroup>

  </linearlayout>

（6）添加一个线性布局，在其中添加一个文本框(textview) 和 一个列表选择框控件(spinner)，线性布局的 android:orientation 属性设置为 “horizontal” ，其中列表选择框的 android:entries 属性为 “@array/type”，代码如下

<linearlayout 
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     android:layout_margintop="10dp">

    <textview 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="请选择您的身份"
      android:layout_marginleft="5dp"/>

    <spinner 
      android:entries="@array/type"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/spinner"/>

  </linearlayout>

（7）添加一个文本框控件(textview) 、列表视图控件(listview) 、 复选框控件(checkbox) 和 一个普通按钮控件(button) ,代码如下

<textview 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="服务条款"
      android:textsize="27sp"
      android:gravity="center_horizontal"/>

  <listview 
      android:id="@+id/listview"
      android:entries="@array/care"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>

  <checkbox 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/checkbox"
      android:text="我同意上述条款"/>

  <button 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/reg"
      android:text="注册"
      android:gravity="center_horizontal"
      android:visibility="invisible"/>

上述代码中，textview控件的 android:gravity=”center_horizontal” 表示文本框控件在屏幕中水平放置；普通按钮中的 android:visibility 属性表示该控件是否可见，在这里设置的是不可见。

（8）activity_main.xml文件完整代码

<tablelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:background="@drawable/background3">

  <imageview 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/logo5"
    android:id="@+id/imageview02"
    android:layout_margin="5dp"
    android:adjustviewbounds="true"
    android:maxwidth="75dp"
    android:maxheight="60dp"/>

  <tablerow>

    <textview 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="用户名："
      android:layout_marginleft="5dp"/>

    <edittext 
      android:layout_width="250dp"
      android:layout_height="wrap_content"
      android:hint="请输入用户名"
      android:id="@+id/edittext01"
      android:singleline="true"
      android:inputtype="textpersonname"/>

  </tablerow>


  <tablerow>
    <textview 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="密码："
      android:layout_marginleft="5dp"/>

    <edittext 
      android:layout_width="250dp"
      android:layout_height="wrap_content"
      android:hint="请输入密码"
      android:id="@+id/edittext02"
      android:singleline="true"
      android:inputtype="textpassword"/>
  </tablerow>

  <tablerow>
    <textview 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="确认密码："
      android:layout_marginleft="5dp"/>

    <edittext 
      android:layout_width="250dp"
      android:layout_height="wrap_content"
      android:hint="请输入密码"
      android:id="@+id/edittext03"
      android:singleline="true"
      android:inputtype="textpassword"/>
  </tablerow>


  <linearlayout 
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:layout_margintop="10dp">

    <textview
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginleft="5dp"
      android:layout_gravity="center_vertical"
      android:text="请选择您的性别" />

    <radiogroup

       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:id="@+id/sex">

      <radiobutton 
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="男"
         android:id="@+id/radiobutton1"/>

      <radiobutton 
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="女"
         android:id="@+id/radiobutton2"/>
    </radiogroup>

  </linearlayout>


  <linearlayout 
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:orientation="horizontal"
     android:layout_margintop="10dp">

    <textview 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="请选择您的身份"
      android:layout_marginleft="5dp"/>

    <spinner 
      android:entries="@array/type"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/spinner"/>

  </linearlayout>

  <textview 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="服务条款"
      android:textsize="27sp"
      android:gravity="center_horizontal"/>

  <listview 
      android:id="@+id/listview"
      android:entries="@array/care"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"/>

  <checkbox 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/checkbox"
      android:text="我同意上述条款"/>

  <button 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/reg"
      android:text="注册"
      android:gravity="center_horizontal"
      android:visibility="invisible"/>


</tablelayout>

（9）在mainactivity.java 文件中，获取到复选框控件、普通按钮控件、单选按钮组控件和列表选择框控件，并为它们添加监听器，代码如下

import android.os.bundle;
import android.util.log;
import android.view.view;
import android.view.view.onclicklistener;
import android.widget.adapterview;
import android.widget.adapterview.onitemselectedlistener;
import android.widget.arrayadapter;
import android.widget.button;
import android.widget.checkbox;
import android.widget.compoundbutton;
import android.widget.compoundbutton.oncheckedchangelistener;
import android.widget.edittext;
import android.widget.listview;
import android.widget.radiobutton;
import android.widget.radiogroup;
import android.widget.spinner;
import android.app.activity;


public class mainactivity extends activity {


  private button reg = null;
  private int location = -1;
  private spinner spinner = null;
  private checkbox checkbox = null;
  private edittext edittext01 = null ;
  private edittext edittext02 = null;
  private edittext edittext03 = null;
  private radiobutton radio =null ;
  private listview listview = null;
  private radiogroup sex;

  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);

    //找到关心的控件
    reg = (button) findviewbyid(r.id.reg);
    spinner = (spinner) findviewbyid(r.id.spinner);
    checkbox = (checkbox) findviewbyid(r.id.checkbox);
    edittext01 = (edittext) findviewbyid(r.id.edittext01);
    edittext02 = (edittext) findviewbyid(r.id.edittext02);
    edittext03  = (edittext) findviewbyid(r.id.edittext03);

    listview = (listview) findviewbyid(r.id.listview);
    sex = (radiogroup) findviewbyid(r.id.sex);


    arrayadapter<charsequence> adapter = arrayadapter.createfromresource(this, r.array.care, android.r.layout.simple_spinner_item);
    listview.setadapter(adapter);//适配器与列表视图关联
    //为复选框控件添加监听器
    checkbox.setoncheckedchangelistener(new checkboxoncheckedchangelistener ());

    sex.setoncheckedchangelistener(new radiogroup.oncheckedchangelistener() {



      public void oncheckedchanged(radiogroup group, int checkedid) {

          radio = (radiobutton) findviewbyid(checkedid);

      }
    });


    spinner.setonitemselectedlistener(new spinneronitemselectedlistener());

    reg.setonclicklistener(new regonclicklistener());

  }


  class regonclicklistener implements onclicklistener{


    public void onclick(view v) {

      log.i("您输入的用户名为：", edittext01.gettext().tostring());
      log.i("您输入的密码为：", edittext02.gettext().tostring());
      log.i("您输入的确认密码为：", edittext03.gettext().tostring());

      if (radio != null) {
        log.i("您选择的性别为：", radio.gettext().tostring());
      }else {
        log.i("您选择的性别为：", "无");
      }

      log.i("您选择的身份为：", spinner.getitematposition(location).tostring());

    }

  }

  class spinneronitemselectedlistener implements onitemselectedlistener{


    public void onitemselected(adapterview<?> parent, view view,
        int position, long id) {

      //获取下拉列表框控件选中的位置
      location = position;      

    }

    public void onnothingselected(adapterview<?> parent) {
    }

  }


  //复选框控件监听器
  class checkboxoncheckedchangelistener implements oncheckedchangelistener{


    public void oncheckedchanged(compoundbutton buttonview,
        boolean ischecked) {

      if (ischecked) {
        reg.setvisibility(view.visible);
      }else {
        reg.setvisibility(view.invisible);
      }

    }

  }

}

在上述代码中，通过下拉列表框控件的监听器来获取所选内容的位置，然后赋值给 location 变量；在复选框控件的监听器中，如果该复选框被选中，则注册按钮显示可见，否则不可见。

iv. 运行

未填写信息前

填写信息并点击注册后  

控制台输出信息

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。