Android5大布局方式

概述：在Android中，共有五种布局方式，分别是：LinearLayout （线性布局），RelativeLayout（相对布局），AbsoluteLayout（绝对布局），FrameLayout（帧布局），TableLayout（表格布局）

1、LinearLayout（线性布局）

每个元素占一行或者一列

LinearLayout可以是垂直布局（android:orientation="vertical"）或者水平布局（android:orientation="horizontal" ）

LinearLayout中有一个重要的子元素属性android:layout_weight，它用于描述该子元素在剩余空间中占有的大小比例，如水平布局时，只有一行，每个元素占一列，如果有两列，第一列android:layout_weight="1"第二列android:layout_weight="2"，那么第一列和第二列的宽度之比为2:1，宽度之比并不是简单的layout_weight的值反比。

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <TextView  android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#DDA0DD" android:text="@string/hello"/>
        <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">
            <TextView  android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#D2B48C" android:layout_weight="1" android:text="1"/>
            <TextView  android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#CFCFCF" android:layout_weight="2"  android:text="2"/>
        </LinearLayout>
    </LinearLayout>

效果：

2、RelativeLayout（相对布局）

相对布局按照各个元素之间的相对关系完成布局。

代码：

<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" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView android:id="@+id/text1" android:layout_width="50dp" android:layout_height="50dp" android:background="#BF3EFF" android:gravity="center" android:layout_alignParentBottom="true" android:text="1"/>
    <TextView android:id="@+id/text2" android:layout_width="50dp" android:layout_height="50dp" android:background="#FF6543" android:gravity="center" android:layout_above="@id/text1" android:layout_centerHorizontal="true" android:text="2"/>
    <TextView android:id="@+id/text3" android:layout_width="50dp" android:layout_height="50dp" android:background="#CD661D" android:gravity="center" android:layout_toLeftOf="@id/text2" android:layout_above="@id/text1" android:text="3"/>

</RelativeLayout>

效果：

3、AbsoluteLayout（绝对布局）

绝对布局方式很简单，主要属性就两个 layout_x 和 layout_y 分别定义 这个组件的绝对位置。 即，以屏幕左上角为（0，0）的坐标轴的x，y值，当向下或向右移动时，坐标值将变大。AbsoluteLayout 没有页边框，允许元素之间互相重叠（尽管不推荐）。通常不推荐使用绝对布局

代码：

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#BF3EFF" android:gravity="center" android:layout_x="50dp" android:layout_y="50dp" android:text="1"/>
        <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#FF6543" android:gravity="center" android:layout_x="25dp" android:layout_y="25dp" android:text="2"/>
        <TextView  android:layout_width="50dp" android:layout_height="50dp" android:background="#CD661D" android:gravity="center" android:layout_x="125dp" android:layout_y="125dp" android:text="3"/>
    </AbsoluteLayout>

效果：

4、FrameLayout（帧布局）

帧布局t是五大布局中最简单的一个布局，可以说成是层布局方式。在这个布局中，整个界面被当成一块空白备用区域，所有的子元素都不能被指定放置的位置，它们统统放于这块区域的左上角，并且后面的子元素直接覆盖在前面的子元素之上，将前面的子元素部分和全部遮挡。如下，第一个TextView被第二个TextView完全遮挡，第三个TextView遮挡了第二个TextView的部分位置。

代码：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#BF3EFF" android:gravity="center" android:text="1"/>
        <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="#FF6543" android:gravity="center" android:text="2"/>
        <TextView android:layout_width="50dp" android:layout_height="50dp" android:background="#CD661D" android:gravity="center" android:text="3"/>
    </FrameLayout>

效果：

5、TableLayout（表格布局）

适用于N行N列的布局格式。一个TableLayout由许多TableRow组成，一个TableRow就代表TableLayout中的一行。

　　TableRow是LinearLayout的子类，ablelLayout并不需要明确地声明包含多少行、多少列，而是通过TableRow，以及其他组件来控制表格的行数和列数， TableRow也是容器，因此可以向TableRow里面添加其他组件，没添加一个组件该表格就增加一列。如果想TableLayout里面添加组件，那么该组件就直接占用一行。在表格布局中，列的宽度由该列中最宽的单元格决定，整个表格布局的宽度取决于父容器的宽度（默认是占满父容器本身）。

TableLayout继承了LinearLayout，因此他完全可以支持LinearLayout所支持的全部XML属性，除此之外TableLayout还支持以下属性：

XML属性	相关用法	说明
andriod：collapseColumns	setColumnsCollapsed（int ，boolean）	设置需要隐藏的列的序列号，多个用逗号隔开
android：shrinkColumns	setShrinkAllColumns（boolean）	设置被收缩的列的序列号，多个用逗号隔开
android：stretchColimns	setSretchAllColumnds（boolean）	设置允许被拉伸的列的序列号，多个用逗号隔开

代码：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
            <TextView  android:background="#BF3EFF" android:gravity="center" android:padding="10dp" android:text="1"/>
            <TextView android:background="#FF6543" android:gravity="center" android:padding="10dp" android:text="2"/>
            <TextView  android:background="#CD661D" android:gravity="center" android:padding="10dp" android:text="3"/>
        </TableRow>
        <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
            <TextView  android:background="#FF6543" android:gravity="center" android:padding="10dp" android:text="2"/>
            <TextView  android:background="#BF3EFF" android:gravity="center" android:padding="10dp" android:text="1"/>
            <TextView android:background="#CD661D" android:gravity="center" android:padding="10dp" android:text="3"/>
        </TableRow>
        <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
            <TextView android:background="#CD661D" android:gravity="center" android:padding="10dp" android:text="3"/>
            <TextView  android:background="#FF6543" android:gravity="center" android:padding="10dp" android:text="2"/>
            <TextView  android:background="#BF3EFF" android:gravity="center" android:padding="10dp" android:text="1"/>
        </TableRow>
    </TableLayout>

效果：