《Android系統(tǒng)設(shè)計(jì)與開發(fā)》課件-第5章

第5章Android應(yīng)用界面5.1Android應(yīng)用界面開發(fā)概述5.2常用界面控件5.3常用布局5.4碎片5.5動(dòng)態(tài)加載布局的技巧本章總結(jié)

5.1Android應(yīng)用界面開發(fā)概述

5.1.1視圖組件與容器組件View類是Android中最基本的一個(gè)UI類，基本上所有的高級(jí)UI組件都是繼承View類實(shí)現(xiàn)的。Android應(yīng)用中絕大部分UI組件都放在android.widget包及其子包、android.view包及其子包中，Android應(yīng)用的所有UI組件都繼承了View類。View類是Android系統(tǒng)平臺(tái)上用戶界面表示的基本單元，View的一些子類被統(tǒng)稱為Widgets(工具)，提供了文本輸入框和按鈕等UI對(duì)象的完整實(shí)現(xiàn)。

View類有一個(gè)非常重要的子類ViewGroup，它是View的一個(gè)擴(kuò)展，可以容納多個(gè)View，通過ViewGroup類可以創(chuàng)建有聯(lián)系的子View組成的復(fù)合控件。圖5.1表示Android圖形用戶界面的組件層次。

圖5.1Android圖形用戶界面的組件層次

5.1.2Android控制UI界面的方式

Android推薦在XML布局文件中控制視圖，這樣可以將應(yīng)用的視圖控制邏輯從Java代碼中分離出來，方便用戶進(jìn)行開發(fā)。在Android應(yīng)用的app\src\main\res\layout目錄下定義一個(gè)任意文件名的XML布局文件，然后在Java代碼中可以通過setContentView(R.layout.<資源文件名字>)在Activity中加載該視圖。

Android中使用XML布局文件進(jìn)行界面開發(fā)有以下幾點(diǎn)好處：首先是能夠更好地被UI編輯器所識(shí)別，編輯器也能夠很好地根據(jù)編輯的UI生成XML文件；其次是能夠使UI的設(shè)計(jì)與邏輯代碼分開，提高編輯工程的效率；最后就是XML使用廣泛，結(jié)構(gòu)清晰。因此推薦使用XML布局文件進(jìn)行UI界面的設(shè)計(jì)，本書在進(jìn)行應(yīng)用界面設(shè)計(jì)時(shí)也采用該方法。

雖然Android推薦使用XML布局文件來控制UI界面，但如果開發(fā)者愿意，Android允許開發(fā)者通過Java代碼進(jìn)行界面的編輯。如果想在Java代碼中控制UI界面，那么所有的UI組件都將通過new關(guān)鍵字創(chuàng)建出來，然后通過合適的方式搭建在一起。

5.1.3Android中UI界面開發(fā)的常用尺寸單位

因?yàn)椴煌钠聊痪哂胁煌南袼孛芏?，因此同樣?shù)量的像素在不同設(shè)備上可能對(duì)應(yīng)不同的物理尺寸。Android常用dp和sp作為尺寸單位。dp是一種密度無關(guān)像素，對(duì)應(yīng)于160?dpi屏幕上一個(gè)像素的長度，多用于指定布局與控件的長度和寬度；sp通常用于指定字體的大小，當(dāng)用戶修改手機(jī)顯示的字體時(shí)，字體大小會(huì)隨之改變。

5.2常用界面控件

Android中的控件主要分為兩類：一種是系統(tǒng)自帶控件，用戶可以直接在工程中使用；另一種是自定義控件，需要開發(fā)人員自行編寫XML文件來指定文件的樣式，并將該XML文件放在app\src\main\res\drawable中，在布局控件中通過android:background方法進(jìn)行調(diào)用。常見的系統(tǒng)控件包括TextView、Button、EditText、Spinner、ImageView、AlertDialog、ListView及RecyclerView等。

新建一個(gè)UIBestTest工程(布局的使用在后面的章節(jié)會(huì)逐步介紹，所以目前工程中先使用最簡單的線性布局)。在布局可視化編輯界面點(diǎn)擊鼠標(biāo)右鍵，在出現(xiàn)的菜單中選擇Convertview，如圖5.2所示，在彈出的對(duì)話框中選擇LinearLayout，如圖5.3所示，即可轉(zhuǎn)換為線性布局。

圖5.2轉(zhuǎn)換布局樣式

圖5.3轉(zhuǎn)換為LinearLayout

5.2.1TextView

TextView是用于顯示字符串的控件。如果用戶想要在App中獲得信息，那么一定離不開TextView控件。

在TextView中使用android:id為該控件定義唯一的標(biāo)識(shí)符，以便在程序代碼中引用。使用android:layout_width和android:layout_height定義控件的寬度和高度，可選值有兩種：match_parent和wrap_content。

match_parent表示當(dāng)前控件的大小和父布局一樣，如果將一個(gè)控件的寬度指定為match_parent，那么它的寬度和父布局是一樣的。wrap_content表示當(dāng)前控件的大小剛好能夠包裹住里面的內(nèi)容，由控件中的內(nèi)容來決定控件的大小。在早期的工程中，也存在fill_parent的寫法，它的作用與match_parent一樣，但是目前官方的開發(fā)文檔已經(jīng)不推薦使用fill_parent了。此外控件的寬度和高度還可以指定固定的值，單位為dp，但不推薦這么做，因?yàn)樵诓煌氖謾C(jī)上適配會(huì)出現(xiàn)問題。android:text用于指定顯示文本的內(nèi)容。

運(yùn)行程序，效果圖如圖5.4所示。圖5.4TextView控件運(yùn)行效果圖

修改后的代碼中，android:gravity的作用是指定控件的對(duì)齊方式，可選的值主要有top、bottom、left、right、center等。android:textSize的作用是指定字體的大小。重新運(yùn)行程序，效果如圖5.5所示。

圖5.5再次運(yùn)行TextView控件效果圖

可以看到，TextView顯示在屏幕中間，說明TextView的寬度與父布局是一致的。除了上述代碼中的屬性，還可以更改控件的其他屬性，比如用android:textColor來更改文本的顏色等，此處不再贅述，相關(guān)的開發(fā)請(qǐng)查閱官方文檔。

5.2.2Button

Button是一種按鈕控件，用戶能夠點(diǎn)擊該控件，并引發(fā)相應(yīng)的事件處理函數(shù)。

運(yùn)行程序，并點(diǎn)擊按鈕，結(jié)果如圖5.6所示。可以看到，屏幕上出現(xiàn)了Toast提示，說明已經(jīng)成功地利用按鈕實(shí)現(xiàn)了用戶與App之間的交互。

圖5.6Button控件運(yùn)行效果圖

5.2.3EditText

EditText是Android中另一種與用戶交互非常重要的控件。用戶平時(shí)在Android手機(jī)上發(fā)短信、發(fā)微信、聊QQ等都離不開EditText控件。

運(yùn)行程序，效果如圖5.7所示，可以看到，程序界面中已經(jīng)有了EditText控件，用戶可以在該控件中編輯文字。圖5.7EditText控件運(yùn)行效果圖

重新運(yùn)行程序，效果如圖5.8所示，可以看到，EditText中已經(jīng)成功添加了提示文字。圖5.8帶提示文字的EditText控件運(yùn)行效果圖

首先定義一個(gè)EditText變量，通過findViewById()方法得到EditText的實(shí)例，然后在Button的點(diǎn)擊事件里調(diào)用EditText的getText()方法獲取到輸入的內(nèi)容，再通過調(diào)用toString()方法將輸入的內(nèi)容轉(zhuǎn)換成字符串，最后將輸入的內(nèi)容以Toast的形式展現(xiàn)在界面上。運(yùn)行程序，并輸入一段文字，點(diǎn)擊按鈕，效果如圖5.9所示?？梢钥吹捷斎氲膬?nèi)容成功地以Toast形式顯示了出來。

圖5.9EditText與Button交互的運(yùn)行效果圖

5.2.4Spinner

Spinner是一個(gè)列表選擇框控件，只是該列表選擇框不需要顯示下拉列表，而是通過浮動(dòng)菜單的形式為用戶提供選項(xiàng)進(jìn)行選擇。

首先定義一個(gè)字符數(shù)組options，里面放入4個(gè)元素，通過findViewById()方法得到Spinner的實(shí)例，然后建立一個(gè)ArrayAdapter的數(shù)組適配器，數(shù)組適配器能夠?qū)⒔缑婵丶偷讓訑?shù)據(jù)綁定在一起，在上述代碼中ArrayAdapter和字符數(shù)組綁定在一起，字符數(shù)組中的所有數(shù)據(jù)將顯示在Spinner的浮動(dòng)菜單中，通過setAdapter()方法來實(shí)現(xiàn)，并通過setDropDownViewResource()方法提供系統(tǒng)內(nèi)置的一種浮動(dòng)菜單。

為了保證用戶界面顯示的內(nèi)容和應(yīng)用程序數(shù)據(jù)一致，應(yīng)用程序需要監(jiān)視數(shù)據(jù)的變化，如果數(shù)據(jù)更改了，那么用戶界面的顯示內(nèi)容也會(huì)更改。通過適配器綁定界面控件和數(shù)據(jù)后，應(yīng)用程序就不需要再監(jiān)視數(shù)據(jù)的變化，極大地簡化了代碼。Spinner控件的運(yùn)行效果如圖5.10所示，可以看到，通過Spinner實(shí)現(xiàn)了一個(gè)下拉菜單，可以選擇其中任意一項(xiàng)。

圖5.10Spinner控件運(yùn)行效果圖

可以看到，添加的代碼與5.2.3節(jié)中EditText和Button控件交互的代碼很相似，不同的是：在spinner中需要調(diào)用getSelectItem()方法來獲取spinner中的內(nèi)容，再通過調(diào)用toString()方法轉(zhuǎn)換成字符串。運(yùn)行程序，效果如圖5.11所示，我們選擇Spinner中的一個(gè)選項(xiàng)，點(diǎn)擊按鈕2，界面有Toast提示我們選擇了哪個(gè)選項(xiàng)。

圖5.11Spinner控件與Button控件交互運(yùn)行效果圖

5.2.5ImageView

ImageView控件可以幫助用戶在界面上展示圖片，它會(huì)讓程序的界面變得更加美觀。在學(xué)習(xí)該控件之前，首先要準(zhǔn)備一些圖片，Android程序中的圖片通常都是放在以“drawable”開頭的文件夾下。目前在app\src\main\res目錄下已經(jīng)有了drawable文件夾，但是該文件夾并沒有指定具體的分辨率，所以一般不在這里面放置圖片。在res目錄下新建一個(gè)drawable-xhdpi文件夾，然后準(zhǔn)備一張圖片，將其命名為image1.png，并復(fù)制到該文件夾下。

在ImageView控件中，我們通過android:src為ImageView加入一張存在的圖片。運(yùn)行程序，結(jié)果如圖5.12所示。

圖5.12ImageView控件運(yùn)行效果圖

5.2.6AlertDialog

Android中一些重要的信息可以通過對(duì)話框的形式對(duì)用戶進(jìn)行提示，這里經(jīng)常會(huì)用到AlertDialog控件。AlertDialog控件可以在Android的界面上彈出一個(gè)對(duì)話框，該對(duì)話框會(huì)置頂于所有界面元素之上，屏蔽掉其他控件的交互能力。

首先通過AlertDialog.Builder創(chuàng)建一個(gè)AlertDialog的實(shí)例，并為AlertDialog控件設(shè)置標(biāo)題、顯示內(nèi)容、是否可取消等屬性，然后調(diào)用setPositiveButton()方法為對(duì)話框設(shè)置確定按鈕的點(diǎn)擊事件，調(diào)用setNegativeButton()方法為對(duì)話框設(shè)置取消按鈕的點(diǎn)擊事件，最后調(diào)用show()方法將對(duì)話框顯示出來。運(yùn)行程序，結(jié)果如圖5.13所示。

圖5.13AlertDialog控件運(yùn)行效果圖

5.2.7ListView

ListView是一個(gè)用于垂直顯示列表的控件，如果界面顯示的內(nèi)容過多，則會(huì)出現(xiàn)垂直的滾動(dòng)條，因?yàn)樗軌蛲ㄟ^適配器將數(shù)據(jù)和顯示控件進(jìn)行綁定，在有限的屏幕上提供大量內(nèi)容供用戶選擇，而且支持點(diǎn)擊事件。

實(shí)際開發(fā)中會(huì)在ListView中存放大量的數(shù)據(jù)供用戶查詢?yōu)g覽，這里我們通過一個(gè)字符數(shù)組作一個(gè)示例，數(shù)組里包含了許多子項(xiàng)。由于數(shù)組中的數(shù)據(jù)無法直接傳遞給ListView，因此，還要像Spinner控件一樣，用適配器來完成數(shù)據(jù)和控件的綁定，具體用法與Spinner控件基本相同，請(qǐng)參閱5.2.4節(jié)Spinner相關(guān)內(nèi)容。

運(yùn)行程序，結(jié)果如圖5.14所示。對(duì)于在ListView界面上一頁未能全部顯示的內(nèi)容，可以通過上下滑動(dòng)的方式去查看。

圖5.14ListView控件運(yùn)行效果圖

ListView也可以像Button一樣設(shè)置點(diǎn)擊事件，下面介紹該功能的實(shí)現(xiàn)。新建ListViewAdvancedTest工程，布局文件為activity_main.xml，向布局中添加ListView控件，可參照之前內(nèi)容。

Options類中只有一個(gè)字段——name，用來表示每個(gè)子項(xiàng)的名字。

OptionsAdapter類中重寫了父類的一組構(gòu)造函數(shù)，將上下文、ListView子項(xiàng)布局的id以及數(shù)據(jù)全部傳遞進(jìn)來。然后重寫getView()方法，該方法的作用是當(dāng)子項(xiàng)滾動(dòng)到屏幕內(nèi)時(shí)被調(diào)用。在getView()方法中，先通過getItem()方法獲取當(dāng)前項(xiàng)的Options實(shí)例，然后使用LayoutInflater為子項(xiàng)傳入事先寫好的自定義布局，接下來通過findViewById()方法獲取到TextView的實(shí)例，再調(diào)用setText()方法顯示獲取到的內(nèi)容，最后將布局返回。

在MainActivity中，定義了一個(gè)initOptions()方法，用于初始化所有子項(xiàng)的數(shù)據(jù)。然后在onCreate()方法中創(chuàng)建了OptionsAdapter對(duì)象，并為ListView設(shè)置OptionsAdapter適配器。接下來加入點(diǎn)擊事件，使用setOnItemClickListener()方法為ListView注冊(cè)一個(gè)監(jiān)聽器，當(dāng)點(diǎn)擊ListView中的任何一個(gè)子項(xiàng)時(shí)，都會(huì)調(diào)用onItemClick()方法。在該方法中通過position參數(shù)判斷用戶點(diǎn)擊的是哪一個(gè)子項(xiàng)，然后獲取相應(yīng)的子項(xiàng)名稱，最后通過Toast將其名稱顯示到界面上。

運(yùn)行程序，效果如圖5.15所示。

圖5.15帶有點(diǎn)擊事件的ListView控件運(yùn)行效果圖

5.2.8RecyclerView

在早期的Android開發(fā)中，ListView因其能用簡單的代碼實(shí)現(xiàn)復(fù)雜的功能被廣大開發(fā)者青睞，目前有許多的開發(fā)者在使用ListView。而ListView也有其自身缺點(diǎn)，比如，ListView只能實(shí)現(xiàn)縱向滾動(dòng)，運(yùn)行效率并不高等。為解決上述缺點(diǎn)，Android官方推出了一個(gè)全新的控件——RecyclerView。該控件不僅繼承了ListView的所有優(yōu)點(diǎn)，而且還有許多ListView所不具備的優(yōu)勢。目前，Android官方更推薦開發(fā)者使用新的RecyclerView控件，未來它也會(huì)逐漸代替ListView。

接下來學(xué)習(xí)RecyclerView控件的使用。新建RecyclerViewTest工程，布局文件為activity_main.xml，點(diǎn)擊左上角File，再點(diǎn)擊ProjectStructure，出現(xiàn)如圖5.16所示的窗口。

圖5.16ProjectStructure窗口圖

然后選擇左側(cè)的Dependencies，點(diǎn)擊AllDependencies下面的“+”，選擇LibraryDependency，在Step1的文本框中輸入recyclerview，點(diǎn)擊Search按鈕，出現(xiàn)如圖5.17所示界面，選擇androidx.recyclerview，版本選擇1.2.0-alpha02，點(diǎn)擊OK即可添加依賴庫。

圖5.17添加依賴庫界面

在ViewHolder的構(gòu)造函數(shù)中傳入一個(gè)View參數(shù)，這個(gè)參數(shù)一般就是RecyclerView子項(xiàng)的最外層布局，通過findViewById()方法來獲取布局中的ImageView和TextView的實(shí)例。在CatAdapter中也有一個(gè)構(gòu)造函數(shù)，用于將需要展示的數(shù)據(jù)源傳進(jìn)來，并賦值給一個(gè)全局變量aCatList，后續(xù)的所有操作都在這個(gè)數(shù)據(jù)源的基礎(chǔ)上進(jìn)行。

代碼中定義了一個(gè)initCats()方法，用于初始化所有的圖片和對(duì)應(yīng)的名稱。然后在onCreate()方法中獲取RecyclerView的實(shí)例。接下來創(chuàng)建一個(gè)LinearLayoutManager對(duì)象，將其設(shè)置到RecyclerView中，作用是指定RecyclerView的布局方式為線性布局，效果與ListView類似。最后創(chuàng)建CatAdapter的實(shí)例，將所有數(shù)據(jù)傳入到CatAdapter的構(gòu)造函數(shù)中，調(diào)用RecyclerView的setAdapter()方法完成適配器的設(shè)置，建立起RecyclerView和數(shù)據(jù)之間的聯(lián)系。

運(yùn)行程序，效果如圖5.18所示。

圖5.18RecyclerView運(yùn)行效果圖

通過調(diào)用LinearLayoutManager的setOrientation()方法來實(shí)現(xiàn)布局的排列方向，默認(rèn)是縱向排列的，加入LinearLayoutManager.HORIZONTAL這句代碼代表橫向排列，就能夠?qū)崿F(xiàn)橫向滾動(dòng)了。運(yùn)行程序，效果如圖5.19所示。

圖5.19RecyclerView橫向滾動(dòng)運(yùn)行效果圖

RecyclerView同樣也可以實(shí)現(xiàn)點(diǎn)擊事件，但它與ListView的不同之處在于，RecyclerView并沒有提供類似setOnItemClickListener()的注冊(cè)監(jiān)聽器的方法，而是通過給子項(xiàng)具體的view去注冊(cè)點(diǎn)擊事件，因此其點(diǎn)擊事件的實(shí)現(xiàn)要復(fù)雜一些。

首先修改ViewHolder，在其中添加catView變量來保存子項(xiàng)最外層的布局實(shí)例。接下來在onCreateViewHolder()方法中注冊(cè)點(diǎn)擊事件，分別為catView和ImageView注冊(cè)點(diǎn)擊事件，在點(diǎn)擊事件中先獲取用戶點(diǎn)擊的position，然后得到position對(duì)應(yīng)的Cat實(shí)例，最后通過Toast來顯示點(diǎn)擊的內(nèi)容。

重新運(yùn)行程序，點(diǎn)擊任意一張圖片，效果如圖5.20所示，Toast提示點(diǎn)擊了哪張圖片。再點(diǎn)擊任意一個(gè)文字部分，由于沒有為TextView注冊(cè)點(diǎn)擊事件，因此點(diǎn)擊文字會(huì)被子項(xiàng)最外層布局捕獲到，相應(yīng)的Toast提示點(diǎn)擊了哪張圖片的名字，效果如圖5.21所示。

圖5.20RecyclerView點(diǎn)擊圖片運(yùn)行效果圖

圖5.21RecyclerView點(diǎn)擊文字運(yùn)行效果圖

5.3常用布局

5.3.1ConstraintLayout以往的Android開發(fā)中，界面基本都是通過XML代碼完成的，同時(shí)AndroidStudio也支持可視化的方式來編寫界面，但是操作起來并不方便。為了解決這一問題，2016年的GoogleI/O大會(huì)發(fā)布了ConstraintLayout。

ConstraintLayout可以翻譯為約束布局。和傳統(tǒng)編寫界面的方式相比，ConstraintLayout更適合可視化操作布局界面，反而不太適合使用XML方式。當(dāng)然，可視化操作的背后仍然還是依賴XML代碼來實(shí)現(xiàn)的，只不過這些代碼是由AndroidStudio根據(jù)可視化操作自動(dòng)生成的。

另外，ConstraintLayout還可以有效地解決布局嵌套過多的問題。在編寫界面時(shí)，復(fù)雜的布局總會(huì)伴隨著多層的嵌套，而嵌套越多，程序的性能也就越差。ConstraintLayout則是通過約束的方式來指定各個(gè)控件的位置和關(guān)系，它有點(diǎn)類似于RelativeLayout，但功能遠(yuǎn)比RelativeLayout強(qiáng)大。

在xml中我們定義了兩個(gè)控件，一個(gè)是TextView，另一個(gè)是Button，控件的寬度和高度都是wrap_content。約束布局中控件的位置是通過一個(gè)控件和其他控件或者父布局的相對(duì)位置來確定的。對(duì)于TextView控件，app:layout_constraintBottom_toBottomOf="parent"的意思是TextView控件的左邊與父布局的左邊對(duì)齊，同理其他幾個(gè)屬性的意思也是類似的，因此該控件會(huì)放置在父布局的中央；對(duì)于Button控件，讓Button的上邊緣和TextView控件對(duì)齊，其余邊緣和父布局對(duì)齊。運(yùn)行程序，效果如圖5.22所示。

圖5.22約束布局運(yùn)行效果圖

ndroidx.constraintlayout.widget.Guideline是添加的引導(dǎo)線。對(duì)于第一條引導(dǎo)線，android:orientation="vertical"的意思是引導(dǎo)線的方向?yàn)樨Q直，app:layout_constraintGuide_percent="0.6"的意思是這條引導(dǎo)線將界面分成兩部分，左邊部分占整個(gè)界面的60%；對(duì)于第二條引導(dǎo)線，android:orientation="horizontal"表示引導(dǎo)線的方向?yàn)樗剑琣pp:layout_constraintGuide_percent="0.3"表示引導(dǎo)線將界面分為上下兩個(gè)部分，上邊部分的占比為30%。

運(yùn)行程序，效果如圖5.23所示。

圖5.23添加引導(dǎo)線的約束布局運(yùn)行效果圖

5.3.2LinearLayout

LinearLayout即為線性布局。線性布局是一種常用的布局，該布局中把所有控件按照線性方向依次排列。

android:orientation表示布局中控件排列的方向，vertical表示控件按照豎直方向線性排列。運(yùn)行程序，效果如圖5.24所示。可以看到三個(gè)按鈕垂直排列在左上方。圖5.24線性布局運(yùn)行效果圖1

重新運(yùn)行程序，效果如圖5.25所示，三個(gè)按鈕呈斜著的方式排列，android:layout_gravity的用處是指定控件在布局中的對(duì)齊方式。

再次修改activity_main.xml中的代碼，如下所示。運(yùn)行工程，效果如圖5.26所示。

圖5.25線性布局運(yùn)行效果圖2

圖5.26線性布局運(yùn)行效果圖3

在代碼中，按鈕的寬度被指定為0?dp，很顯然這樣會(huì)報(bào)錯(cuò)，但此處使用了一個(gè)新的屬性：android:weight，該屬性可以通過比例來調(diào)節(jié)控件的大小。比如在代碼中，將按鈕1和按鈕2的權(quán)重都設(shè)為了1，那么每個(gè)按鈕寬度就各占父布局寬度的二分之一；如果將按鈕1的比重設(shè)置為3，按鈕2的比重設(shè)置為7，那么運(yùn)行后按鈕1的寬度應(yīng)占父布局寬度的十分之三，按鈕2的寬度應(yīng)占父布局寬度的十分之七。

5.3.3RelativeLayout

RelativeLayout為相對(duì)布局，是一種比較靈活的布局方式。即便是在Google推出約束布局后，相對(duì)布局仍然被廣大開發(fā)者所使用。相對(duì)布局和線性布局有一個(gè)共同的優(yōu)點(diǎn)，就是它們的手機(jī)適配性好，在不同分辨率的屏幕上能保證布局的穩(wěn)定性。

此處設(shè)計(jì)了一個(gè)非常簡單的登錄界面。首先定義一個(gè)TextView，在不指定任何位置屬性的情況下，它位于布局的左上方；然后定義一個(gè)EditText，讓它位于TextView的下方，采用的是android:layout_below方法；接下來定義一個(gè)TextView和一個(gè)EditText；最后定義了一個(gè)Button。依次使用android:layout_below方法，讓每一個(gè)控件依次在上一個(gè)控件的下方。運(yùn)行程序，效果如圖5.27所示。

圖5.27模擬登錄界面的相對(duì)布局運(yùn)行效果圖

5.3.4GridLayout

GridLayout是網(wǎng)格布局，顧名思義就是將界面劃分為很多的網(wǎng)格，可以將控件放置在這些網(wǎng)格之中，網(wǎng)格布局的優(yōu)點(diǎn)在于可以設(shè)置行列，自動(dòng)換行，適用于排列比較整齊的界面，比如計(jì)算器這種。

可以看到，此處對(duì)每個(gè)控件進(jìn)行屬性設(shè)置的時(shí)候，缺少了and-roid:layout_width和android:layout_height這種常見的屬性，這是由于在網(wǎng)格布局中沒有定義的屬性都是具有默認(rèn)值的，只需要指定控件的其他屬性即可。在可視化界面中，可以看到有很多網(wǎng)格，如圖5.28所示。但是這些網(wǎng)格在運(yùn)行后的界面中是不顯示的。

圖5.28網(wǎng)格布局設(shè)計(jì)界面

上述代碼中，android:useDefaultMargins是將控件沒有定義的屬性設(shè)置為默認(rèn)值。Android:columnCount屬性是設(shè)置網(wǎng)格的列數(shù)量，這里值設(shè)為4，因此為4列。該界面左邊第一列寬度是由“賬號(hào)：”和“密碼：”這兩個(gè)TextView的寬度決定的，選擇兩個(gè)控件中最寬的作為第一列的寬度。同理，上方第一行的高度也是由“登錄界面”這個(gè)TextView的高度決定的。android:layout_columnSpan表示這個(gè)控件橫跨幾列。通過這些屬性，就可以知道這些控件的相對(duì)位置關(guān)系。運(yùn)行程序，效果如圖5.29所示。

圖5.29網(wǎng)格布局設(shè)計(jì)的登錄界面

5.3.5FrameLayout

FrameLayout是幀布局，該布局的使用比較簡單，它會(huì)默認(rèn)把控件放在屏幕的左上角區(qū)域，后續(xù)添加的控件會(huì)覆蓋在前一個(gè)控件上，如果多個(gè)控件的大小一樣的話，在同一時(shí)刻，用戶只能看到最上面的那個(gè)控件。

布局中放置了一個(gè)TextView和一個(gè)ImageView，ImageView引用的圖片資源是提前放在drawable目錄下的，圖片的名字為android。

運(yùn)行程序，效果如圖5.30所示。

圖5.30FrameLayout運(yùn)行效果

在上述代碼中，指定TextView在FrameLayout中底部對(duì)齊，重新運(yùn)行程序，效果如圖5.31所示。

圖5.31指定對(duì)齊方式的效果

5.4碎片

5.4.1碎片簡介碎片(Fragment)是Android3.0版本中的新增概念。在Android智能設(shè)備領(lǐng)域，不僅有品牌眾多的Android智能手機(jī)，還有很多的Android平板電腦。而平板電腦和手機(jī)的屏幕尺寸相差較大，同一個(gè)App的界面在手機(jī)上看起來十分美觀，在平板電腦上可能就會(huì)很不協(xié)調(diào)，為了能夠兼顧手機(jī)和平板電腦，Google推出了碎片這個(gè)概念。

碎片是一種可以嵌入Activity中的UI片段，可以將其理解為子Activity，使Activity設(shè)計(jì)更加模塊化。當(dāng)Activity運(yùn)行時(shí)，可以在Activity中添加或者移除碎片；開發(fā)者可以在一個(gè)單一的Activity中通過合并多個(gè)碎片來構(gòu)建多欄的UI；碎片的生命周期和它的宿主Activity生命周期緊密關(guān)聯(lián)，這意味著當(dāng)Activity被暫停時(shí)，Activity中的所有碎片也被停止。

下面介紹碎片的狀態(tài)和回調(diào)。碎片和Activity類似，也有運(yùn)行狀態(tài)、暫停狀態(tài)、停止?fàn)顟B(tài)和銷毀狀態(tài)。

(1)運(yùn)行狀態(tài)：當(dāng)一個(gè)碎片是可見的，且與它相關(guān)的Activity處于運(yùn)行狀態(tài)時(shí)，該碎片也處于運(yùn)行狀態(tài)。

(2)暫停狀態(tài)：當(dāng)另一個(gè)未占滿屏幕的Activity處于棧頂時(shí)，與上一個(gè)Activity相關(guān)的可見碎片就會(huì)進(jìn)入到暫停狀態(tài)。

(3)停止?fàn)顟B(tài)：當(dāng)與一個(gè)碎片相關(guān)聯(lián)的Activity進(jìn)入停止?fàn)顟B(tài)時(shí)，該碎片就會(huì)進(jìn)入停止?fàn)顟B(tài)。除此之外，通過調(diào)用FragmentTransaction()的remove()和replace()方法將碎片從Activity中移除時(shí)，碎片也會(huì)進(jìn)入停止?fàn)顟B(tài)。

(4)銷毀狀態(tài)：碎片是依附于Activity而存在的，因此當(dāng)與之相關(guān)聯(lián)的Activity被銷毀時(shí)，碎片也會(huì)進(jìn)入銷毀狀態(tài)。

碎片的完整生命周期示意圖如圖5.32所示。

圖5.32碎片的完整生命周期示意圖

5.4.2碎片的使用

為了體驗(yàn)碎片的運(yùn)行效果，我們創(chuàng)建一個(gè)Android平板電腦模擬器，并新建FragmentTest工程，擬建立兩個(gè)碎片來平分Activity空間。

在布局代碼中，通過<fragment>標(biāo)簽在布局中添加碎片，在添加碎片時(shí)一定要通過android:name來指明添加的碎片類名，且一定要在類名前面加上包名。運(yùn)行程序，效果圖如圖5.33所示。

圖5.33碎片的運(yùn)行效果圖

可以看到，我們?yōu)樽筮叺陌粹o添加了一個(gè)點(diǎn)擊事件。通過調(diào)用replaceFragment()方法添加了FragmentRight碎片。當(dāng)點(diǎn)擊左側(cè)按鈕時(shí)，又會(huì)調(diào)用r