Android 布局资源详解（四大布局资源详解（LinearLayout / RelativeLayout / TableLayout / FrameLayo）

用户62238625217
0 阅读6分钟

本文将结合LinearLayout、RelativeLayout、TableLayout、NeonLamp（FrameLayout 实现） 四个项目，详细介绍 Android 布局资源的四种核心类型。

一、Android 资源类型总览

Android 应用的静态内容统一存放在 res/ 目录，主要资源类型如下：

  • layout/：布局资源，定义 UI 结构与排列规则
  • drawable/：图片、形状、矢量图等视觉资源
  • values/：字符串、颜色、尺寸、样式等常量资源
  • mipmap/：应用启动图标资源
  • anim/：补间动画资源
  • menu/：菜单资源
  • raw/：原始文件资源（音频、视频等）

其中 布局资源（layout） 是构建 UI 的核心，本文重点解析其四种常用类型。

二、布局资源四种常用类型详解

1. LinearLayout（线性布局）—— 项目：LinearLayout

核心特性

  • 子视图按 水平（horizontal）或垂直（vertical） 方向线性排列，不可重叠。
  • 通过 layout_weight 属性实现子视图按比例分配剩余空间。
  • 优点：简单直观、性能高；缺点：复杂布局需多层嵌套。

项目运行效果

image.png

关键代码解析

<!-- activity_main.xml -->
<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:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮1"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮2"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="按钮3"/>
</LinearLayout>
  • orientation="horizontal"：指定水平排列。
  • layout_width="0dp" + layout_weight="1"：三个按钮均分水平宽度。

适用场景

简单列表、表单、均分布局、垂直 / 水平排列的基础界面。

2. FrameLayout（帧布局）—— 项目：NeonLamp

核心特性

  • 所有子视图层叠显示，默认对齐父布局左上角，后添加的视图覆盖先添加的。
  • 支持通过 layout_gravity 调整子视图位置，性能极高。
  • 优点：极简、性能最优；缺点：仅支持层叠，无法线性 / 相对排列。

项目运行效果

image.png

关键代码解析

<!-- activity_main.xml -->
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <!-- 最外层红色 -->
    <View
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="#FF0000"/>

    <!-- 中层绿色 -->
    <View
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:background="#00FF00"/>

    <!-- 内层蓝色 -->
    <View
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:background="#0000FF"/>

    <!-- 内层红色 -->
    <View
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#FF0000"/>

    <!-- 最中心灰色 -->
    <View
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="#888888"/>
</FrameLayout>
  • android:gravity="center"：让所有子视图在父布局中居中对齐。
  • 控件从上到下依次叠加：红色 → 绿色 → 蓝色 → 红色 → 灰色，形成同心圆霓虹灯效果，完美体现 FrameLayout 层叠覆盖的核心特性。

Java 代码（布局加载入口）

package cn.edu.neonlamp;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 加载 FrameLayout 布局文件
        setContentView(R.layout.activity_main);
    }
}

这里仅作为布局加载入口，真正的 UI 层叠逻辑都在 activity_main.xml 中，体现了 Android “UI 与逻辑分离” 的设计思想。

适用场景

单视图容器、Fragment 容器、层叠效果（如图片 + 文字、加载框、悬浮按钮、霓虹灯效果）。

3. RelativeLayout（相对布局）—— 项目：RelativeLayout

核心特性

  • 子视图相对于父布局或其他子视图定位，无需嵌套即可实现复杂排列。
  • 核心属性：layout_alignParentXXX（相对父布局）、layout_toRightOf/layout_below（相对兄弟视图）。
  • 优点：灵活性高、减少嵌套；缺点：属性繁多、复杂布局可读性差，已逐步被 ConstraintLayout 替代。

项目运行效果

image.png

右侧模拟器中，按钮 2、按钮 3 分别位于不同位置，体现了相对布局的灵活定位能力。

关键代码解析

<!-- activity_main.xml -->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 按钮1：位于父布局右下角 -->
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="按钮1"/>

    <!-- 按钮2：位于父布局右侧、垂直居中 -->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="20dp"
        android:text="按钮2"/>

    <!-- 按钮3：位于父布局右上角 -->
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:text="按钮3"/>
</RelativeLayout>
  • layout_alignParentRight="true"：控件贴靠父布局右侧。
  • layout_centerVertical="true"：控件在父布局中垂直居中。
  • 三个按钮分别通过相对父布局的不同边缘定位，无需嵌套即可实现分散布局。

Java 代码（布局加载入口）

package cn.edu.relativelayout;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 加载 RelativeLayout 布局文件
        setContentView(R.layout.activity_main);
    }
}

这里仅作为布局加载入口，真正的 UI 定位逻辑都在 activity_main.xml 中。

适用场景

中等复杂度 UI、需要灵活相对定位的界面（如登录页、个人中心）。

4. TableLayout（表格布局）—— 项目：TableLayout

核心特性

  • 继承自 LinearLayout，以 行（TableRow）+ 列 的表格形式排列子视图。
  • 自动适配列宽，支持隐藏列、拉伸列等功能。
  • 优点：适合规整的表格类布局；缺点：灵活性不足，复杂表格维护成本高。

项目运行效果

image.png

右侧模拟器中，按钮按 2 行 2 列 + 单行的表格形式规整排列，体现了 TableLayout 的网格特性。

关键代码解析

<!-- activity_main.xml -->
<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*"> <!-- 拉伸所有列 -->

    <!-- 第一行：2个按钮 -->
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮2"/>
    </TableRow>

    <!-- 第二行：2个按钮 -->
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮3"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮4"/>
    </TableRow>

    <!-- 第三行：1个按钮（跨列显示） -->
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2" <!-- 跨2列 -->
            android:text="按钮5"/>
    </TableRow>
</TableLayout>
  • android:stretchColumns="*"：拉伸所有列，让表格填满父布局宽度。
  • android:layout_span="2"：让按钮 5 跨 2 列显示，实现表格合并单元格效果。
  • 每个 TableRow 代表一行，内部控件代表一列，实现规整的网格布局。

Java 代码（布局加载入口）

package cn.edu.tablelayout;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 加载 TableLayout 布局文件
        setContentView(R.layout.activity_main);
    }
}

这里仅作为布局加载入口，真正的 UI 表格逻辑都在 activity_main.xml 中。

适用场景

数据表格、表单、规整的网格类布局（如课程表、通讯录、按钮网格）。

三、总结

本次通过运行 LinearLayout、RelativeLayout、TableLayout、NeonLamp（FrameLayout） 四个项目，分别学习了 Android 布局资源的四种经典类型：

  1. LinearLayout：线性排列，适合简单有序界面
  2. FrameLayout：层叠覆盖，适合叠加效果
  3. RelativeLayout：相对定位，灵活但维护稍复杂
  4. TableLayout：表格行列，适合规整排版

四个项目均已成功运行并截图，相信读者们对 Android 布局资源的使用有了更直观的理解~

avatar
文章
阅读
粉丝