Android用戶注冊界面簡單設計

更新時間：2022年04月24日 10:06:31 作者：Z-x-H

這篇文章主要為大家分享了Android用戶注冊界面簡單設計，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android用戶注冊界面的設計，供大家參考，具體內(nèi)容如下

I. 實例目標

設計一個用戶注冊界面，在其中要使用到一些基礎控件，如文本框、編輯框、按鈕、復選框等控件

II. 技術分析

首先在布局文件中使用控件的標記來配置所需要的各個控件，然后在主Activity中獲取到該控件，給其添加監(jiān)聽器來監(jiān)聽其操作，最后在控制臺輸出所操作的內(nèi)容。

III. 實現(xiàn)步驟

在Eclipse中創(chuàng)建 Android項目，名稱為 TestUserRegister 。設計一個用戶注冊界面，在其中要使用到文本框、編輯框、按鈕、單選按鈕、復選框、列表選擇框、列表視圖、圖片視圖等控件。

（1）在項目 res 目錄下的 drawable_ldpi 文件夾中，放入兩張名稱分別為 logo5.jpg 和 background3.jpg 的圖片，用于作為顯示的 logo 圖片和背景圖片。

（2）在項目的res/values 目錄中新建數(shù)組資源文件 arrays.xml ，在該文件中添加兩個字符串數(shù)組，名稱分別為 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.用戶在本網(wǎng)站上不得發(fā)布違法信息</item>
  <item>3.保護個人賬號和密碼安全</item>
  <item>4.本網(wǎng)站所有權和解釋權歸本網(wǎng)站擁有</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 是否調(diào)整自己的邊界來保持所需顯示圖片的長度變化，為 true 時表示調(diào)整自己的邊界來保持所需顯示圖片的長度變化； 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” 表示輸入的內(nèi)容為密碼，將用 “ . ” 代替輸入的內(nèi)容，避免密碼泄露。

（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 文件中，獲取到復選框控件、普通按鈕控件、單選按鈕組控件和列表選擇框控件，并為它們添加監(jiān)聽器，代碼如下

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);//適配器與列表視圖關聯(lián)
  //為復選框控件添加監(jiān)聽器
  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) {
  }

 }


 //復選框控件監(jiān)聽器
 class checkBoxOnCheckedChangeListener implements OnCheckedChangeListener{


  public void onCheckedChanged(CompoundButton buttonView,
    boolean isChecked) {

   if (isChecked) {
    reg.setVisibility(View.VISIBLE);
   }else {
    reg.setVisibility(View.INVISIBLE);
   }

  }

 }

}

在上述代碼中，通過下拉列表框控件的監(jiān)聽器來獲取所選內(nèi)容的位置，然后賦值給 location 變量；在復選框控件的監(jiān)聽器中，如果該復選框被選中，則注冊按鈕顯示可見，否則不可見。

IV. 運行

未填寫信息前

填寫信息并點擊注冊后

控制臺輸出信息

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Android實現(xiàn)一周時間早中晚排班表
項目需求需要實現(xiàn)一個動態(tài)添加，修改一周早中晚時間排班表，文章給大家提供了實現(xiàn)代碼，需要的朋友參考下吧
2018-07-07
Android 消息隊列模型詳解及實例
這篇文章主要介紹了 Android 消息隊列模型詳解及實例的相關資料,需要的朋友可以參考下
2017-04-04
聊聊GridView實現(xiàn)拖拽排序及數(shù)據(jù)交互的問題
這篇文章主要介紹了聊聊GridView實現(xiàn)拖拽排序及數(shù)據(jù)交互的問題,整體實現(xiàn)思路是通過在一個容器里放置兩個dragview，DragView里面進行View的動態(tài)交換以及數(shù)據(jù)交換，具體實現(xiàn)代碼跟隨小編一起看看吧
2021-11-11
Kotlin圖文并茂講解續(xù)體與續(xù)體攔截器和調(diào)度器
這篇文章主要介紹了Kotlin開發(fā)中續(xù)體與續(xù)體攔截器和調(diào)度器的相關使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
android BottomSheetDialog新控件解析實現(xiàn)知乎評論列表效果(實例代碼)
BottomSheetDialog是一個自定義的從底部滑入的對話框，這篇文章主要介紹了android BottomSheetDialog新控件解析實現(xiàn)知乎評論列表效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-04-04
Android簡單創(chuàng)建一個Activity的方法
這篇文章主要介紹了Android簡單創(chuàng)建一個Activity的方法,結(jié)合圖文形式分析了Android創(chuàng)建Activity的具體步驟與實現(xiàn)技巧,需要的朋友可以參考下
2016-04-04
Android：“萬能”Activity重構(gòu)篇
本文主要介紹了mvp以及每一層，以及使用mvp來重構(gòu)“萬能”Activity，其實每一層需要注意的東西還有很多，比如model層是最難寫的一層。具有很好的參考價值，下面跟著小編一起來看下吧
2017-01-01
Android 動態(tài)改變布局實例詳解
這篇文章主要介紹了Android 動態(tài)改變布局實例詳解的相關資料,這里舉例說明如何實現(xiàn)動態(tài)改變布局的例子，幫助大家學習理解，需要的朋友可以參考下
2016-11-11
Android使用OkHttp進行重定向攔截處理的方法
這篇文章主要介紹了Android使用OkHttp進行重定向攔截處理的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
Android中制作進度框和環(huán)形進度條的簡單實例分享
這篇文章主要介紹了Android中制作進度框和環(huán)形進度條的簡單實例分享,環(huán)形進度條帶有基本的百分比顯示,需要的朋友可以參考下
2016-03-03