一、功能與要求
實現(xiàn)功能:設(shè)計與開發(fā)記單詞系統(tǒng)的四個界面,分別是用戶登錄、用戶注冊、單詞操作以及忘記密碼。
指標要求:通過用戶登錄、用戶注冊、單詞操作、忘記密碼掌握界面設(shè)計的基礎(chǔ),其中包括界面布局、常用控件、事件處理等相關(guān)內(nèi)容,通過所學內(nèi)容設(shè)計與開發(fā)的界面要求簡潔、美觀。
二、方案設(shè)計
(一)用戶登錄界面
該界面采用LinearLayout布局,界面中包含整體界面采用線性布局布局方式,界面中包含TextView、EditText、Button等控件,布局設(shè)計如下圖1所示:
圖1 用戶登錄界面設(shè)計
(二) 用戶注冊界面
該界面采用LinearLayout布局,界面中包含TextView、EditText、Button、RadioGroup、radioButton、toggleButton、checkBox、spinner等控件,布局設(shè)計如下圖2所示:
圖2 用戶注冊界面設(shè)計
(三)單詞操作界面
該界面采用…布局,界面中包含textview、TableRow、EditText、Button、TableRow、ListView、RatingBar等控件,布局設(shè)計如下圖3所示:
圖3 單詞操作界面設(shè)計
(四)忘記密碼界面
該界面采用…布局,界面中包含textview、EditText、Button等控件,布局設(shè)計如下圖4所示:
圖4 忘記密碼界面
三、項目實現(xiàn)步驟
步驟1:搭建開發(fā)環(huán)境。
1.創(chuàng)建項目ReadWord
步驟2:準備資源。
2.1 準備好項目所需要的圖片
2.2 將圖片資源放入到項目的mipmap文件下
步驟3:UI設(shè)計與開發(fā)。
3.1 使用相對布局等管理器來實現(xiàn)界面的布局
步驟4:編寫程序?qū)崿F(xiàn)業(yè)務(wù)邏輯。
4.1使用簡單的控件和相對布局來實現(xiàn)界面
四、項目實現(xiàn)
(一)用戶登錄界面
界面如下圖5所示:
圖5 用戶登錄界面
布局代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@mipmap/bg"
tools:context=".Activity.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="440dp"
android:layout_marginRight="50dp"
android:orientation="horizontal">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:text="用戶名稱:"
android:textSize="22sp" />
<EditText
android:id="@+id/edit_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="22sp"
android:hint="請輸入用戶名"
android:inputType="textPersonName" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:orientation="horizontal">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:text="用戶密碼:"
android:textSize="22sp" />
<EditText
android:id="@+id/edit_pwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxLines="1"
android:textSize="22sp"
android:inputType="textPassword"
android:hint="輸入六位密碼" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn_edpwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="10dp"
android:gravity="right"
android:background="#00FFFFFF"
android:text="忘記密碼?"
android:onClick="onClick"
android:textColor="#6B6868"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:orientation="horizontal">
<Button
android:id="@+id/btn_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="登錄"
android:onClick="onClick"
android:textSize="20sp" />
<Button
android:id="@+id/btn_register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="注冊"
android:onClick="onClick"
android:textSize="20sp" />
<Button
android:id="@+id/btn_select"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="查詢"
android:onClick="onClick"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
(二) 用戶注冊界面
界面如下圖6所示:
布局代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:background="@mipmap/bgs"
tools:context=".Activity.RegisterActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:textStyle="bold"
android:text="用戶信息" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:text="用戶名稱:" />
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="請輸入用戶名"
android:inputType="textPersonName" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:text="用戶密碼:" />
<EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="請輸入六位數(shù)字"
android:inputType="textPassword" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:text="用戶實名:" />
<EditText
android:id="@+id/editText3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="與身份證保持一致"
android:inputType="textPersonName" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20sp"
android:textStyle="bold"
android:text="性別:" />
<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RadioButton
android:id="@+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="男" />
<RadioButton
android:id="@+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="女" />
</RadioGroup>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20sp"
android:textStyle="bold"
android:text="婚否:" />
<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textOff="未婚"
android:textOn="已婚" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20sp"
android:textStyle="bold"
android:text="愛好:" />
<CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="閱讀" />
<CheckBox
android:id="@+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="游泳" />
<CheckBox
android:id="@+id/checkBox3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="跑步" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20sp"
android:textStyle="bold"
android:text="職務(wù):" />
<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="@array/arrays" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20sp"
android:textStyle="bold"
android:onClick="onClick"
android:text="取消" />
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20sp"
android:textStyle="bold"
android:onClick="onClick"
android:text="注冊" />
</LinearLayout>
</LinearLayout>
(三) 單詞操作界面
界面如下圖7所示:
布局代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@mipmap/bgs"
tools:context=".Activity.WordOperateActivity">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<TableRow
android:layout_width="match_parent"
android:layout_height="600dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/textView11"
android:layout_width="wrap_content"
android:layout_height="90dp"
android:layout_weight="1"
android:gravity="bottom"
android:text="單詞操作界面"
android:textSize="23sp"
android:textStyle="bold" />
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_marginTop="20dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="24sp"
android:gravity="center"
android:text="單詞:"
android:textStyle="bold" />
<EditText
android:id="@+id/edit_danci"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:hint="請輸入單詞"
android:gravity="left"
android:inputType="textPersonName" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="24sp"
android:layout_weight="1"
android:gravity="center"
android:text="解析:"
android:textStyle="bold" />
<EditText
android:id="@+id/edit_jiexi"
android:layout_width="wrap_content"
android:ems="10"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="left"
android:hint="請輸入解析"
android:inputType="textPersonName" />
</LinearLayout>
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="@+id/btn_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClick"
android:text="添加" />
<Button
android:id="@+id/btn_sel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClick"
android:text="查詢" />
<Button
android:id="@+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClick"
android:text="更新" />
<Button
android:id="@+id/btn_del"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="onClick"
android:text="刪除" />
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="@+id/btn_selAll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="查看全部詞匯" />
</LinearLayout>
</TableRow>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ListView
android:layout_width="match_parent"
android:layout_height="200dp"
android:id="@+id/list_view"
>
<!-- <TextView-->
<!-- android:id="@+id/textword1"-->
<!-- android:layout_width="wrap_content"-->
<!-- android:layout_height="wrap_content"-->
<!-- android:text="Hello"-->
<!-- />-->
<!-- <TextView-->
<!-- android:id="@+id/textjiexi1"-->
<!-- android:layout_width="wrap_content"-->
<!-- android:layout_height="wrap_content"-->
<!-- android:text="你好"-->
<!-- />-->
</ListView>
</LinearLayout>
<TableRow
android:layout_width="match_parent"
android:layout_height="257dp"
android:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/textView10"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<RatingBar
android:id="@+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="@+id/button12"
android:layout_width="160dp"
android:layout_height="wrap_content"
android:text="提交評論" />
</LinearLayout>
</TableRow>
</TableLayout>
</LinearLayout>
(四)忘記密碼界面
界面如下圖8所示:
布局代碼如下:文章來源:http://www.zghlxwxcb.cn/news/detail-520840.html
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:background="@mipmap/bgs"
tools:context=".Activity.EditPwdActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:textStyle="bold"
android:text="修改密碼" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:text="用戶名稱:" />
<EditText
android:id="@+id/et_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="請輸入用戶名"
android:inputType="textPersonName" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:text="新 密 碼 :" />
<EditText
android:id="@+id/et_pwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="請輸入六位數(shù)字"
android:inputType="textPassword" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:text="確認密碼:" />
<EditText
android:id="@+id/et_pwd2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="與新密碼相同"
android:inputType="textPersonName" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btn_update"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20sp"
android:textStyle="bold"
android:onClick="onClick"
android:text="確認修改" />
</LinearLayout>
</LinearLayout>
五、項目總結(jié)
通過該項目的設(shè)計,掌握Android項目設(shè)計開發(fā)流程,完成了一款記單詞軟件,UI布局界面使用了很多控件,使我掌握了TextView、EditText、Button、ratingBar、RadioGroup、radioButton、toggleButton、checkBox、spinner等控件的使用、后臺使用了AlertDialog實現(xiàn)了注冊按鈕彈出對話框。此次項目設(shè)計不僅僅使對我技術(shù)上的鍛煉有所提高,更多的是為我之后的學習奠定了良好的基礎(chǔ),但是依然有很多的不足之處需要我們繼續(xù)完善和改正。文章來源地址http://www.zghlxwxcb.cn/news/detail-520840.html
到了這里,關(guān)于Android開發(fā):使用AndroidStudio開發(fā)記單詞APP(帶數(shù)據(jù)庫)的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!