移動(dòng)終端應(yīng)用開發(fā)ANDROID校園易App用戶登錄功能實(shí)現(xiàn)

目錄Contents設(shè)計(jì)用戶登陸頁面學(xué)習(xí)Android常用組件實(shí)現(xiàn)校園易APP登陸功能教學(xué)目標(biāo)知識(shí)目標(biāo)熟悉AndroidStudio常用布局。掌握AndroidStudio約束布局。掌握Android的TextView、EditText、Button、ImageView等組件的屬性和操作方法。技能目標(biāo)能夠設(shè)計(jì)Android應(yīng)用程序界面。能夠?qū)崿F(xiàn)Android應(yīng)用程序用戶登錄功能。素質(zhì)目標(biāo)培養(yǎng)自主學(xué)習(xí)和終身學(xué)習(xí)的能力。培養(yǎng)批判性

思維。培養(yǎng)工程化思維與問題解決能力設(shè)計(jì)用戶登陸頁面01PARTAndroid常用布局Android提供了五種常用布局，分別為相對(duì)布局、線性布局、幀布局、表格布局和網(wǎng)格布局。1．相對(duì)布局相對(duì)布局是一種以父容器和兄弟組件為參照來確定組件位置的布局方式。例如，在圖所示的相對(duì)布局中，首先放置組件A；然后放置組件B，讓其位于組件A的下方；最后放置組件C，讓其位于組件A的下方，并位于組件B的右側(cè)。相對(duì)布局Android常用布局2．線性布局線性布局是將放入其中的組件按照垂直或水平方向來布局，即控制放入其中的組件橫向排列或縱向排列。其中，縱向排列的布局稱為垂直線性布局；橫向排列的布局稱為水平線性布局，垂直線性布局水平線性布局Android常用布局3．幀布局在幀布局中，每加入一個(gè)組件，都將創(chuàng)建一個(gè)空白的區(qū)域，該空白的區(qū)域通常稱為一幀，這些幀都會(huì)被放置在屏幕的左上角，即幀布局是從屏幕的左上角(0,0)坐標(biāo)點(diǎn)開始布局的。幀布局Android常用布局4．表格布局表格布局與常見的表格類似，其以行、列的形式來管理放入其中的組件。表格布局使用＜TableLayout＞標(biāo)簽（表格布局管理器）定義。在表格布局管理器中可以添加多個(gè)＜TableRow

＞標(biāo)簽，每個(gè)＜TableRow＞標(biāo)簽占用一行；由于<TableRow＞標(biāo)簽也是容器，因此在該標(biāo)簽中還可添加其他組件。表格布局Android常用布局5．網(wǎng)格布局網(wǎng)格布局是在Android4.0中提出的，其使用<GridLayout>標(biāo)簽定義。在網(wǎng)格布局中，屏幕被虛擬的細(xì)線劃分為行、列和單元格，每個(gè)單元格中放置一個(gè)組件，且該組件可以跨行或跨列擺放。網(wǎng)格布局Android約束布局約束布局具有相對(duì)布局的能力，是一種以父容器和兄弟組件為參照來確定組件位置的布局方式，可以將一個(gè)組件相對(duì)于另一個(gè)組件的位置來放置。當(dāng)布局嵌套過多時(shí)會(huì)出現(xiàn)一些性能問題，之前可以通過相對(duì)布局或者網(wǎng)格布局來減少這種布局嵌套的問題，現(xiàn)在可以改用約束布局來減少布局的層級(jí)結(jié)構(gòu)，還可以按照比例約束控制位置和尺寸，從而更好地適配屏幕大小不同的機(jī)型。約束布局相對(duì)父容器定位1．相對(duì)定位約束布局相對(duì)兄弟組件定位Android約束布局XML屬性描述app:layout_constraintTop_toTopOf將所需視圖的頂部與另一個(gè)視圖的頂部對(duì)齊app:layout_constraintTop_toBottomOf將所需視圖的頂部與另一個(gè)視圖的底部對(duì)齊app:layout_constraintBottom_toTopOf將所需視圖的底部與另一個(gè)視圖的頂部對(duì)齊app:layout_constraintBottom_toBottomOf將所需視圖的底部與另一個(gè)視圖的底部對(duì)齊app:layout_constraintLeft_toLeftOf將所需視圖的左邊與另一個(gè)視圖的左邊對(duì)齊app:layout_constraintLeft_toRightOf將所需視圖的左邊與另一個(gè)視圖的右邊對(duì)齊app:layout_constraintRight_toLeftOf將所需視圖的右邊與另一個(gè)視圖的左邊對(duì)齊app:layout_constraintRight_toRightOf將所需視圖的右邊與另一個(gè)視圖的右邊對(duì)齊app:layout_constraintBaseline_toBaselineOf當(dāng)兩個(gè)視圖的高度不一致，但是希望它們文本對(duì)齊時(shí)，可以使用該屬性相對(duì)定位的常用XML屬性Android約束布局約束布局的邊距的常用XML屬性XML屬性描述android:layout_marginStart設(shè)置開始位置的距離android:layout_marginEnd設(shè)置結(jié)束位置的距離android:layout_marginLeft設(shè)置左外邊距android:layout_marginTop設(shè)置頂外邊距android:layout_marginRight設(shè)置右外邊距android:layout_marginBottom設(shè)置底外邊距學(xué)習(xí)Android常用組件02PART學(xué)習(xí)TextView組件在Android中，TextView是文本顯示組件，用于在屏幕上顯示文本信息，起提示和說明的作用。TextView組件可以顯示單行文本，也可以顯示多行文本，還可以顯示帶圖像的文本。在XML布局文件中添加文本框的基本語法格式如下。<TextView

屬性列表

/>學(xué)習(xí)TextView組件XML屬性描述android:autoLink指定是否將指定格式的文本轉(zhuǎn)換為可單擊的超鏈接，其屬性值有none、web、email、phone、map和allandroid:drawableBottom在文本框內(nèi)文本的底端繪制指定圖像，該圖像可以是放在res/drawable目錄下的圖片，通過“@drawable/文件名（不包括文件的擴(kuò)展名）”設(shè)置android:drawableLeft在文本框內(nèi)文本的左側(cè)繪制指定圖像，該圖像可以是放在res/drawable目錄下的圖片，通過“@drawable/文件名（不包括文件的擴(kuò)展名）”設(shè)置android:drawableRight在文本框內(nèi)文本的右側(cè)繪制指定圖像，該圖像可以是放在res/drawable目錄下的圖片，通過“@drawable/文件名（不包括文件的擴(kuò)展名）”設(shè)置android:drawableTop在文本框內(nèi)文本的頂端繪制指定圖像，該圖像可以是放在res/drawable目錄下的圖片，通過“@drawable/文件名（不包括文件的擴(kuò)展名）”設(shè)置android:gravity設(shè)置文本框內(nèi)文本的對(duì)齊方式，其屬性值有top、bottom、left、right、center_vertical、fill_vertical、center_horizontal、fill_horizontal、center、fill、clip_vertical和clip_horizontal等。這些屬性值可以同時(shí)指定，各屬性值之間用“|”隔開。例如，要指定組件靠右下角對(duì)齊，可以使用屬性值right|bottomandroid:hint設(shè)置當(dāng)文本框中文本內(nèi)容為空時(shí)，默認(rèn)顯示的提示文本android:inputType指定當(dāng)前文本框顯示內(nèi)容的文本類型，其屬性值有textPassword、textEmailAddress、phone和date等。這些屬性值可以同時(shí)指定，使用“|”隔開android:singleLine指定該文本框是否為單行模式，其屬性值為true或false。該屬性值為true時(shí)表示該文本框不會(huì)換行，當(dāng)文本框中的文本超過一行時(shí)，其超出的部分將被省略，同時(shí)在結(jié)尾處添加“…”android:text指定該文本框中顯示的文本內(nèi)容，可以直接在該屬性值中指定，也可以通過在strings.xml文件中定義文本常量的方式指定android:textColor設(shè)置文本框內(nèi)文本的顏色，其屬性值可以是#rgb、#argb、#rrggbb或#aarrggbb格式指定的顏色值android:textSize設(shè)置文本框內(nèi)文本的字體大小，其屬性值由代表大小的數(shù)值加上單位組成，單位可以是dp、px、pt、sp和in等TextView支持的常用XML屬性學(xué)習(xí)TextView組件【案例2-1】更改TextView組件的顯示文本信息為“姓名+學(xué)號(hào)”。（1）方法一：在約束布局中添加TextView組件，布局代碼如下。（2）方法二：在布局頁面中添加TextView組件后，打開資源目錄res/values下的strings.xml文件（此文件為Android中XML文件的變量定義文件），在其中添加一個(gè)名稱為txStr的字符串變量，變量值為“22517101劉楊”。（3）方法三：在布局頁面中添加TextView組件后，通過更改Java代碼來更改TextView的顯示文本。

運(yùn)行結(jié)果學(xué)習(xí)EidtText組件Android中提供了TextView和EditText這兩個(gè)文本類組件，分別用于在屏幕上顯示和輸入文本信息。其中，EditText是TextView類的子類，TextView用來顯示文本信息。EditText可以用來輸入單行文本和多行文本，還可以用來輸入指定格式的文本（密碼、E-mail、電話號(hào)碼等）。在XML布局中添加編輯框的基本語法格式如下。<EditTextandroid:id="@+id/editText"android:layout_width="wrap_content"android:layout_height="wrap_content"android:inputType="text"android:text="EditText"/>學(xué)習(xí)Button組件Button和ImageButton是Android提供的兩種按鈕組件，其中Button是普通的按鈕組件，ImageButton是圖片按鈕組件。它們都可以在界面上產(chǎn)生一個(gè)按鈕以響應(yīng)用戶的點(diǎn)擊操作，觸發(fā)一個(gè)onClick事件。<Buttonandroid:id="@+id/button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"/>要想知道用戶點(diǎn)擊按鈕的動(dòng)作，需要在Java代碼中進(jìn)行操作。利用id屬性找到添加的按鈕組件。Buttonbtn=findViewById(R.id.button);為按鈕組件添加點(diǎn)擊事件監(jiān)聽器OnClickListener()，時(shí)刻監(jiān)控用戶的操作。一旦有點(diǎn)擊操作，Android就會(huì)自動(dòng)捕捉并調(diào)用監(jiān)聽器的onClick()方法，實(shí)現(xiàn)對(duì)用戶點(diǎn)擊操作的處理。btn.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewview){//用戶點(diǎn)擊按鈕后的操作}});學(xué)習(xí)Button組件【案例2-2】川劇變臉小游戲。在AndroidStudio中創(chuàng)建一個(gè)ChangeFace工程，添加一個(gè)按鈕使其顯示川劇臉譜，每當(dāng)用戶點(diǎn)擊后切換到下一張臉譜。川劇變臉小游戲效果學(xué)習(xí)ImageView組件ImageView組件表示圖片視圖，用于在屏幕中顯示圖片對(duì)象。在使用時(shí)，需要將圖片放置在res/drawable目錄下，并應(yīng)用<ImageView>標(biāo)簽將其顯示在布局管理器中。其基本語法格式如下。<ImageView

屬性列表></ImageView>XML屬性描述android:adjustViewBounds設(shè)置ImageView是否調(diào)整自己的邊界來保持所顯示圖片的長(zhǎng)寬比android:maxHeight設(shè)置ImageView的最大高度，需要設(shè)置android:adjustViewBounds屬性值為true，否則該屬性不起作用android:maxWidth設(shè)置ImageView的最大寬度，需要設(shè)置android:adjustViewBounds屬性值為true，否則該屬性不起作用ImageView支持的常用XML屬性android:scaleType設(shè)置所顯示的圖片如何縮放或移動(dòng)以適應(yīng)ImageView的大小，其屬性值可以是matrix（使用matrix方式進(jìn)行縮放）、fitXY（對(duì)圖片橫向、縱向獨(dú)立縮放，使得該圖片完全適應(yīng)于該ImageView，圖片的縱橫比可能會(huì)改變）、fitStart（保持縱橫比縮放圖片，直至該圖片能完全顯示在ImageView中，縮放完成后該圖片放在ImageView的左上角）、fitCenter（保持縱橫比縮放圖片，直至該圖片能完全顯示在ImageView中，縮放完成后該圖片放在ImageView的中央）、fitEnd（保持縱橫比縮放圖片，直至該圖片能完全顯示在ImageView中，縮放完成后該圖片放在ImageView的右下角）、center（把圖像放在