Android5种布局类型

为了适应不同界面的风格，android为开发人员提供了5种常用布局，分别是LinearLayout(线性布局）、RelativeLayout(相对布局)、FrameLayout(帧布局)、TableLayout(表格布局)/AbsoluteLayout(绝对布局)。

1.LinearLayout(线性布局)

首先我们来介绍线性布局，线性布局是在实际开发中比较常用的，他主要以水平和垂直的方式来显示界面中的控件。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    >
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
       />
    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        />
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C"
        />

</LinearLayout>

首先是layout_width和layout_height这两个控件属性，这两个值可以设置为wrap_content(控件大小由控件内容大小变化而变化)和match_parent(填满父窗体由父容器决定控件大小)，也可以自定义大小。

改变btn3的layout_width的值使他变成match_parent：

改变三个按钮的layout_width的值，自定义为100dp、200dp、300dp:

同理layout_height也是可以一样根据自己的需求自己定义自己需要的高度大小。

之后是orientation一个关键的属性，用于控制控件的排列方向，它有两个值 vertical表示线性布局垂直显示，horizontal表示线性布局水平显示。

将orientation的值变为vertical就会变成水平显示：

你也可以根据需要使用嵌套线性布局即在线性布局中再使用线性布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    >
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
       />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B"
            />
        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C"
            />
    </LinearLayout>

</LinearLayout>

2.相对布局

相对布局是通过相对定位的方式指定控件位置，即以其它控件或父容器为参照物，摆放控件位置。

				表1 设置控件间距的属性

控件属性	功能描述
android:layout_marginTop	设置当前控件上边界与某控件的距离
android:layout_marginBottom	设置当前控件底边界与某控件的距离
android:layout_marginLeft	设置当前控件左边界与某控件的距离
android:layout_marginRight	设置当前控件右边界与某控件的距离

			表2 设置控件位置的属性

控件属性	功能描述
android:layout_centerInparent	设置当前控件位置位于父布局的中央位置
android:layout_centerVertical	设置当前控件位置位于父布局的垂直居中位置
android:layout_centerHrizontal	设置当前控件位置位于父布局的水平居中位置
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 设置布局内边距的属性

布局属性	功能描述
android:paddingTop	设置布局顶部内边距的距离
android:paddingBottom	设置布局底部内边距的距离
android:paddingLeft	设置布局左边内边距的距离
android:paddingRight	设置布局右边内边距的距离
android:padding	设置布局四周内边距的距离

熟练的掌握以上的表，就能很好的运用相对布局了。下面通过示例来使用以上表中的内容。

<?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:paddingTop="100dp"
    >
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        android:layout_alignParentTop="true"
       />
        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B"
            android:layout_centerInParent="true"
            />
        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C"
            android:layout_alignLeft="@+id/btn2"
            android:layout_marginLeft="50dp"
            android:layout_above="@id/btn2"
            />
</RelativeLayout>

父布局与顶部边距为100dp,A与父控件顶端对齐，B位置位于父布局的中央位置，C的左边界与B控件的左边界对齐，C左边界与B控件的距离为50dp，C位于B控件的上方。

3.帧布局

帧布局是Android中最简单的一种布局，该布局为每个加入其中的控件创建一个空白区域（称为一帧，每个控件占据一帧。

			表4 FrameLayout 属性

布局属性	功能描述
android:foreground	设置帧布局容器的前景图像（始终在所有子控件之上）
android:foregroundGravity	设置前景图像显示位置

通过一个例子来熟悉一下帧布局:

<?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="@drawable/b"
    android:foregroundGravity="center"
    >
   <Button
        android:id="@+id/btn1"
        android:layout_width="300dp"
        android:layout_height="450dp"
        android:text="A"
       />
        <Button
            android:id="@+id/btn2"
            android:layout_width="150dp"
            android:layout_height="100dp"
            android:text="B"
            />
        <Button
            android:id="@+id/btn3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="C"
            />
</FrameLayout>

从运行结果可以看出，按钮都被前景图片给挡住了，所以要注意在使用帧布局的时候，一定要记住前景图片会始终保持在最上层。

当我们把前景图删除后：按钮就可以显示了。

4.表格布局

表格布局是以表格的形式排列空间的，通过行和列将界面划分为多个单元格，每个单元格都可以添加控件。

			表5 TableLayout 布局属性

布局属性	功能描述
android:stretchColumns	拉伸列
android:shrinkColumns	收缩列
android:collapseColumns	隐藏列

		表6 TableLayout 控件属性

控件属性	功能描述
android：layout_column	设置单元格显示位置
android：layout_span	设置单元格占据几行

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1"
    >
    <TableRow>
        <Button
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="A"
            />
        <Button
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="B"
            />
    </TableRow>
    <TableRow>

        <Button
            android:id="@+id/btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="D"
            />
        <Button
            android:id="@+id/btn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="E"
            />
        <Button
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C"
            />
    </TableRow>
</TableLayout>

上述定义了一个2行3列的表格布局，第1列被拉伸。
通过TableRow来布局每一行。

设置collapseColumns可以使第一列隐藏

   android:collapseColumns="1"

通过是设置layout_span可以设置控件占据大小。

    <Button
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="2"
        android:layout_span="2"
        android:text="E"
        />

5.绝对布局

绝对布局是通过设定X,Y的值来控制控件的位置。

			表7 AbsoluteLayout 属性		

布局属性	功能描述
android:layout_x	设置X坐标
android:layout_y	设置Y坐标

设置控件ABC的位置分别位于<100,100>,<100,200>,<300,300>处。

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="100dp"
        android:layout_y="100dp"
        android:text="A"
        />
    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="100dp"
        android:layout_y="200dp"
        android:text="B"
        />
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="300dp"
        android:layout_y="300dp"
        android:text="C"
        />
</AbsoluteLayout>

通过上述例子可以发现绝对布局就2个属性，想要掌握一很容易但是想要和好的设置控件在自己想要的位置就要自己一点一点的去慢慢的调整了。

总结

通过上述5种布局的了解，可以发现布局其实不难，只要记住每种布局所含有的属性，然后根据自己的需求设置自己想要的值，就可以通过布局设置出让自己满意的界面了，但是想要做出比较好的布局效果还是要善于使用嵌套布局。

参考文献：Android移动开发基础案例教程

作者：罗庆辉，原文网址