第2章Android常見界面布局《Android移動開發(fā)基礎(chǔ)案例教程（第3版）》學習目標/Target

了解View控件與ViewGroup容器，能夠說出View控件與ViewGroup容器的作

用和關(guān)聯(lián)

掌握線性布局，能夠使用線性布局實現(xiàn)仿動物連連看游戲界面

掌握界面布局，能夠在XML布局文件和Java代碼中編寫界面布局學習目標/Target

掌握相對布局，能夠使用相對布局實現(xiàn)音樂播放器界面

掌握幀布局，能夠使用幀布局實現(xiàn)霓虹燈界面

掌握表格布局，能夠使用表格布局實現(xiàn)計算器界面章節(jié)概述/Summary在Android應(yīng)用程序中，界面由布局和控件組成。布局類似于建筑里的框架，控件相當于建筑里的磚瓦。根據(jù)控件在界面中的不同排列位置，Android定義了多種布局進行管理。本章將針對Android界面中常見的布局進行詳細講解。目錄/Contents010203View控件界面布局編寫方式界面布局的通用屬性04線性布局

目錄/Contents050607相對布局表格布局幀布局View控件2.1

先定一個小目標！了解View控件與ViewGroup容器，能夠說出View控件與ViewGroup容器的作用和關(guān)聯(lián)2.1View控件2.1View控件所有UI元素由View和ViewGroup構(gòu)成。View為基礎(chǔ)視覺控件（如按鈕、文本），ViewGroup為容器，用于組織其他View和ViewGroup。ViewGroup可包含普通View控件（如TextView、Button），也可包含其他ViewGroup容器（形成嵌套結(jié)構(gòu)）。Android應(yīng)用程序的每個界面必須有且只有一個ViewGroup容器，該容器是界面視圖樹的根節(jié)點（Root），承擔承載和管理所有子元素的責任。2.1View控件ViewGroup容器和View控件的包含關(guān)系界面布局編寫方式2.2

先定一個小目標！掌握在XML布局文件中編寫布局，能夠搭建簡單的布局界面2.2.1在XML布局文件中編寫布局Android可以使用XML布局文件控制界面布局，從而有效地將界面中的布局代碼和Java代碼隔離，使程序的結(jié)構(gòu)更加清晰。因此多數(shù)Android程序采用這種方式編寫布局。2.2.1在XML布局文件中編寫布局2.2.1在XML布局文件中編寫布局【文件2-1】activity_main.xml文件核心代碼示例在res/layout文件夾的XML布局文件中編寫布局代碼。<RelativeLayoutxmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="使用XML布局文件控制UI界面"</RelativeLayout>定義相對布局，繼承自ViewGroup定義TextView控件，繼承自View

先定一個小目標！掌握在Java代碼中編寫布局，能夠搭建簡單的布局界面2.2.2在Java代碼中編寫布局Android程序的布局不僅可以在XML布局文件中編寫，還可以在Java代碼中編寫。Android中所有布局和控件的對象都可以通過new關(guān)鍵字創(chuàng)建，將創(chuàng)建的布局和控件對象添加到ViewGroup容器中，從而在界面中顯示。2.2.2在Java代碼中編寫布局2.2.2在Java代碼中編寫布局【文件2-1】activity_main.xml文件核心代碼示例使用Java代碼改寫XML布局文件編寫的布局代碼。RelativeLayoutrelativeLayout=newRelativeLayout(this);RelativeLayout.LayoutParamsparams=newRelativeLayout.LayoutParams(

RelativeLayout.LayoutParams.WRAP_CONTENT,

RelativeLayout.LayoutParams.WRAP_CONTENT);//addRule參數(shù)對應(yīng)RelativeLayout的XML布局屬性params.addRule(RelativeLayout.CENTER_IN_PARENT);//設(shè)置居中顯示TextViewtextView=newTextView(this);//創(chuàng)建TextView控件textView.setText("Java代碼實現(xiàn)界面布局");//設(shè)置TextView控件的文字內(nèi)容textView.setTextColor(Color.RED);//設(shè)置TextView控件的文字顏色textView.setTextSize(18); //設(shè)置TextView控件的文字大小 //添加TextView控件和TextView的布局屬性relativeLayout.addView(textView,params);setContentView(relativeLayout); //設(shè)置在Activity中顯示RelativeLayout創(chuàng)建RelativeLayout對象將TextView控件和LayoutParams對象添加到RelativeLayout中界面布局的通用屬性2.3

先定一個小目標！掌握布局的通用屬性，能夠設(shè)置布局的樣式2.3界面布局的通用屬性2.3界面布局的通用屬性Android提供了四種常用布局：線性布局、相對布局、表格布局和幀布局，它們都繼承自ViewGroup，并支持ViewGroup中定義的通用屬性。這些屬性可用于控制布局的尺寸、位置和外觀等特性。2.3界面布局的通用屬性Android提供的4種常用布局及其特點：線性布局以水平或垂直方向排列表格布局通過相對定位排列通過表格形式排列相對布局幀布局開辟空白區(qū)域，幀里的控件(層)疊加2.3界面布局的通用屬性屬性名稱功能描述android:id設(shè)置當前布局的唯一標識android:layout_width設(shè)置當前布局的寬度android:layout_height設(shè)置當前布局的高度android:background設(shè)置當前布局的背景android:layout_margin設(shè)置當前布局與屏幕邊界、周圍布局或控件的距離android:padding設(shè)置當前布局與該布局中控件的距離布局的通用屬性android:id

android:layout_width

android:layout_height1.用于設(shè)置當前布局的唯一標識。2.在XML文件中它的屬性值是通過“@+id/屬性名稱”定義。1.用于設(shè)置布局的寬度，其值可以是具體的尺寸，也可以是系統(tǒng)定義的值。2.系統(tǒng)定義的值有fill_parent、match_parent和wrap_content。1.用于設(shè)置布局的高度，其值可以是具體的尺寸，也可以是系統(tǒng)定義的值。2.系統(tǒng)定義的值fill_parent、match_parent和wrap_content。6個通用屬性簡介2.3界面布局的通用屬性android:background

android:layout_margin

android:padding用于設(shè)置布局的背景。其值可以引用圖片資源，也可以是顏色資源。用于設(shè)置當前布局與屏幕邊界、周圍布局或控件的距離，屬性值為具體的尺寸。用于設(shè)置當前布局內(nèi)控件與該布局的距離，其值可以是具體的尺寸。線性布局2.4

先定一個小目標！掌握線性布局簡介，能夠運用語法格式與常用屬性進行界面布局2.4.1線性布局簡介2.4.1線性布局簡介線性布局概念：控件按水平或垂直方向排列的基礎(chǔ)布局。<LinearLayoutxmlns:android="/apk/res/android"

屬性="屬性值"......></LinearLayout>基礎(chǔ)語法：在XML布局文件中定義LinearLayout的基本語法格式如下。2.4.1線性布局簡介屬性名稱功能描述android:orientation設(shè)置布局內(nèi)控件的排列順序android:layout_weight在布局內(nèi)設(shè)置控件權(quán)重，屬性值可直接使用int值LinearLayout中兩個比較常用的屬性2.4.1線性布局簡介可選值：vertical和horizontal。vertical：表示LinearLayout內(nèi)控件從上到下依次豎直排列。horizontal：表示LinearLayout內(nèi)控件從左到右依次水平排列。1.android:orientation屬性設(shè)置控件權(quán)重，按比例分配父容器剩余空間。作用：實現(xiàn)屏幕適配，動態(tài)調(diào)整控件大小。使用規(guī)則：屬性值為int型，權(quán)重總和為分母，各控件權(quán)重為分子2.android:layout_weight屬性2.4.1線性布局簡介【文件2-2】activity_main.xml文件代碼使用layout_weight實現(xiàn)3個按鈕按1:1:2寬度分配。<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><Button

android:layout_width="0dp"android:layout_height="wrap_content"

android:layout_weight="1"android:text="按鈕1"/>案例LinearLayout中的控件水平排列25%25%50%2.4.1線性布局簡介<Button

android:layout_width="0dp"android:layout_height="wrap_content"

android:layout_weight="1"android:text="按鈕2"/><Button

android:layout_width="0dp"android:layout_height="wrap_content"

android:layout_weight="2"android:text="按鈕3"/></LinearLayout>3個Button控件的寬度占據(jù)布局寬度的比例分別是1/4、1/4和1/2。2.4.1線性布局簡介注意：LinearLayout中的android:layout_width屬性值不可設(shè)置為wrap_content。原因：LinearLayout的優(yōu)先級比Button控件的優(yōu)先級高，如果將android:layout_width屬性值設(shè)置為wrap_content，則Button控件的android:layout_weight屬性會失去作用。當設(shè)置了Button控件的android:layout_weight屬性時，控件的android:layout_width屬性值一般設(shè)置為0dp才會實現(xiàn)權(quán)重比的效果。

先定一個小目標！掌握線性布局的使用，能夠獨立實現(xiàn)仿動物連連看游戲界面效果2.4.2實戰(zhàn)演練——仿動物連連看游戲界面下面通過一個仿動物連連看游戲界面的案例來演示如何使用LinearLayout排列界面上的動物和空格圖片。2.4.2實戰(zhàn)演練——仿動物連連看游戲界面2.4.2實戰(zhàn)演練——仿動物連連看游戲界面仿動物連連看游戲界面創(chuàng)建程序。創(chuàng)建一個名為AnimalConnection的應(yīng)用程序，指定包名為cn.itcast.animalconnection。導入界面圖片。導入界面需要的圖片到drawable-hdpi文件夾中。步驟1步驟2實現(xiàn)仿動物連連看游戲界面效果創(chuàng)建動物圖片控件的樣式。創(chuàng)建名為btnStyle的樣式。步驟32.4.2實戰(zhàn)演練——仿動物連連看游戲界面<stylename="btnStyle"><itemname="android:layout_width">70dp</item><itemname="android:layout_height">70dp</item><itemname="android:layout_marginRight">15dp</item></style>實現(xiàn)仿動物連連看游戲界面效果放置界面控件。放置3個LinearLayout布局文件，每個布局中放置4個Button控件，每個布局中的控件都是水平排列。步驟4修改主題。修改values/theme.xml文件中第1個<style>標簽的parent屬性值。步驟52.4.2實戰(zhàn)演練——仿動物連連看游戲界面<stylename="Base.Theme.AnimalConnection"parent="Theme.MaterialComponents.DayNight.Bridge">相對布局2.5

先定一個小目標！掌握相對布局簡介，能夠運用語法格式與常用屬性進行界面布局2.5.1相對布局簡介相對布局概念：通過相對定位的方式指定子控件的相對位置的布局?；A(chǔ)語法：在XML布局文件中定義RelativeLayout的基本語法格式如下。2.5.1相對布局簡介<RelativeLayoutxmlns:android="/apk/res/android"

屬性="屬性值"......></RelativeLayout>屬性名稱功能描述android:layout_centerInParent設(shè)置當前控件位于父布局的中央位置android:layout_centerVertical設(shè)置當前控件位于父布局的垂直居中位置android:layout_centerHorizontal設(shè)置當前控件位于父布局的水平居中位置android:layout_above設(shè)置當前控件位于某控件上方android:layout_below設(shè)置當前控件位于某控件下方android:layout_toLeftOf設(shè)置當前控件位于某控件左側(cè)android:layout_toRightOf設(shè)置當前控件位于某控件右側(cè)android:layout_alignParentTop設(shè)置當前控件是否與父控件頂端對齊RelativeLayout中子控件的屬性2.5.1相對布局簡介屬性名稱功能描述android:layout_alignParentLeft設(shè)置當前控件是否與父控件左對齊android:layout_alignParentRight設(shè)置當前控件是否與父控件右對齊android:layout_alignParentBottom設(shè)置當前控件是否與父控件底端對齊android:layout_alignTop設(shè)置當前控件的上邊界與某控件的上邊界對齊android:layout_alignBottom設(shè)置當前控件的下邊界與某控件的下邊界對齊android:layout_alignLeft設(shè)置當前控件的左邊界與某控件的左邊界對齊android:layout_alignRight設(shè)置當前控件的右邊界與某控件的右邊界對齊RelativeLayout中子控件的屬性2.5.1相對布局簡介2.5.1相對布局簡介【文件2-4】activity_main.xml文件核心代碼使用RelativeLayout實現(xiàn)3個按鈕在不同的位置顯示。<RelativeLayoutxmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><Buttonandroid:id="@+id/btn_one"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按鈕1"

android:layout_alignParentBottom="true"

android:layout_marginBottom="20dp"/>案例指定按鈕1與父控件底端對齊且位于距離父布局的下邊界20dp的位置2.5.1相對布局簡介

<Buttonandroid:id="@+id/btn_two"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按鈕2"android:layout_centerHorizontal="true"android:layout_marginTop="260dp"/>指定按鈕2在父布局中水平居中且位于距離父布局的上邊界260dp的位置2.5.1相對布局簡介<Buttonandroid:id="@+id/btn_three"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="按鈕3"android:layout_alignBottom="@id/btn_two"android:layout_marginBottom="100dp"android:layout_toRightOf="@id/btn_two"/></RelativeLayout>指定按鈕3位于按鈕2右側(cè)且距離按鈕2下邊界100dp的位置2.5.1相對布局簡介Android程序優(yōu)化屏幕適配時：這種情況下，設(shè)置控件與布局寬高時，建議優(yōu)先用match_parent或wrap_content，避免固定值，以防控件相互擠壓變形；特殊情況需用固定寬高時：這種情況下，設(shè)置控件與布局寬高時,可選擇px、pt、dp、sp四種單位，如android:layout_width="20dp"即表示控件寬度為20dp。布局和控件的寬度和高度

先定一個小目標！掌握相對布局的使用，能夠獨立實現(xiàn)音樂播放器界面效果2.5.2實戰(zhàn)演練——音樂播放器界面下面通過一個音樂播放器界面的案例來演示如何使用RelativeLayout放置界面上的控件。2.5.2實戰(zhàn)演練——音樂播放器界面音樂播放器界面2.5.2實戰(zhàn)演練——音樂播放器界面創(chuàng)建程序。創(chuàng)建一個名為MusicLayout的應(yīng)用程序，指定包名為cn.itcast.musiclayout。導入界面圖片。導入界面需要的圖片到drawable-hdpi文件夾中。步驟1步驟2實現(xiàn)音樂播放器界面效果放置界面控件。根布局中放置2個Button控件，放置1個RelativeLayout布局，相對布局中放置3個Button控件。步驟32.5.2實戰(zhàn)演練——音樂播放器界面表格布局2.6

先定一個小目標！掌握表格布局簡介，能夠運用語法格式與常用屬性進行界面布局2.6.1表格布局簡介2.6.1表格布局簡介表格布局概念：通過表格形式來管理控件的布局。特點：采用行、列形式組織界面控件。無需聲明具體行數(shù)和列數(shù)。通過添加組件動態(tài)確定表格的結(jié)構(gòu)。2.6.1表格布局簡介基礎(chǔ)語法：在XML布局文件中定義TableLayout的基本語法格式如下。<TableLayoutxmlns:android="/apk/res/android"

屬性="屬性值"><TableRow>UI控件

</TableRow>UI控件

......</TableLayout>2.6.1表格布局簡介TableLayout的常用屬性TableLayout繼承自LinearLayout，因此它完全支持LinearLayout所支持的屬性，此外，它還有其他的常用屬性。屬性名稱功能描述android:stretchColumns設(shè)置可拉伸的列，如android:stretchColumns="0"，表示第1列可拉伸android:shrinkColumns設(shè)置可收縮的列，如android:shrinkColumns="1,2"，表示第2列、第3列可收縮android:collapseColumns設(shè)置可隱藏的列，如android:collapseColumns="0"，表示第1列可隱藏2.6.1表格布局簡介TableLayout中的控件有兩個常用屬性，即android:layout_column與android:layout_span，分別用于設(shè)置控件顯示的位置、占據(jù)的列數(shù)。TableLayout中控件的常用屬性屬性名稱功能描述android:layout_column設(shè)置該控件顯示的位置，如android:layout_column="1"，表示在第2個位置顯示android:layout_span設(shè)置該控件占據(jù)的列數(shù)，默認為1列【文件2-6】activity_main.xml文件核心代碼使用TableLayout實現(xiàn)3行3列的表格。<TableLayoutxmlns:android="/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:stretchColumns="2">案例設(shè)置TableLayout的第3列可拉伸（下標值從0開始計算）2.6.1表格布局簡介

先定一個小目標！掌握表格布局的使用，能夠獨立實現(xiàn)計算器界面效果2.6.2實戰(zhàn)演練——計算器界面下面通過一個計算器界面的案例，演示如何使用TableLayout實現(xiàn)計算器界面效果。2.6.2實戰(zhàn)演練——計算器界面計算器界面2.6.2實戰(zhàn)演練——計算器界面計算器界面通常包含5行按鈕：前4行每行有4個按鈕。最后1行有2個按鈕。創(chuàng)建程序。創(chuàng)建一個名為Calculator的應(yīng)用程序，指定包名為cn.itcast.calculator。創(chuàng)建表格中每行的樣式。創(chuàng)建表格中每行的樣式rowStyle。步驟1步驟2實現(xiàn)計算器界面效果2.6.2實戰(zhàn)演練——計算器界面<stylename="rowStyle"><itemname="android:layout_width">wrap_content</item><itemname="android:layout_height">wrap_content</item><itemname="android:layout_weight">1</item></style>實現(xiàn)計算器界面效果2.6.2實戰(zhàn)演練——計算器界面創(chuàng)建表格中按鈕的樣式。創(chuàng)建表格中按鈕的樣式btnStyle。步驟3放置界面控件。根布局TableLayout中放置5個TableRow布局，在每個TableRow布局中放置4個Button控件；最后1個TableRow布局中放置2個Button控件。步驟4<stylename="btnStyle"><itemname="android:layout_width">wrap_content</item><itemname="android:layout_height">match_parent</item><itemname="android:textSize">20sp</item></style>幀布局2.7

先定一個小目標！掌握幀布局簡介，能夠運用語法格式與常用屬性進行界面布局2.7.1幀布局簡介2.7.1幀布局簡介幀布局概念：幀布局是一種層疊式布局。特點：創(chuàng)建空白區(qū)域，子控件逐幀層疊。后添加的控件顯示