Android用戶注冊(cè)界面簡單設(shè)計(jì)
本文實(shí)例為大家分享了Android用戶注冊(cè)界面的設(shè)計(jì),供大家參考,具體內(nèi)容如下
I. 實(shí)例目標(biāo)
設(shè)計(jì)一個(gè)用戶注冊(cè)界面,在其中要使用到一些基礎(chǔ)控件,如 文本框、編輯框、按鈕、復(fù)選框等控件
II. 技術(shù)分析
首先在布局文件中使用控件的標(biāo)記來配置所需要的各個(gè)控件,然后在 主Activity中獲取到該控件,給其添加監(jiān)聽器來監(jiān)聽其操作,最后在控制臺(tái)輸出所操作的內(nèi)容。
III. 實(shí)現(xiàn)步驟
在Eclipse中創(chuàng)建 Android項(xiàng)目,名稱為 TestUserRegister 。設(shè)計(jì)一個(gè)用戶注冊(cè)界面,在其中要使用到 文本框、編輯框、按鈕、單選按鈕、復(fù)選框、列表選擇框、列表視圖、圖片視圖 等控件。
(1)在項(xiàng)目 res 目錄下的 drawable_ldpi 文件夾中,放入兩張名稱分別為 logo5.jpg 和 background3.jpg 的圖片,用于作為顯示的 logo 圖片和背景圖片。
(2)在項(xiàng)目的res/values 目錄中新建數(shù)組資源文件 arrays.xml ,在該文件中添加兩個(gè)字符串?dāng)?shù)組,名稱分別為 type 和 care,代碼如下
<?xml version="1.0" encoding="utf-8"?> <resources> <string-array name = "type"> <item>學(xué)生</item> <item>老師</item> <item>白領(lǐng)</item> <item>工程師</item> <item>其他</item> </string-array> <string-array name = "care"> <item>1.保護(hù)用戶個(gè)人信息</item> <item>2.用戶在本網(wǎng)站上不得發(fā)布違法信息</item> <item>3.保護(hù)個(gè)人賬號(hào)和密碼安全</item> <item>4.本網(wǎng)站所有權(quán)和解釋權(quán)歸本網(wǎng)站擁有</item> </string-array> </resources>
(3)在項(xiàng)目的res/layout 目錄下修改 activity _main.xml 文件,首先將界面整體布局改為表格布局,并設(shè)置背景,之后添加一個(gè)圖像視圖作為 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 屬性用于設(shè)置 ImageView 是否調(diào)整自己的邊界來保持所需顯示圖片的長度變化,為 true 時(shí)表示調(diào)整自己的邊界來保持所需顯示圖片的長度變化; android:maxWidth 和 android:maxHeight 分別表示 ImageView 的最大寬度和最大高度。
(4)添加三個(gè) TableRow 表格行,并在其中添加 3 個(gè) 文本框(TextView) 和 編輯框控件(EditText) ,用來顯示和填寫 用戶名、密碼 和 確認(rèn)密碼。具體代碼如下:
<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="請(qǐng)輸入用戶名" 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="請(qǐng)輸入密碼" 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="確認(rèn)密碼:" android:layout_marginLeft="5dp"/> <EditText android:layout_width="250dp" android:layout_height="wrap_content" android:hint="請(qǐng)輸入密碼" 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)添加一個(gè)線性布局,在其中添加一個(gè)文本框控件(TextView)和一個(gè)單選按鈕組(RadioGroup) , 其中在單選按鈕組中添加兩個(gè)單選按鈕控件,其中線性布局的 android:orientation 屬性設(shè)置為 “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="請(qǐng)選擇您的性別" />
<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)添加一個(gè)線性布局,在其中添加一個(gè)文本框(TextView) 和 一個(gè)列表選擇框控件(Spinner),線性布局的 android:orientation 屬性設(shè)置為 “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="請(qǐng)選擇您的身份" 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)添加一個(gè)文本框控件(TextView) 、列表視圖控件(ListView) 、 復(fù)選框控件(CheckBox) 和 一個(gè)普通按鈕控件(Button) ,代碼如下
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="服務(wù)條款" 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="注冊(cè)" android:gravity="center_horizontal" android:visibility="invisible"/>
上述代碼中,TextView控件的 android:gravity=”center_horizontal” 表示文本框控件在屏幕中水平放置;普通按鈕中的 android:visibility 屬性表示該控件是否可見,在這里設(shè)置的是不可見。
(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="請(qǐng)輸入用戶名"
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="請(qǐng)輸入密碼"
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="確認(rèn)密碼:"
android:layout_marginLeft="5dp"/>
<EditText
android:layout_width="250dp"
android:layout_height="wrap_content"
android:hint="請(qǐng)輸入密碼"
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="請(qǐng)選擇您的性別" />
<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="請(qǐng)選擇您的身份"
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="服務(wù)條款"
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="注冊(cè)"
android:gravity="center_horizontal"
android:visibility="invisible"/>
</TableLayout>
(9)在MainActivity.java 文件中,獲取到復(fù)選框控件、普通按鈕控件、單選按鈕組控件和列表選擇框控件,并為它們添加監(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);
//找到關(guān)心的控件
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);//適配器與列表視圖關(guān)聯(lián)
//為復(fù)選框控件添加監(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("您輸入的確認(rèn)密碼為:", 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) {
}
}
//復(fù)選框控件監(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 變量;在復(fù)選框控件的監(jiān)聽器中,如果該復(fù)選框被選中,則注冊(cè)按鈕顯示可見,否則不可見。
IV. 運(yùn)行
未填寫信息前

填寫信息并點(diǎn)擊注冊(cè)后

控制臺(tái)輸出信息

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- android實(shí)現(xiàn)注冊(cè)登錄程序
- Android實(shí)現(xiàn)登錄注冊(cè)頁面(下)
- Android實(shí)現(xiàn)登錄注冊(cè)功能
- Android基于Sqlite實(shí)現(xiàn)注冊(cè)和登錄功能
- Android實(shí)現(xiàn)注冊(cè)登錄界面的實(shí)例代碼
- Android設(shè)計(jì)登錄界面、找回密碼、注冊(cè)功能
- Android客戶端實(shí)現(xiàn)注冊(cè)、登錄詳解(1)
- Android開發(fā)中實(shí)現(xiàn)用戶注冊(cè)和登陸的代碼實(shí)例分享
- Android如何通過手機(jī)獲取驗(yàn)證碼來完成注冊(cè)功能
- Android用SharedPreferences實(shí)現(xiàn)登錄注冊(cè)注銷功能
相關(guān)文章
Android通過手機(jī)拍照或從本地相冊(cè)選取圖片設(shè)置頭像
微信、QQ、微博等社交類APP如何更換自己的頭像,這篇文章主要介紹了Android通過手機(jī)拍照或從本地相冊(cè)選取圖片設(shè)置頭像,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
Android基于虹軟(ArcSoft)實(shí)現(xiàn)人臉識(shí)別
人工智能時(shí)代快速來臨,其中人臉識(shí)別是當(dāng)前比較熱門的技術(shù),在國內(nèi)也越來越多的運(yùn)用,例如刷臉打卡,刷臉APP,身份識(shí)別,人臉門禁等。本文將為大家介紹Android基于虹軟(ArcSoft)實(shí)現(xiàn)人臉識(shí)別的demo,快來跟隨小編一起學(xué)習(xí)吧2021-12-12
android小動(dòng)畫:不斷擴(kuò)散的圓點(diǎn)
這篇文章介紹了如何實(shí)現(xiàn)android小動(dòng)畫:不斷擴(kuò)散的圓點(diǎn),文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,下面的實(shí)例代碼,大家可以看看2021-11-11
Android的權(quán)限設(shè)置及自啟動(dòng)設(shè)置方法
今天小編就為大家分享一篇Android的權(quán)限設(shè)置及自啟動(dòng)設(shè)置方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-07-07
基于Android實(shí)現(xiàn)個(gè)性彩色好看的二維碼
二維碼在我們?nèi)粘I钪袩o處不在,今天小編通過本教程給大家介紹基于Android實(shí)現(xiàn)個(gè)性彩色好看的二維碼,需要的朋友參考下吧2016-02-02
Android賬號(hào)注冊(cè)實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了Android賬號(hào)注冊(cè)過程中實(shí)現(xiàn)點(diǎn)擊獲取驗(yàn)證碼倒計(jì)時(shí)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05
Android自定義View軟鍵盤實(shí)現(xiàn)搜索
本文給大家分享android自定義view軟鍵盤實(shí)現(xiàn)搜索,對(duì)android軟鍵盤相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12

