CH2-Android常见界面布局_android仿动物连连看游戏界面

目标

1. 了解View与ViewGroup的简介，能够说出View与ViewGroup的作用和关联
2. 掌握界面布局在XML文件中与Java代码中的编写方式，能够独立编写界面布局
3. 掌握编写简单Android程序的步骤，能够编写一个HelloWorld程序
4. 掌握常见界面布局的特点及使用，能够搭建简单的界面布局

​ 在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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
1
2
3
4
5
6
7
8
9
10
11

三、界面布局的通用属性

​

​ Android系统提供的四种常用布局直接或者间接继承自ViewGroup，因此这四种常用布局也支持在ViewGroup中定义属性，这些属性可以看作是布局的通用属性。这些通用属性如下表所示。

四、线性布局

4.1 LinearLayout

​ LinearLayout（线性布局）通常指定布局内的子控件水平或者竖直排列。

在XML布局文件中定义线性布局的基本语法格式如下：

<LinearLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
        属性 = "属性值"
        ......>
</LinearLayout>
1
2
3
4
5

​ 除了布局的通用属性外，LinearLayout布局还有两个比较常用的属性，分别是android:orientation和android:layout_weight，具体介绍如下所示。

• 属性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 >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

注 意

​ 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"/>
1
2
3
4

注意：当控件使用权重属性时，布局宽度属性值通常设置为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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

五、相对布局

5.1 RelativeLayout

​ RelativeLayout（相对布局）通过相对定位的方式指定子控件的位置。在XML布局文件中定义相对布局时使用标签，基本语法格式如下所示。

<RelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        属性 = "属性值"
        ......>
</RelativeLayout>
1
2
3
4
5

​ 在RelativeLayout中的子控件具备一些属性，用于指定子控件的位置，这些子控件的属性如下表所示。

​ 接下来，我们通过一个案例来演示如何在相对布局中指定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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

注意：在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

六、表格布局

6.1 TableLayout

​ TableLayout（表格布局）采用行、列的形式来管理控件，通过在TableLayout布局中添加TableRow布局或控件来控制表格的行数，可以在TableRow布局中添加控件来控制表格的列数。定义的基本语法格式如下所示。

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
       属性 = "属性值">
       <TableRow>
             UI控件
       </TableRow>
        UI控件
        ......
</TableLayout>
1
2
3
4
5
6
7
8

​ TableLayout继承自LinearLayout，因此它完全支持LinearLayout所支持的属性，此外它还有其他的常用属性，这些常用属性如下表所示。

布局属性

控件的常用属性

​ 接下来，我们通过一个案例来讲解如何设置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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

七、帧布局

7.1 帧布局FrameLayout

​ FrameLayout（帧布局）用于在屏幕上创建一块空白区域，添加到该区域中的每个子控件占一帧，这些帧会一个一个叠加在一起，后加入的控件会叠加在上一个控件上层。默认情况下，帧布局中的所有控件会与左上角对齐。在XML布局文件中定义FrameLayout的基本语法格式如下所示。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      属性 ="属性值">
</FrameLayout>
1
2
3

​ 帧布局除了前面小节介绍的通用属性外，还有两个特殊属性，FrameLayout的2个特殊属性如下表所示。

​ 接下来，我们通过一个案例来讲解如何在帧布局中使用属性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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34