Android 四大布局使用方法详解

在Android 中，有界面存在的地方就会有布局存在，布局对于Android来说十分重要。Android中常用的四大布局：LinearLayout、RelativeLayout、FrameLayout、TableLayout。

注意： AbsoluteLayout 已经弃用，略过。

欢迎关注微信公众号:程序员Android
公众号ID：ProgramAndroid
获取更多信息

微信公众号：ProgramAndroid

我们不是牛逼的程序员，我们只是程序开发中的垫脚石。
我们不发送红包，我们只是红包的搬运工。

通过本章学习，可以掌握以下布局相关的常用知识点。

1.LinearLayout
2.RelativeLayout
3.FrameLayout
4.TableLayout

1.LinearLayout

线性布局，Android 常用布局之一，主要有水平布局、垂直布局两种。

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.LinearLayout

注意：
线性布局水平布局主要靠orientation属性区分
// 垂直布局
1.android:orientation="vertical"
//线性布局
2.android:orientation="horizontal"

LinearLayout 简单例子

LinearLayout 布局例子

静态代码布局如下：

 <LinearLayout
        android:id="@+id/ll_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:visibility="gone" >

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@android:color/holo_purple"
                android:gravity="center_horizontal"
                android:padding="10dp"
                android:text="水平布局" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@android:color/holo_green_light"
                android:gravity="center_horizontal"
                android:padding="10dp"
                android:singleLine="true"
                android:text="水平布局" />
        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_orange_light"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="垂直布局" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/holo_blue_light"
            android:gravity="center_horizontal"
            android:padding="10dp"
            android:text="垂直布局" />
    </LinearLayout>

2. RelativeLayout

关系布局：Android 常用的布局之一，主要更加相对位置布局控件，比如：居左、居中、居右
继承关系：

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.RelativeLayout

RelativeLayout 简单例子

RelativeLayout布局

静态代码布局如下：

    <RelativeLayout
        android:id="@+id/rl_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/tittle_bg"
        android:padding="10dp"
        android:visibility="gone" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:drawableLeft="@drawable/arrow_pressed"
            android:drawablePadding="5dp"
            android:text="动态" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="好友动态" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/tittle_add" />
    </RelativeLayout>

FrameLayout

帧布局：Android 常用布局之一，主要是按帧进行布局，控件会叠加在一起，后续布局会覆盖以前的布局
继承关系如下：

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.FrameLayout

简单FrameLayout例子

FrameLayout布局

静态实现代码如下：

 <FrameLayout
        android:id="@+id/fl_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" >

        <TextView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_gravity="center"
            android:background="@android:color/holo_orange_light"
            android:gravity="center_vertical"
            android:text="  1"
            android:textColor="@android:color/black" />

        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:background="@android:color/holo_green_light"
            android:gravity="center_horizontal"
            android:text="2" />

        <TextView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:background="@android:color/holo_blue_bright"
            android:gravity="center"
            android:text="3" />
    </FrameLayout>

4.TableLayout

表格布局：Android中常用的布局之一，在实现类似表格效果时候会用到此布局。
继承LinearLayout，关系如下：

java.lang.Object
   ↳    android.view.View
       ↳    android.view.ViewGroup
           ↳    android.widget.LinearLayout
               ↳    android.widget.TableLayout

简单2*2例子如下：

TableLayout布局

静态实现代码如下：

 <TableLayout
        android:id="@+id/tl_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" >

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="2dp" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:background="@android:color/holo_green_light"
                android:gravity="left"
                android:paddingBottom="10dp"
                android:paddingLeft="10dp"
                android:paddingTop="10dp"
                android:text="WeChat Number:" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:background="@android:color/holo_blue_bright"
                android:gravity="center"
                android:paddingBottom="10dp"
                android:paddingRight="10dp"
                android:paddingTop="10dp"
                android:text="ProgramAndroid" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="2dp" >

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:background="@android:color/holo_blue_bright"
                android:gravity="left"
                android:paddingBottom="10dp"
                android:paddingLeft="10dp"
                android:paddingTop="10dp"
                android:text="微信公众号：" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:background="@android:color/holo_green_light"
                android:gravity="center"
                android:paddingBottom="10dp"
                android:paddingRight="10dp"
                android:paddingTop="10dp"
                android:text="程序员Android" />
        </TableRow>
    </TableLayout>