Android移動(dòng)應(yīng)用開發(fā)（微課視頻版）課件 第4章 Android GUI開發(fā)

第4章

AndroidGUI開發(fā)CONTENTS目錄02

常用Widget組件01

布局03

Menu04

Toast和Notification05

綜合實(shí)例-學(xué)生信息與成績(jī)登記系統(tǒng)布局01Android系統(tǒng)提供了豐富的可視化界面組件，包括菜單、按鈕、對(duì)話框等。Android系統(tǒng)采用Java程序設(shè)計(jì)中的UI設(shè)計(jì)思想，其中包括事件處理機(jī)制及布局管理方式。Android系統(tǒng)中的所有UI類都是建立在View這個(gè)類的基礎(chǔ)之上的，所有View的子類稱為Widget（小掛件），通常一個(gè)Widget就是一個(gè)能夠在界面上顯示的組件。但是View類有一個(gè)特殊的子類ViewGroup，ViewGroup是一個(gè)容器，用于裝載其他的ViewGroup和View類。本章將詳細(xì)介紹Activity的用戶界面UI設(shè)計(jì)、用戶界面UI組件及其事件處理的相關(guān)知識(shí)。在這里簡(jiǎn)單介紹一下Android系統(tǒng)常用的尺寸類型的單位。

像素：縮寫為px。表示屏幕上的物理像素。

磅：points，縮寫為pt。1pt等于1英寸的1/72，常用于印刷業(yè)。

放大像素：sp。主要用于字體的顯示，Android默認(rèn)使用sp作為字號(hào)單位。

密度獨(dú)立像素dp：也縮寫為dip。該尺寸使用160dp的屏幕作為參考，然后用該屏幕映射到實(shí)際屏幕，在不同分辨率的屏幕上會(huì)有相應(yīng)的縮放效果以適用于不同分辨率的屏幕。若用px的話，320px占滿HVGA的寬度，到WVGA上就只能占一半不到的屏幕了，那一定不是你想要的。

毫米：mm。布局AndroidSDK定義了多種布局方式以方便用戶設(shè)計(jì)UI。各種布局方式均為ViewGroup類的子類，結(jié)構(gòu)如圖4.3所示。本節(jié)將對(duì)FrameLayout（單幀布局）、LinearLayout（線性布局）、AbsoluteLayout（絕對(duì)布局）、RelativeLayout（相對(duì)布局）和TableLayout（表格布局）進(jìn)行簡(jiǎn)單的介紹。圖4.3

AndroidSDK布局方式結(jié)構(gòu)圖AndroidStudio中創(chuàng)建布局文件的方法是，右擊res文件夾，選擇New→LayoutResourceFile選項(xiàng)，在彈出的NewResourceFile對(duì)話框，在Filename文本框中填寫布局文件的名字，在Rootelement文本框中填寫要設(shè)定的布局。4.1.1FrameLayout

FrameLayout又稱單幀布局，是Android所提供的布局方式里最簡(jiǎn)單的布局方式，它指定屏幕上的一塊空白區(qū)域，在該區(qū)域填充一個(gè)單一對(duì)象，如圖片、文字、按鈕等。應(yīng)用程序開發(fā)人員不能為FrameLayout中填充的組件指定具體填充位置，默認(rèn)情況下，這些組件都將被固定在屏幕的左上角，后放入的組件會(huì)放在前一個(gè)組件上進(jìn)行覆蓋填充，形成部分遮擋或全部遮擋。開發(fā)人員可以通過組件的

android:layout_gravity屬性對(duì)組件位置進(jìn)行適當(dāng)?shù)男薷摹?shí)例FrameLayoutDemo演示了FrameLayout的布局效果。該布局中共有4個(gè)TextView組件，前3個(gè)組件以默認(rèn)方式放置到布局中，第4個(gè)組件修改gravity屬性后放置到布局中，運(yùn)行效果如圖4.4所示。圖4.4

FrameLayout的布局效果實(shí)例FrameLayoutDemo中的布局文件main.xml的代碼如下：<?xmlversion="1.0"encoding="utf-8"?><FrameLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"><TextViewandroid:id="@+id/text1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#00ff00"android:textSize="100dip"android:text="@string/first"/>

<TextViewandroid:id="@+id/text2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#00ffff"android:textSize="70dip"android:text="@string/second"/><TextViewandroid:id="@+id/text3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ff0000"android:textSize="40dip"android:text="@string/third"/>

<TextViewandroid:id="@+id/text4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textColor="#ffff00"android:textSize="40dip"android:layout_gravity="bottom"android:text="@string/forth"/></FrameLayout>其中：android:layout_width="wrap_content"android:layout_height="wrap_content"表明FrameLayout布局覆蓋了整個(gè)屏幕空間。實(shí)例FrameLayoutDemo中的string.xml文件內(nèi)容如下：<?xmlversion="1.0"encoding="utf-8"?><resources> <stringname="app_name">FrameLayoutDemo</string><stringname="first">第一層</string><stringname="second">第二層</string><stringname="third">第三層</string><stringname="forth">第四層</string></resources>從運(yùn)行后的結(jié)果可見，前3個(gè)被放置到FrameLayout的TextView組件都是以屏幕左上角為基點(diǎn)進(jìn)行疊加的。第4個(gè)TextView因?yàn)樵O(shè)置了android:layout_gravity="bottom"屬性而顯示到了布局的下方。讀者可自行將android:layout_gravity屬性值修改為其他屬性，查看運(yùn)行效果。4.1.2LinearLayout

圖4.5

LinearLayout的布局效果LinearLayout又稱線性布局，該布局應(yīng)該是Android視圖設(shè)計(jì)中最經(jīng)常使用的布局。該布局可以使放入其中的組件以水平方式或者垂直方式整齊排列，通過android:orientation屬性指定具體的排列方式，通過weight屬性設(shè)置每個(gè)組件在布局中所占的比重。實(shí)例LinearLayoutDemo演示了LinearLayout布局的使用方法，效果如圖4.5所示。4.1.2LinearLayout

實(shí)例LinearLayoutDemo中的strings.xml文件代碼如下：<?xmlversion="1.0"encoding="utf-8"?><resources><stringname="app_name">LinearLayoutDemo</string><stringname="red">red</string><stringname="yellow">yellow</string><stringname="green">green</string><stringname="blue">blue</string><stringname="row1">rowone</string><stringname="row2">rowtwo</string><stringname="row3">rowthree</string><stringname="row4">rowfour</string></resources>實(shí)例LinearLayoutDemo中的布局文件main.xml代碼如下：<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><LinearLayoutandroid:orientation="horizontal"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1"><TextViewandroid:text="@string/red"android:gravity="center_horizontal"android:background="#aa0000"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/><TextViewandroid:text="@string/green"android:gravity="center_horizontal"android:background="#00aa00"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/><TextViewandroid:text="@string/blue"android:gravity="center_horizontal"android:background="#0000aa"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/><TextViewandroid:text="@string/yellow"android:gravity="center_horizontal"android:background="#aaaa00"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_weight="1"/></LinearLayout><LinearLayoutandroid:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_weight="1"><TextViewandroid:text="@string/row1"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/><TextViewandroid:text="@string/row2"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/><TextViewandroid:text="@string/row3"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/><TextViewandroid:text="@string/row4"android:textSize="15pt"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_weight="1"/></LinearLayout></LinearLayout>4.1.2LinearLayout

該布局中放置了兩個(gè)LinearLayout布局對(duì)象。第一個(gè)LinearLayout布局通過android:orientation="horizontal"屬性將布局設(shè)置為橫向線性排列，第二個(gè)LinearLayout布局通過android:orientation="vertical"屬性將布局設(shè)置為縱向線性排列。每個(gè)LinearLayout布局中都放入了4個(gè)TextView，并通過android:layout_weight屬性設(shè)置每個(gè)組件在布局中所占的比重相同，即各組件大小相同。layout_weight用于定義一個(gè)線性布局中某組件的重要程度。所有的組件都有一個(gè)layout_weight值，默認(rèn)為0，意思是需要顯示多大的視圖就占據(jù)多大的屏幕空間。若賦值為大于0的值，則將可用的空間分割，分割的大小取決于當(dāng)前的layout_weight數(shù)值與其他空間的layout_weight值的比率，例如水平方向上有兩個(gè)按鈕，每個(gè)按鈕的layout_weight數(shù)值都設(shè)置為1，那么這兩個(gè)按鈕平分寬度；若第一個(gè)為1，第二個(gè)為2，則可將空間的三分之一分給第一個(gè)，三分之二分給第二個(gè)。將LinearLayoutDemo中水平LinearLayout的第4個(gè)TextView的android:layout_weight屬性賦值為2，運(yùn)行效果如圖4.6所示。LinearLayout布局可使用嵌套。活用LinearLayout布局可以設(shè)計(jì)出各種各樣漂亮的布局方式。4.1.3RelativeLayoutRelativeLayout又稱相對(duì)布局。從名稱上可以看出，這種布局方式是以一種讓組件以相對(duì)于容器或者相對(duì)于容器中的另一個(gè)組件的相對(duì)位置進(jìn)行放置的布局方式。RelativeLayout布局提供了一些常用的布局設(shè)置屬性用于確定組件在視圖中的相對(duì)位置。相關(guān)屬性及其所代表的含義列舉在表4.1中。

表4.1

RelativeLayout布局常用屬性屬性描述android:layout_above將該組件的底部置于給定ID的組件之上

android:layout_below將該組件的底部置于給定ID的組件之下

android:layout_toLeftOf將該組件的右邊緣與給定ID的組件左邊緣對(duì)齊

android:layout_toRightOf將該組件的左邊緣與給定ID的組件右邊緣對(duì)齊

android:layout_alignBottom將該組件的底邊與給定ID的組件底邊對(duì)齊android:layout_alignBaseline將該組件的baseline與給定ID的baseline對(duì)齊

android:layout_alignTop將該組件的頂部邊緣與給定ID的頂部邊緣對(duì)齊

android:layout_alignBottom將該組件的底部邊緣與給定ID的底部邊緣對(duì)齊

android:layout_alignLeft將該組件的左邊緣與給定ID的左邊緣對(duì)齊

android:layout_alignRight將該組件的右邊緣與給定ID的右邊緣對(duì)齊android:layout_alignParentTop為true，將該組件的頂部與其父組件的頂部對(duì)齊

android:layout_alignParentBottom為true，將該組件的底部與其父組件的底部對(duì)齊

android:layout_alignParentLeft為true，將該組件的左側(cè)與其父組件的左側(cè)對(duì)齊

android:layout_alignParentRight為true，將該組件的右側(cè)與其父組件的右側(cè)對(duì)齊

android:layout_centerHorizontal為true，將該組件置于水平居中

android:layout_centerVertical為true，將該組件置于垂直居中

android:layout_centerInParent為true，將該組件置于父組件的中央

實(shí)例RelativeLayoutDemo演示了相對(duì)布局的使用方法，其運(yùn)行效果如圖4.7所示。實(shí)例RelativeLayoutDemo中的布局文件main.xml代碼如下：圖4.7

RelativeLayout布局效果<?xmlversion="1.0"encoding="utf-8"?><RelativeLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android="/apk/res/android"><TextViewandroid:id="@+id/label"android:layout_width="fill_parent"android:layout_height="wrap_content"android:text="@string/hello"/><EditTextandroid:id="@+id/enter"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:layout_below="@+id/label"/><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_below="@+id/enter"android:text="@string/but1text"/><Buttonandroid:id="@+id/ok"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignBottom="@+id/button1"android:layout_alignParentLeft="true"android:text="@string/but2text"/></RelativeLayout>該RelativeLayout布局的過程如下：

放置一個(gè)ID為label的TextView組件。

通過android:layout_below="@+id/label"屬性將ID為enter的組件EditText放置到TextView的下面。

在布局中加入一個(gè)ID為button1的Button，通過android:layout_below="@+id/enter"屬性將該Button放置到enter的下面，通過android:layout_alignParentRight="true"屬性將Button放置到相對(duì)布局的右側(cè)。

在相對(duì)布局中加入一個(gè)名為ok的Button，通過android:layout_alignBottom="@+id/button1"屬性將該Button底邊與button1對(duì)齊，通過android:layout_alignParentLeft="true"屬性將該Button放置到布局的左邊。

4.1.4TableLayoutTableLayout又稱為表格布局，以行列的方式管理組件。TableLayout布局沒有邊框，可以由多個(gè)TableRow對(duì)象或者其他組件組成，每個(gè)TableRow可以由多個(gè)單元格組成，每個(gè)單元格是一個(gè)View。TableRow不需要設(shè)置寬度layout_width和高度layout_height

，其寬度一定是match_parent，即自動(dòng)填滿父容器，高度一定為wrap_content，即根據(jù)內(nèi)容改變高度。但對(duì)于TableRow中的其他組件來說，是可以設(shè)置寬度和高度的，只是必須是wrap_content或者fill_parent。實(shí)例TableLayoutDemo演示了使用TableLayout制作UI的方法，效果如圖4.8所示。實(shí)例TableLayoutDemo中strings.xml的代碼如下：<?xmlversion="1.0"encoding="utf-8"?><resources><stringname="hello">HelloWorld,TableLayout!</string><stringname="app_name">TableLayoutDemo</string> <stringname="column1">第一行第一列</string> <stringname="column2">第一行第二列</string> <stringname="column3">第一行第三列</string> <stringname="empty">最左面的可伸縮TextView</string> <stringname="row2column2">第二行第三列</string> <stringname="row2column3">End</string> <stringname="merger">合并三個(gè)單元格</string></resources>實(shí)例TableLayoutDemo中的布局文件main.xml的代碼如下：<?xmlversion="1.0"encoding="utf-8"?><TableLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"><TableRow><TextViewandroid:text="@string/column1"/><TextViewandroid:text="@string/column2"/><TextViewandroid:text="@string/column3"/></TableRow><TextViewandroid:layout_height="wrap_content"android:background="#fff000"android:text="單獨(dú)的一個(gè)TextView"android:gravity="center"/> <TableRow><Buttonandroid:text="@string/merger"android:layout_span="3"android:gravity="center_horizontal"android:textColor="#f00"/></TableRow>

<TextViewandroid:layout_height="wrap_content"android:background="#fa05"android:text="單獨(dú)的一個(gè)TextView"/> <TableRowandroid:layout_height="wrap_content"> <TextView android:text="@string/empty"/> <Button android:text="@string/row2column2"/> <Button android:text="@string/row2column3"/> </TableRow></TableLayout>布局文件main.xml在TableLayout布局內(nèi)添加了兩個(gè)TableRow和兩個(gè)TextView，形成了如圖4.8所示的效果。從運(yùn)行效果看，第一行和第五行都沒能完全顯示。TableLayout布局提供了幾個(gè)特殊屬性，可以實(shí)現(xiàn)以下特殊效果。

android:shrinkColumns屬性：該屬性用于設(shè)置可收縮的列。當(dāng)可收縮的列太寬以至于布局內(nèi)的其他列不能完全顯示時(shí)，可收縮列會(huì)縱向延伸，壓縮自己所占的空間，以便于其他列可以完全顯示出來。android:shrinkColumns=“1”表示將第2列設(shè)置為可收縮列，列數(shù)從0開始。

android:stretchColumns屬性：該屬性用于設(shè)置可伸展的列。可伸展的列會(huì)自動(dòng)擴(kuò)展長(zhǎng)度以填滿所有可用空間。android:stretchColumns=“1”表示將第2列設(shè)置為可伸展的列。

android:collapseColumns屬性：該屬性用于設(shè)置隱藏列。android:collapseColumns=“1”表示將第2列隱藏不顯示。在<TableLayout>標(biāo)簽添加屬性android:shrinkColumns="0"，再次運(yùn)行，效果如圖4.9所示，可以看出第一行和第五行都完全顯示出來了。圖4.9

完全顯示的效果4.1.5ConstraintLayoutConstraintLayout又稱約束布局，是Android中一個(gè)強(qiáng)大的布局容器，屬于AndroidX庫(kù)的一部分。如果開發(fā)者想要更改布局，則可通過約束（Constraints）來定義視圖之間的相對(duì)位置關(guān)系，從而實(shí)現(xiàn)靈活且高效的布局設(shè)計(jì)。該布局支持從AndroidAPI9（Gingerbread）開始的所有版本。通過New|LayoutResourceFile，如圖4.10所示，新建一個(gè)Rootelement為ConstraintLayout的布局文件constraintlayout.xml。ConstraintLayout布局要求為其中的每個(gè)View組件都至少設(shè)置一個(gè)垂直約束和一個(gè)水平約束。ConstraintLayout和RelativeLayout功能相似，但是更靈活，并且具有更豐富的功能，例如鏈?zhǔn)讲季帧?quán)重分配、比例布局等。圖4.10新建constraintlayout.xml

要使用ConstraintLayout完成如圖4.11所示的布局效果，需要在constraintlayout.xml拖入兩個(gè)TextView，兩個(gè)EditText，放置到如圖4.11所示的基本位置上，然后通過組件的約束點(diǎn)為每個(gè)組件至少添加水平和垂直兩個(gè)約束，如圖4.12所示，才能在該布局下確定組件的具體位置。需要說明的是，約束除通過可以通圖4.12所示的菜單方式添加，還可以在AndroidStudio的可視化界面上直接拖曳，或者在屬性面板的“ConstraintWidget”屬性上直接修改。圖4.11ConstraintLayout布局效果圖圖4.12添加約束點(diǎn)實(shí)例ConstraintLayoutDemo的布局文件main.xml代碼如下：<?xmlversion="1.0"encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:id="@+id/constraintLayout"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/textView"android:layout_width="71dp"android:layout_height="40dp"android:layout_marginStart="56dp"android:layout_marginTop="116dp"android:text="user:"android:textSize="24sp"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"/><TextViewandroid:id="@+id/textView2"android:layout_width="66dp"android:layout_height="33dp"android:layout_marginStart="56dp"android:layout_marginTop="48dp"android:text="psw:"android:textSize="24sp"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/textView"/><EditTextandroid:id="@+id/editTextText"android:layout_width="208dp"android:layout_height="55dp"android:layout_marginStart="56dp"android:layout_marginTop="116dp"android:ems="10"android:inputType="text"android:text="Name"app:layout_constraintStart_toEndOf="@+id/textView"app:layout_constraintTop_toTopOf="parent"/><EditTextandroid:id="@+id/editTextText2"android:layout_width="199dp"android:layout_height="61dp"android:layout_marginStart="57dp"android:layout_marginTop="26dp"android:ems="10"android:inputType="text"android:text="password"app:layout_constraintStart_toEndOf="@+id/textView2"app:layout_constraintTop_toBottomOf="@+id/editTextText"/></androidx.constraintlayout.widget.ConstraintLayout>其中：android:layout_marginStart="56dp"android:layout_marginTop="116dp"表示組件放置到距離屏幕左側(cè)56dp、距離屏幕上沿為116dp的位置。4.1.6WebViewWebView組件是AbsoluteLayout的子類，用于顯示W(wǎng)eb頁(yè)面。借助于WebView，可以方便地開發(fā)自己的網(wǎng)絡(luò)瀏覽器。此處僅對(duì)WebView的基本用法進(jìn)行介紹，在后面進(jìn)行WebApp的學(xué)習(xí)時(shí)會(huì)有更進(jìn)一步的講解。運(yùn)行該實(shí)例時(shí)請(qǐng)確保AVD處于能訪問網(wǎng)絡(luò)的狀態(tài)。創(chuàng)建工程WebViewDemo，為其在AndroidManifest.xml文件中添加Internet訪問權(quán)限：<uses-permissionandroid:name="android.permission.INTERNET"/>在布局文件main.xml中添加一個(gè)WebView組件。Main.xml內(nèi)容如下：<?xmlversion="1.0"encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".WebViewDemoActivity"><WebViewandroid:id="@+id/webView1"android:layout_width="397dp"android:layout_height="605dp"android:layout_marginStart="8dp"android:layout_marginTop="8dp"android:layout_marginEnd="1dp"android:background="#E42020"android:visibility="visible"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.0"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/editTextText"app:layout_constraintVertical_bias="0.0"/><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginStart="16dp"android:layout_marginTop="40dp"android:text="打開頁(yè)面"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"/><EditTextandroid:id="@+id/editTextText"android:layout_width="238dp"android:layout_height="58dp"android:layout_marginStart="136dp"android:layout_marginTop="41dp"android:ems="10"android:inputType="text"android:text=""app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"/></androidx.constraintlayout.widget.ConstraintLayout>其中app:layout_constraintTop_toBottomOf="@+id/editTextText"android:layout_marginTop="8dp"表示webView組件的top約束是基于editTextText組件，距離為8dp。app:layout_constraintHorizontal_bias="0.0"用于控制子視圖在水平方向上的偏移量，取值范圍：[0.0,1.0]，其中0.0表示完全靠近左側(cè)約束，1.0表示完全靠近右側(cè)約束，0.5表示水平居中。同理，app:layout_constraintVertical_bias="0.0"表示視圖完全靠近頂部約束。實(shí)例WebViewDemo中的Activity文件WebViewDemoActivity.java代碼如下：實(shí)例WebViewDemo中的Activity文件WebViewDemoActivity.java代碼如下：packageroduction.webviewdemo;importandroid.os.Bundle;importandroid.view.View;importandroid.webkit.WebView;importandroid.webkit.WebViewClient;importandroid.widget.Button;importandroid.widget.EditText;importandroidx.activity.EdgeToEdge;importandroidx.appcompat.app.AppCompatActivity;importandroidx.core.graphics.Insets;importandroidx.core.view.ViewCompat;importandroidx.core.view.WindowInsetsCompat;publicclassWebViewDemoActivityextendsAppCompatActivity{@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);EdgeToEdge.enable(this);setContentView(R.layout.main);Buttonbtn=findViewById(R.id.button2);WebViewwebView=findViewById(R.id.webView1);btn.setOnClickListener(newView.OnClickListener(){@OverridepublicvoidonClick(Viewv){webView.getSettings().setJavaScriptEnabled(true);webView.setWebViewClient(newWebViewClient());EditTextet=findViewById(R.id.editTextText);webView.loadUrl(et.getText().toString());}});}}其中EdgeToEdge.enable(this);用于啟用邊緣到邊緣顯示，可以實(shí)現(xiàn)內(nèi)容擴(kuò)展到屏幕邊緣的效果，提供更沉浸式的用戶體驗(yàn)。運(yùn)行效果如圖4.11所示。圖4.11

WebViewDemo運(yùn)行界面常用Widget組件02常用Widget組件

在前面的章節(jié)講解了用戶界面UI設(shè)計(jì)中布局方面的知識(shí)，其中涉及少數(shù)幾個(gè)常用的組件，例如按鈕、文本框等。在這一節(jié)中著重講解Android用戶UI設(shè)計(jì)中常用的各種組件的用法

。

AndroidSDK提供了名為android.widget的包，其中提供了在應(yīng)用程序界面設(shè)計(jì)中大部分常用的UI可視組件。之前章節(jié)中涉及的各種布局以及文本框、按鈕等組件都包含在這個(gè)包中。Android提供了強(qiáng)大的用戶UI功能，要設(shè)計(jì)自己獨(dú)特的應(yīng)用程序界面，需要對(duì)各個(gè)組件有一個(gè)詳細(xì)的了解。4.2.1碎片F(xiàn)ragmentFragment是Android中的一個(gè)組件，它可以被理解為一個(gè)模塊化的用戶界面部分，可以嵌入Activity中使用。Fragment有自己的生命周期、輸入事件和定義自己的布局。它允許將復(fù)雜的用戶界面分解成更小的、可重用的組件，更便于管理和維護(hù)。Fragment可以以靜態(tài)方式添加到Activity中，也可以在運(yùn)行時(shí)動(dòng)態(tài)添加、移除或替換，能夠提供更靈活的用戶界面交互。與Activity類似，F(xiàn)ragment有自己的生命周期。Fragment主要生命周期方法包括：

onAttach(Contextcontext)：Fragment與Activity關(guān)聯(lián)時(shí)調(diào)用。

onCreate(BundlesavedInstanceState)：創(chuàng)建Fragment時(shí)調(diào)用。

onCreateView(LayoutInflaterinflater,ViewGroupcontainer,BundlesavedInstanceState)：創(chuàng)建Fragment的視圖時(shí)調(diào)用。

onActivityCreated(BundlesavedInstanceState)：Activity創(chuàng)建完成后調(diào)用。

onStart()：Fragment變?yōu)榭梢姇r(shí)調(diào)用。

onResume()：Fragment可以與用戶交互時(shí)調(diào)用。

onPause()：Fragment即將失去焦點(diǎn)時(shí)調(diào)用。

onStop()：Fragment不再可見時(shí)調(diào)用。

onDestroyView()：Fragment的視圖被銷毀時(shí)調(diào)用。

onDestroy()：Fragment被銷毀時(shí)調(diào)用。

onDetach()：Fragment與Activity解除關(guān)聯(lián)時(shí)調(diào)用。此外，F(xiàn)ragment常用的方法有：

getActivity()：獲取Fragment所關(guān)聯(lián)的Activity。

getFragmentManager()：獲取Fragment的FragmentManager，用于管理Fragment的事務(wù)。

getChildFragmentManager()：獲取Fragment的子FragmentManager，用于管理嵌套Fragment。

setArguments(Bundleargs)：設(shè)置傳遞給Fragment的參數(shù)。

getArguments()：獲取傳遞給Fragment的參數(shù)。FragmentDemo演示了以靜態(tài)方式在Activity中重復(fù)顯示同一個(gè)Fragment的過程。首先，新建一個(gè)名為FragmentActivity的Activity，并指定其布局文件為activity_fragment.xml，設(shè)定其布局為垂直的LinearLayout。其次，右擊包名，通過New|Fragment|Fragment(Blank)菜單新建一個(gè)空白的Fragment，名為BlankFragment，并且指定其對(duì)應(yīng)的布局文件名字fragment_blank.xml。設(shè)定其布局為FrameLayout，并且設(shè)置界面如圖4.12所示。圖4.12Fragment布局fragment_blank.xml對(duì)應(yīng)代碼如下：<?xmlversion="1.0"encoding="utf-8"?><FrameLayoutxmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".BlankFragment"><!--TODO:Updateblankfragmentlayout--><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="top|left"android:text="top|left"/><Buttonandroid:id="@+id/button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="top|right"android:text="top|right"/><Buttonandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="center"/><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|left"android:text="bottom|left"/><Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:text="bottom|right"/></FrameLayout>然后在activity_fragment.xml中以靜態(tài)方式聲明兩個(gè)Fragment，并為每個(gè)Fragment指定唯一id，代碼如下：<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".FragmentActivity"><fragmentandroid:id="@+id/my_fragment1"android:name="roduction.fragmentdemo.BlankFragment"android:layout_width="match_parent"android:layout_height="300dp"/><fragmentandroid:id="@+id/my_fragment2"android:name="roduction.fragmentdemo.BlankFragment"android:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout>FragmentDemo運(yùn)行后，效果如圖所示。可見，F(xiàn)ragment很方便地在Activity中被復(fù)用。Fragment的動(dòng)態(tài)使用會(huì)在4.2.15章節(jié)底部導(dǎo)航視圖中展示。4.2.2按鈕Button按鈕（Button）應(yīng)該是用戶交互中使用最多的組件，在很多應(yīng)用程序中都很常見。當(dāng)用戶單擊按鈕的時(shí)候，會(huì)有相對(duì)應(yīng)的響應(yīng)動(dòng)作。下面在WidgetDemo工程的主界面main.xml中放置一個(gè)名為Button的按鈕。文件代碼如下：<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical"><TextViewandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:text="@string/hello"/><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"/></LinearLayout>其中：<Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"/>表明在用戶界面上放置了一個(gè)ID為“button1”的按鈕，按鈕的高度（layout_height）和寬度（layout_width）都會(huì)根據(jù)實(shí)際內(nèi)容調(diào)整（wrap_content），按鈕上顯示文字為Button，其運(yùn)行效果如圖4.14所示。圖4.14

Button的應(yīng)用界面按鈕最重要的用戶交互事件是“單擊”事件。下面為Button1添加事件監(jiān)聽器和相應(yīng)的單擊事件。該過程在WidgetDemoActivity.java文件中完成，代碼如下：packageintroduction.android.widgetDemo;importandroid.app.Activity;importandroid.os.Bundle;importandroid.util.Log;importandroid.view.View;importandroid.view.View.OnClickListener;importandroid.widget.Button;publicclassWidgetDemoActivityextendsActivity{/**Calledwhentheactivityisfirstcreated.*/@OverridepublicvoidonCreate（BundlesavedInstanceState）{super.onCreate（savedInstanceState）;setContentView（R.layout.main）;Buttonbtn=（Button）this.findViewById（R.id.button1）;btn.setOnClickListener（newOnClickListener(){ @Override publicvoidonClick（Viewv）{ //TODOAuto-generatedmethodstubsetTitle（"button1被用戶點(diǎn)擊了"）; Log.i（"widgetDemo","button1被用戶點(diǎn)擊了。"）; } }）;}}4.2.3文本框TextView

TextView是Android中用于顯示文本信息的一個(gè)基礎(chǔ)控件。它可以顯示單行或多行文本，并支持各種文本格式化選項(xiàng)，如字體、顏色、大小等。TextView是構(gòu)建用戶界面時(shí)最常用的控件之一，適用于顯示標(biāo)題、說明、標(biāo)簽等文本內(nèi)容,其顯示的文本不可被用戶直接編輯。TextView重要屬性：text：設(shè)置TextView顯示的文本內(nèi)容。textSize：設(shè)置文本的大小，通常單位使用sp（縮放像素）。textColor：設(shè)置文本的顏色使用#號(hào)跟隨6位16進(jìn)制數(shù)表示RGB三個(gè)通道數(shù)值。例如"#FF0000"表示紅色，"#00FF00"表示綠色，"#0000FF"表示藍(lán)色，"#000000"表示黑色，"#FFFFFF"表示白色。在工程WidgetDemo的main.xml中添加一個(gè)TextView，代碼如下：<TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView"/>運(yùn)行效果如圖4.16所示。圖4.16

TextView的應(yīng)用界面修改Button1的單擊事件為：publicvoidonClick（Viewview）{ //TODOAuto-generatedmethodstub //setTitle（"button1被用戶單擊了"）; Log.i（"widgetDemo","button1被用戶單擊了。"）;TextViewtextview=（TextView）findViewById（R.id.textView1）; textview.setText（"設(shè)置TextView的字體"）; textview.setTextColor（Color.RED）; textview.setTextSize（TypedValue.COMPLEX_UNIT_SP,20）; textview.setTypeface（Typeface.defaultFromStyle（Typeface.BOLD））; }當(dāng)Button1被單擊時(shí)，通過setText()方法更改textView的顯示內(nèi)容為“設(shè)置TextView的字體”，通過setTextColor()方法修改textView顯示字體的顏色為紅色，通過setTextSize()方法修改textView顯示字體的大小為20sp，通過setTypeface()方法修改textView顯示字體的風(fēng)格為加粗，如圖4.17所示。當(dāng)然，該過程也可以通過修改main.xml文件來實(shí)現(xiàn)。將TextView標(biāo)簽按照如下代碼修改也可以得到同樣的效果