Android之六大布局

Android有常见的五大布局FrameLayout、TableLayout、LinearLayout、AbsoluteLayout、RelativeLayout，Android4.0之后新增了一个GridLayout布局。下面就针对每一种布局做详细解释。

1、帧布局（FrameLayout）

帧布局就是简单的一层一层的往上叠加。

<?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" >
    
    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#0000ff"/>

     <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#00ff00"/>
</FrameLayout>

 

2、表格布局（TableLayout）
顾名思义，表格布局就如同表格一样，有行有列。

<?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:collapseColumns="2"      //隐藏某列，（从0开始）
    android:shrinkColumns="1"        //伸缩某列
    android:stretchColumns="1" >     //延长列至填充剩余空间

    <TableRow>                       //定义一行

        <TextView                     //有几个组件就自动生成几列
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/username" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="@string/username"
            android:text="@string/username" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/username" />
    </TableRow>

    <TableRow>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/password" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="@string/username"
            android:text="@string/username" />
    </TableRow>

</TableLayout>

 

3、线性布局（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="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" 
        android:layout_weight="1">                 //设置权重，如果其他控件没有设置，那么此控件将占据剩余的空间

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/username" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
             android:hint="@string/username" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" 
        android:layout_weight="1">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/password" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent" 
             android:hint="@string/username"/>
    </LinearLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_weight="1"
        android:text="@string/login" />
<!-- layout_gravity:设置布局方向，相对于父控件    gravity:设置布局方向，相对于子控件 -->
</LinearLayout>

 

4、绝对布局（AbsoluteLayout）
通过确定与源点的横纵距离确定组件的位置。Android的坐标源点是左上角，右为X的正方向，下为Y的正方向。

<?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" >
    
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/username"
        android:layout_x="20dp"
        android:layout_y="20dp"/>

    <EditText 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/username"
        android:layout_x="150dp"
        android:layout_y="10dp"/>
</AbsoluteLayout>

5、相对布局（RelativeLayout）
主要是通过id来定位同一布局文件中不同组件的位置

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

    <TextView
        android:id="@+id/textBase"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textleft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/textBase"
        android:layout_toLeftOf="@id/textBase"     //在textBase左边
        android:background="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textright"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/textBase"  //与textBase下边对齐
        android:layout_toRightOf="@id/textBase"    //在textBase右边
        android:background="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/texttop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/textBase"
        android:layout_alignLeft="@id/textBase"
        android:background="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textbelow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/textBase"
        android:layout_below="@id/textBase"
        android:background="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textlefttop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/texttop"
        android:layout_toLeftOf="@id/texttop"
        android:background="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textrighttop"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/texttop"
        android:layout_toRightOf="@id/texttop"
        android:background="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textleftbelow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/textbelow"
        android:layout_toLeftOf="@id/textbelow"
        android:background="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textrightbelow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/textbelow"
        android:layout_toRightOf="@id/textbelow"
        android:background="@drawable/ic_launcher" />

</RelativeLayout>

6、网格布局（GridLayout）

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="5"         //定义网格的列数
    android:rowCount="5" >          //定义网格的行数

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="5"    //占据5列
        android:layout_row="0"           //从第0列开始
        android:background="#ff0000"
        android:gravity="right"
        android:text="0"
        android:textSize="40dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="0"       //在第0列
        android:layout_row="1"          //在第1行
        android:text="7" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_row="1"
        android:text="8" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="2"
        android:layout_row="1"
        android:text="9" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="3"
        android:layout_row="1"
        android:text="/" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="4"
        android:layout_row="1"
        android:text="%" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="0"
        android:layout_row="2"
        android:text="4" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_row="2"
        android:text="5" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="2"
        android:layout_row="2"
        android:text="6" />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="3"
        android:layout_row="2"
        android:text="*" />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="4"
        android:layout_row="2"
        android:text="1/x" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="0"
        android:layout_row="3"
        android:text="1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_row="3"
        android:text="2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="2"
        android:layout_row="3"
        android:text="3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="3"
        android:layout_row="3"
        android:text="-" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="4"
        android:layout_row="3"
        android:layout_rowSpan="2"
        android:layout_gravity="fill_vertical"   //在垂直方向上填充2行
        android:text="=" />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="0"
        android:layout_row="4"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"  //在水平方向上填充2列
        android:text="0" />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="2"
        android:layout_row="4"
        android:text="." />
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_column="3"
        android:layout_row="4"
        android:text="+" />

</GridLayout>

 

总结：6种布局如上所示，一般都可以根据名称理解其作用。写布局问件时关键要细心，弄清楚组件具体摆放的位置，根据实际需求选择布局。而且，布局可以嵌套使用，使得组件的展现形式更加灵活多变！