目錄
目標
- 了解View與ViewGroup的簡介，能夠說出View與ViewGroup的作用和關聯
- 掌握界面布局在XML文件中與Java代碼中的編寫方式，能夠獨立編寫界面布局
- 掌握編寫簡單Android程序的步驟，能夠編寫一個HelloWorld程序
- 掌握常見界面布局的特點及使用，能夠搭建簡單的界面布局
在Android應用中，界面由布局和控件組成。布局好比是建築里的框架，控件相當於建築里的磚瓦。針對界面中控件不同的排列位置，Android定義了相應的布局進行管理。本章將針對Android界面中常見的布局進行詳細地講解。
一、View視圖
所有的UI元素都是通過View與ViewGroup構建的，對於一個Android應用的用戶界面來說，ViewGroup作為容器盛裝界面中的控件，它可以包含普通的View控件，也可以包含ViewGroup。
二、界面布局編寫方式
在實現Android界面效果之前，我們首先需要編寫界面布局，界面布局的編寫方式有2種，第1種是在XML文件中編寫布局，第2種是在Java代碼中編寫布局。
- 在XML文件中編寫布局：推薦此種方式編寫布局
有效的將界面中的布局代碼與Java代碼隔離，使程序的結構更加清晰。
- 在Java代碼中編寫布局
在Android中所有布局和控件的對象都可以通過new關鍵字創建出來，將創建的View控件添加到ViewGroup布局中，從而實現View控件在布局界面中顯示。
2.1 在XML文件中編寫布局
<?xml version="1.0" encoding="utf-8"?>
<!--相對布局繼承自ViewGroup-->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!--TextView控件繼承自View-->
<!--設置文字的樣式-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="使用XML布局文件控制UI界面"
android:textColor="#ff0000"
android:textSize="18sp"
android:layout_centerInParent="true"/>
</RelativeLayout>
2.2 在Java代碼中編寫布局
RelativeLayout relativeLayout = new RelativeLayout(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT,
RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.CENTER_IN_PARENT); //設置布局中的控件居中顯示
TextView textView = new TextView(this); //創建TextView控件
textView.setText("Java 代碼實現界面布局"); //設置TextView的文字內容
textView.setTextColor(Color.RED); //設置TextView的文字顏色
textView.setTextSize(18); //設置TextView的文字大小
relativeLayout.addView(textView, params); //添加TextView對象和TextView的布局屬性
setContentView(relativeLayout); //設置在Activity中顯示RelativeLayout
三、界面布局的通用屬性
Android系統提供的四種常用布局直接或者間接繼承自ViewGroup，因此這四種常用布局也支持在ViewGroup中定義屬性，這些屬性可以看作是布局的通用屬性。這些通用屬性如下表所示。
| 屬性名稱 | 功能描述 |
|---|---|
| android:id | 設置布局的標識 |
| android:layout_width | 設置布局的寬度 |
| android: layout_height | 設置布局的寬度 |
| android:background | 設置布局的背景 |
| android:layout_margin | 設置當前布局與屏幕邊界或與周圍控件的距離 |
| android:padding | 設置當前布局與該布局中控件的距離 |
四、線性布局
4.1 LinearLayout
LinearLayout（線性布局）通常指定布局內的子控件水平或者豎直排列。
在XML布局文件中定義線性布局的基本語法格式如下：
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
屬性 = "屬性值"
......>
</LinearLayout>
除了布局的通用屬性外，LinearLayout布局還有兩個比較常用的屬性，分別是android:orientation和android:layout_weight，具體介紹如下所示。
| 屬性名稱 | 功能描述 |
|---|---|
| android:orientation | 設置布局內控件的排列順序 |
| android:layout_weight | 在布局內設置控件權重，屬性值可直接寫int值 |
- 屬性android:orientation的值為可選值，可選值為vertical和horizontal。
（1） vertical：表示LinearLayout布局內控件依次從上到下豎直排列。
（2）horizontal：表示LinearLayout布局內控件依次從左到右水平排列。
- 屬性android:layout_weight：
（1）該屬性被稱為權重，通過設置該屬性值，可使布局內的控件按照權重比顯示大小。
（2）在進行屏幕適配時起到關鍵作用。
4.2 案例步驟
接下來，我們通過一個案例來演示如何使用android:layout_weight屬性為LinearLayout中的控件分配權重。本案例中使用了線性布局LinearLayout，在線性布局中放置了3個按鈕，這3個按鈕的寬度在水平方向的比重是1:1:2，線性布局界面的效果如下圖所示。
STEP 01 創建程序
創建一個名為LinearLayout的應用程序，指定包名為cn.it.linearlayout。
STEP 02 放置界面控件
在activity_main.xml文件的LinearLayout布局中放置3個Button控件，分別用於顯示按鈕1、按鈕2和按鈕3。
<?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 ="horizontal"
tools:context=".MainActivity">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="按鈕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 >
注 意
LinearLayout布局中的android:layout_width屬性值不可設為wrap_content。
這是因為LinearLayout的優先級比Button高，如果設置為wrap_content，則Button控件的android:layout_weight屬性會失去作用。
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android: layout_weight ="2"/>
注意：當控件使用權重屬性時，布局寬度屬性值通常設置為0dp。
4.3 實戰演練—仿動物連連看游戲界面
為了讓大家更好地理解線性布局在實際開發中的應用，接下來通過一個仿動物連連看游戲界面的案例來演示如何使用線性布局來排列界面上的動物和空格子，界面效果如下圖所示。
res\values\styles.xml下創建名為btnStyle的樣式
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="btnStyle">
<item name="android:layout_width">70dp</item>
<item name="android:layout_height">70dp</item>
<item name="android:layout_marginRight">15dp</item>
</style>
</resources>
res\layout\activity_main.xml下放置界面控件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="@drawable/animal_bg"
android:orientation="vertical"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="200dp"
android:orientation="horizontal">
<Button
style="@style/btnStyle"
android:background="@drawable/three" />
<Button
style="@style/btnStyle"
android:background="@drawable/four" />
<Button
style="@style/btnStyle"
android:background="@drawable/box" />
<Button
style="@style/btnStyle"
android:background="@drawable/five" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:orientation="horizontal">
<Button
style="@style/btnStyle"
android:background="@drawable/one" />
<Button
style="@style/btnStyle"
android:background="@drawable/two" />
<Button
style="@style/btnStyle"
android:background="@drawable/box" />
<Button
style="@style/btnStyle"
android:background="@drawable/four" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:orientation="horizontal">
<Button
style="@style/btnStyle"
android:background="@drawable/five" />
<Button
style="@style/btnStyle"
android:background="@drawable/box" />
<Button
style="@style/btnStyle"
android:background="@drawable/three" />
<Button
style="@style/btnStyle"
android:background="@drawable/two" />
</LinearLayout>
</LinearLayout>
五、相對布局
5.1 RelativeLayout
RelativeLayout（相對布局）通過相對定位的方式指定子控件的位置。在XML布局文件中定義相對布局時使用
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
屬性 = "屬性值"
......>
</RelativeLayout>
在RelativeLayout中的子控件具備一些屬性，用於指定子控件的位置，這些子控件的屬性如下表所示。
| 屬性名稱 | 功能描述 |
|---|---|
| android:layout_centerInParent | 設置當前控件位於父布局的中央位置 |
| android:layout_centerVertical | 設置當前控件位於父布局的垂直居中位置 |
| android:layout_centerHorizontal | 設置當前控件位於父控件的水平居中位置 |
| android:layout_above | 設置當前控件位於某控件上方 |
| android:layout_below | 設置當前控件位於某控件下方 |
| android:layout_toLeftOf | 設置當前控件位於某控件左側 |
| android:layout_toRightOf | 設置當前控件位於某控件右側 |
| android:layout_alignParentTop | 設置當前控件是否與父控件頂端對齊 |
| android:layout_alignParentLeft | 設置當前控件是否與父控件左對齊 |
| android:layout_alignParentRight | 設置當前控件是否與父控件右對齊 |
| android:layout_alignParentBottom | 設置當前控件是否與父控件底端對齊 |
| android:layout_alignTop | 設置當前控件的上邊界與某控件的上邊界對齊 |
| android:layout_alignBottom | 設置當前控件的下邊界與某控件的下邊界對齊 |
| android:layout_alignLeft | 設置當前控件的左邊界與某控件的左邊界對齊 |
| android:layout_alignRight | 設置當前控件的右邊界與某控件的右邊界對齊 |
接下來，我們通過一個案例來演示如何在相對布局中指定3個按鈕的位置。本案例中使用了相對布局RelativeLayout，在相對布局中放置了3個按鈕，這3個按鈕以不同的位置進行顯示，相對布局界面的效果如下圖所示。
（1）創建程序
創建一個名為RelativeLayout的應用程序，指定包名為cn.itcast.relativelayout。
（2）放置界面控件
在activity_main.xml文件的RelativeLayout布局中放置3個Button控件， 分別表示“按鈕1”、“按鈕2”和“按鈕3”。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android: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"/>
<Button
android: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"/>
<Button
android: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>
注意：在RelativeLayout布局中定義的控件默認與父布局左上角對齊。
5.2 實戰演練—音樂播放器界面
為了讓大家更好地理解相對布局在實際開發中的應用，接下來通過一個音樂播放器界面的案例來演示如何使用相對布局來放置界面上的控件，界面效果如下圖所示。
res\layout\activity_main.xml下放置界面控件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/music_bg">
<!--圖片-->
<Button
android:id="@+id/btn_icon"
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="150dp"
android:background="@drawable/music_icon" />
<!--進度條-->
<Button
android:id="@+id/btn_progress"
android:layout_width="300dp"
android:layout_height="10dp"
android:layout_below="@id/btn_icon"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:background="@drawable/progress_icon" />
<!--進度條下的三個按鈕-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/btn_progress"
android:layout_marginTop="35dp"
android:gravity="center_horizontal">
<Button
android:id="@+id/btn_left"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@drawable/left_icon" />
<Button
android:id="@+id/btn_mid"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="50dp"
android:layout_toRightOf="@id/btn_left"
android:background="@drawable/middle_icon" />
<Button
android:id="@+id/btn_right"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="50dp"
android:layout_toRightOf="@id/btn_mid"
android:background="@drawable/right_icon" />
</RelativeLayout>
</RelativeLayout>
六、表格布局
6.1 TableLayout
TableLayout（表格布局）采用行、列的形式來管理控件，通過在TableLayout布局中添加TableRow布局或控件來控制表格的行數，可以在TableRow布局中添加控件來控制表格的列數。定義的基本語法格式如下所示。
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
屬性 = "屬性值">
<TableRow>
UI控件
</TableRow>
UI控件
......
</TableLayout>
TableLayout繼承自LinearLayout，因此它完全支持LinearLayout所支持的屬性，此外它還有其他的常用屬性，這些常用屬性如下表所示。
布局屬性
| 屬性名稱 | 功能描述 |
|---|---|
| android:stretchColumns | 設置該列被拉伸 |
| android:shrinkColumns | 設置該列被收縮 |
| android:collapseColumns | 設置該列被隱藏 |
控件的常用屬性
| 屬性名稱 | 功能描述 |
|---|---|
| android:layout_column | 設置該單元顯示位置 |
| android:layout_span | 設置該單元格占據幾行，默認為1行 |
接下來，我們通過一個案例來講解如何設置3行3列的表格。本案例中使用了表格布局TableLayout，在表格布局中放置了5個按鈕，將這5個按鈕按照3行3列的形式進行排列，界面的效果如下圖所示。
（1）創建程序
創建一個名為TableLayout的應用程序，指定包名為cn.itcast.tablelayout。
（2）放置界面控件
在activity_main.xml文件的TableLayout布局中放置3個TableRow布局，在TableRow布局中添加不同數量的按鈕。
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:stretchColumns="2" >
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:text="按鈕1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="按鈕2" />
</TableRow>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:text="按鈕3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:text="按鈕4" />
</TableRow>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:text="按鈕5" />
</TableRow>
</TableLayout>
6.2 實戰演練—計算器界面
接下來我們通過表格布局TableLayout來搭建一個計算器界面，界面效果如下圖所示。
res\layout\activity_main.xml下放置界面控件
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*">
<TableRow
android:id="@+id/tr_one"
style="@style/rowStyle"
android:layout_marginTop="200dp">
<Button
style="@style/btnStyle"
android:text="C" />
<Button
style="@style/btnStyle"
android:text="←" />
<Button
style="@style/btnStyle"
android:text="+" />
<Button
style="@style/btnStyle"
android:text="-" />
</TableRow>
<TableRow
android:id="@+id/tr_two"
style="@style/rowStyle">
<Button
style="@style/btnStyle"
android:text="7" />
<Button
style="@style/btnStyle"
android:text="8" />
<Button
style="@style/btnStyle"
android:text="9" />
<Button
style="@style/btnStyle"
android:text="x" />
</TableRow>
<TableRow
android:id="@+id/tr_three"
style="@style/rowStyle">
<Button
style="@style/btnStyle"
android:text="6" />
<Button
style="@style/btnStyle"
android:text="5" />
<Button
style="@style/btnStyle"
android:text="4" />
<Button
style="@style/btnStyle"
android:text="/" />
</TableRow>
<TableRow
android:id="@+id/tr_four"
style="@style/rowStyle">
<Button
style="@style/btnStyle"
android:text="1" />
<Button
style="@style/btnStyle"
android:text="2" />
<Button
style="@style/btnStyle"
android:text="3" />
<Button
style="@style/btnStyle"
android:text="." />
</TableRow>
<TableRow
android:id="@+id/tr_five"
style="@style/rowStyle">
<Button
style="@style/btnStyle"
android:layout_span="2"
android:text="0" />
<Button
style="@style/btnStyle"
android:layout_span="2"
android:text="=" />
</TableRow>
</TableLayout>
七、幀布局
7.1 幀布局FrameLayout
FrameLayout（幀布局）用於在屏幕上創建一塊空白區域，添加到該區域中的每個子控件占一幀，這些幀會一個一個疊加在一起，后加入的控件會疊加在上一個控件上層。默認情況下，幀布局中的所有控件會與左上角對齊。在XML布局文件中定義FrameLayout的基本語法格式如下所示。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
屬性 ="屬性值">
</FrameLayout>
幀布局除了前面小節介紹的通用屬性外，還有兩個特殊屬性，FrameLayout的2個特殊屬性如下表所示。
| 屬性名稱 | 功能描述 |
|---|---|
| android:foreground | 設置幀布局容器的前景圖像（始終在所有子控件之上） |
| android:foregroundGravity | 設置前景圖像顯示的位置 |
接下來，我們通過一個案例來講解如何在幀布局中使用屬性android:foreground和android:foregroundGravity指定控件位置。本案例中使用了幀布局FrameLayout，在幀布局中放置了2個按鈕，分別是按鈕1和按鈕2，按鈕2在按鈕1的上一層進行顯示，幀布局界面的效果如下圖所示。
創建程序
創建一個名為FrameLayout的應用程序，指定包名為cn.itcast.framelayout。
放置界面控件
在activity_main.xml文件的FrameLayout布局中放置2個Button控件，分別用於顯示按鈕1和按鈕2。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foreground="@mipmap/ic_launcher"
android:foregroundGravity="left" >
<Button
android:layout_width="300dp"
android:layout_height="450dp"
android:text="按鈕1" />
<Button
android:layout_width="200dp"
android:layout_height="200dp"
android:text="按鈕2" />
</FrameLayout>
7.2 實戰演練—霓虹燈界面
接下來我們通過幀布局FrameLayout來搭建一個霓虹燈界面，界面效果如下圖所示。
res\layout\activity_main.xml下放置界面控件
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/btn_one"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:background="#ff0000" />
<Button
android:id="@+id/btn_two"
android:layout_width="220dp"
android:layout_height="220dp"
android:layout_gravity="center"
android:background="#00ff00" />
<Button
android:id="@+id/btn_three"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_gravity="center"
android:background="#0000ff" />
<Button
android:id="@+id/btn_four"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:background="#ff1243" />
<Button
android:id="@+id/btn_five"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:background="#324678" />
</FrameLayout>