Android使用者註冊介面簡單設計_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. 運行

未填寫資訊前

填寫資訊並點擊註冊後  

控制台輸出資訊

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。