1.2 Android布局管理
Android系统应用程序的设计模式采用MVC模式，即把应用程序分为业务模型层（Model）、表现层（View）、控制层（Control）。按照这种模式，界面布局为表现层；Activity控制程序为控制层，将应用程序的界面设计与功能控制设计分离，从而可以单独地修改用户界面。
Android系统的布局管理指的是在XML布局文件中设置组件的大小、间距、排列及对齐方式等。Android系统中常用的布局类型有LinearLayout、FrameLayout、TableLayout、RelativeLayout、GridLayout、ConstraintLayout。
1.2.1 布局文件的规范与重要属性
1．布局文件的规范
Android系统应用程序的XML布局文件有以下规范。
（1）应存放在res/layout目录，其扩展名为.xml。
（2）根节点通常是一个布局方式，在根节点内可以添加组件作为节点。
（3）根节点必须包含一个命名空间：
xmlns:android=http://schemas.android.com/apk/res/android
（4）如果要在Java程序中控制布局的组件，则必须为相应的组件定义一个ID，其定义格式为：
android:id="@id/<组件ID>"
（5）文件名只能由小写英文字母、数字和下划线组成，并且只能以小写字母开头。
2．布局文件的重要属性
（1）设置组件大小的属性
wrap_content：根据组件内容的大小来决定组件的大小。
match_parent：使组件填充所在容器的所有空间。
（2）设置组件大小的单位
px（piexls，像素）：即屏幕上的发光点。
dp（或dip）设备独立像素：一种支持多分辨率设备的抽象单位。
sp（scaled pixels，比例像素）：设置字体大小。
（3）设置组件的对齐方式
对齐方式由android:gravity属性控制，其属性值有top、bottom、left、right、center_horizontal、center_vertical等。
1.2.2 常见的布局方式
布局文件可以单独创建，创建时需要输入文件名，文件名的字母必须全部小写，然后选择布局类型。如图1-6所示，创建了一个新的线性布局文件，文件名是activity_second.xml。
图1-6 新建XML布局文件
1．线性布局
线性布局（LinearLayout）将组件按照水平或垂直方向排列。在XML布局文件中，由根元素LinearLayout来标识线性布局，由android:orientation属性来设置排列方向，其属性值有水平（horizontal）和垂直（vertical）两种。
（1）设置为水平方向：android:orientation="horizontal"。
（2）设置为垂直方向：android:orientation="vertical"。
【例1-1】线性布局应用示例。
设计一个有5个按钮的线性布局，其控件层级关系如图1-7所示。
图1-7 线性布局的控件层级关系
布局文件activity_main1.xml的源代码如下：
1. <?xml version="1.0" encoding="utf-8"?>
2. <Linear Layout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical" >
6. <Button
7. android:id="@+id/m Button1"
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:text="1" />
11. <Button
12. android:id="@+id/m Button2"
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:text="2" />
16. <Button
17. android:id="@+id/m Button3"
18. android:layout_width="wrap_content"
19. android:layout_height="wrap_content"
20. android:text="3" />
21. <Button
22. android:id="@+id/m Button4"
23. android:layout_width="wrap_content"
24. android:layout_height="wrap_content"
25. android:text="4" />
26. <Button
27. android:id="@+id/m Button4"
28. android:layout_width="wrap_content"
29. android:layout_height="wrap_content"
30. android:text="5" />
31. </Linear Layout>
程序运行结果如图1-8所示。
图1-8 垂直方向线性布局示例结果
将代码中第5行的“android:orientation="vertical"”（垂直方向的线性布局）更改为“android:orientation ="horizontal"”（水平方向的线性布局），则运行结果如图1-9所示。
图1-9 水平方向线性布局示例结果
这5个按钮改为水平方向排列后，有一个按钮“5”被挤到了界面以外。在布局设计时必须考虑屏幕的宽度，不然就会发生这种意外。
2．帧布局
帧布局（Frame Layout）是将组件放置到左上角位置，当添加多个组件时，后面的组件将遮盖之前的组件。在XML布局文件中，由根元素Frame Layout来标识帧布局。
【例1-2】帧布局应用示例。
将准备的图像文件mm11.jpg复制到drawable目录下，然后新建图1-10所示的布局。
图1-10 布局的控件层级关系和属性
布局文件activity_main2.xml的源代码如下：
<?xml version="1.0" encoding="utf-8"?>
<Frame Layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:foreground="@drawable/logo"
android:foreground Gravity="right|top">
<TextView
android:id="@+id/txt"
android:layout_width="350dp"
android:layout_height="200dp"
android:background="@color/color Accent" />
<TextView
android:id="@+id/txt2"
android:layout_width="250dp"
android:layout_height="150dp"
android:background="@color/color Primary"
android:text="后添加的文本框"
android:text Size="24sp" />
</Frame Layout>
修改控制文件Main Activity.java的布局文件调用，这非常重要。
package com.example.chap01;
import android.os.Bundle;
import android.support.v7.app.App Compat Activity;
public class Main Activity extends App Compat Activity
{
@Override
public void onCreate(Bundle saved Instance State)
{
super.onCreate(saved Instance State);
set Content View(R.layout.activity_main2);// 修改布局文件调用
}
}
程序运行结果如图1-11所示，后添加的文本框组件遮挡了之前的图像。
图1-11 帧布局示例结果
3．表格布局
表格布局（Table Layout）是将页面划分成由行和列构成的单元格，由根元素Table Layout来标识。表格的行由<Table Row>…</Table Row>定义。组件放置时，由android:layout_column指定列序号。表格布局的3个常用属性如下。
（1）android:collapse Columns：设置需要被隐藏的列序号。
（2）android:shrink Columns：设置允许被收缩的列序号。
（3）android:stretch Columns：设置允许被拉伸的列序号。
【例1-3】表格布局应用示例。
设计一个3行4列的表格布局，如图1-12所示。
图1-12 表格布局
将准备好的图像文件mmx.jpg复制到res\drawable目录下。
布局文件activity_main3.xml的源代码如下：
<?xml version="1.0" encoding="utf-8"?>
<Table Layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Table Row>
<Image View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:src Compat="@drawable/mmx" />
<Image View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:src Compat="@drawable/mmx" />
</Table Row>
<Table Row>
<Image View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:src Compat="@drawable/mmx"
android:layout_column="1"/>
<Image View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:src Compat="@drawable/mmx"
android:layout_column="2"/>
</Table Row>
<Table Row>
<Image View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:src Compat="@drawable/mmx"
android:layout_column="3"/>
</Table Row>
</Table Layout>
4．相对布局
相对布局（Relative Layout）是采用相对于其他组件的位置的布局方式。在相对布局中，通过指定ID关联其他组件，从而以右对齐、上对齐、下对齐或屏幕中央对齐等方式来排列组件。
在XML布局文件中，由根元素Relative Layout来标识相对布局。
【例1-4】应用相对布局设计一个图片和4个按钮，如图1-13所示。
图1-13 相对布局
布局文件activity_main4.xml的源代码如下：
<?xml version="1.0" encoding="utf-8"?>
<Relative Layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/Relative Layout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- 这个是在容器中央 -->
<Image View
android:id="@+id/img"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_center In Parent="true"
android:src="@drawable/abc"
/>
<!-- 在图片的左边 -->
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_to Left Of="@id/img"
android:layout_center Vertical="true"
android:text="左边"
/>
<!-- 在图片的右边 -->
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_to Right Of="@id/img"
android:layout_center Vertical="true"
android:text="右边"
/>
<!-- 在图片的上面-->
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/img"
android:layout_center Horizontal="true"
android:text="上面"
/>
<!-- 在图片的下面 -->
<Button
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/img"
android:layout_center Horizontal="true"
android:text="下面"
/>
</Relative Layout>
5．网格布局
网格布局（Grid Layout）把设置区域划分为若干行和列的网格，网格中的一个组件可以占据多行或多列。应用网络布局的属性可以设置组件在网络中的大小和摆放方式。
网络布局的主要属性如下。
（1）alignment Mode：设置布局管理器的对齐方式。
（2）column Count：设置网格列的数量。
（3）row Count：设置网格行的数量。
（4）layout_column Span：设置组件占据的列数。
（5）layout_row Span：设置组件占据的行数。
常用的单元格属性如下。
（1）layout_column：指定该单元格在第几列显示。
（2）layout_row：指定该单元格在第几行显示。
（3）layout_column Span：指定该单元格占据的列数。
（4）layout_row Span：指定该单元格占据的行数。
（5）layout_gravity：指定该单元格在容器中的位置。
（6）layout_column Weight：设置列权重。
（7）layout_row Weight：设置行权重。
【例1-5】应用网格布局设计一个计算器界面。
计算器的设计界面如图1-14所示。在界面设计区域中设置一个6行4列的网格布局，第一行为显示数据的文本标签，第二行为清除数据的按钮和加号按钮，第3～6行共安排15个按钮，分别代表数字及运算符号。
图1-14 计算器的设计界面
布局文件activity_main5.xml的源代码如下：
<?xml version="1.0" encoding="utf-8"?>
<Grid Layout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:row Count="6"
android:column Count="4">
<!--文本标签-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column Span="4"
android:layout_margin Left="4px"
android:gravity="left"
android:text="0"
android:text Size="50dp"
/>
<Button
android:layout_column Weight="1"
android:layout_column Span="3"
android:text="清除"
android:text Size="26sp" />
<Button android:text="+" android:text Size="26sp" />
<Button android:text="1" android:text Size="26sp" />
<Button android:text="2" android:text Size="26sp" />
<Button android:text="3" android:text Size="26sp" />
<Button android:text="-" android:text Size="26sp" />
<Button android:text="4" android:text Size="26sp" />
<Button android:text="5" android:text Size="26sp" />
<Button android:text="6" android:text Size="26sp" />
<Button android:text="*" android:text Size="26sp" />
<Button android:text="7" android:text Size="26sp" />
<Button android:text="8" android:text Size="26sp" />
<Button android:text="9" android:text Size="26sp" />
<Button android:text="/" android:text Size="26sp" />
<Button
android:layout_height="wrap_content"
android:layout_column Span="2"
android:layout_column Weight="1"
android:text="0"
android:text Size="26sp" />
<Button android:text="." android:text Size="26sp" />
<Button android:text="=" android:text Size="26sp" />
</Grid Layout>
6．约束布局
在Android Studio 2.3版本中新建的Module中，默认的布局就是约束布局（Constraint Layout）。如图1-15所示，工作区中有两种预览，一种是设计预览，一种是蓝图。两者可以辅助进行布局预览。
添加约束十分简单，首先拖动一个Image View到蓝图中，然后单击选中，可以看到上下左右都出现了一个小圆圈，这个圆圈就是用来添加约束的。另外还在4个角出现了小矩形，是用来扩大或缩小控件的。
图1-15 约束布局案例
【例1-6】应用约束布局设计一大一小上下两张图片。
应用约束布局设计两张图片的放置效果如图1-15所示。
布局文件activity_main6.xml的源代码如下：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.Constraint Layout
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">
<Image View
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraint Left_to Left Of="parent"
app:layout_constraint Right_to Right Of="parent"
app:src Compat="@drawable/mm12" />
<Image View
android:id="@+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:src Compat="@mipmap/ic_launcher"
app:layout_constraint Left_to Left Of="parent"
app:layout_constraint Right_to Right Of="parent"
app:layout_constraint Top_to Top Of="parent"
android:layout_margin Top="380dp" />
</android.support.constraint.Constraint Layout>
工作区提供了很好的交互，读者只要多动手练习，就能掌握约束布局的属性控制。
介绍完常用布局类型，下面介绍布局里放置的常用组件，如文字、图片、按钮等组件。