Android 四种常用布局完全解析（附实战项目截图）

Android 四种常用布局完全解析（附实战项目截图）

前言

在 Android 开发中，布局是构建界面的基础。不同的布局类型决定了控件的排列方式和交互逻辑。本文将结合 LinearLayout、RelativeLayout、TableLayout、FrameLayout（嵌套布局） 四个实战项目，详细介绍这四种最常用的 Android 布局，帮助你理解它们的特点、用法和适用场景。

---

一、LinearLayout（线性布局）

线性布局是 Android 中最基础的布局，它会将子控件按照 水平（horizontal） 或 垂直（vertical） 方向依次排列。

核心特点

• 方向单一：只能在水平或垂直一个方向上排列控件，无法同时在两个方向上分布。
• 权重分配 ：通过 android:layout_weight 属性，可以按比例分配剩余空间，实现自适应布局。
• 嵌套灵活：可以嵌套多个 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: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="2"
        android:text="按钮3"/>
</LinearLayout>

适用场景

• 简单的按钮组、列表项、表单行。
• 需要按比例分配空间的场景（如均分导航栏、自适应输入框）。

二、RelativeLayout（相对布局）

相对布局允许子控件相对于父容器 或相对于其他控件进行定位，自由度极高，是实现复杂界面的首选布局之一。

核心特点

• 相对定位：子控件可以通过属性锚定到父容器的边缘、中心，或其他控件的上下左右。

• 减少嵌套：相比 LinearLayout 多层嵌套，RelativeLayout 通常只需一层即可实现复杂布局，提升性能。

• 常用属性：

  • 相对父容器：layout_alignParentTop、layout_centerHorizontal、layout_alignParentBottom
  • 相对其他控件：layout_toRightOf、layout_below、layout_alignBottom

实战项目效果

核心代码示例

<?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">
    <Button
        android:id="@+id/btn_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"/>
    <Button
        android:id="@+id/btn_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="260dp"/>
    <Button
        android:id="@+id/btn_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3"
        android:layout_alignBottom="@id/btn_two"
        android:layout_marginBottom="100dp"
        android:layout_toRightOf="@id/btn_two"/>
</RelativeLayout>

适用场景

• 复杂的界面布局（如登录页、商品详情页）。
• 需要控件之间相互对齐、依赖定位的场景。

三、TableLayout（表格布局）

表格布局以 行（TableRow） 和 列 的形式排列子控件，类似 HTML 中的表格，适合规整的网格布局。

核心特点

• 网格结构 ：每一行由 TableRow 包裹，列数由该行最多控件数决定。
• 自动拉伸 ：通过 android:stretchColumns 指定拉伸列，填充剩余空间，实现列宽自适应。
• 跨行跨列 ：支持 android:layout_span 属性，实现单元格合并。

实战项目效果

核心代码示例

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:stretchColumns="2" >
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:text="按钮1" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="按钮2" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="按钮3" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="按钮4" />
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="按钮5" />
    </TableRow>
</TableLayout>

适用场景

• 表单、日历、数据表格等需要规整网格的界面。
• 对齐要求严格的多行多列布局。

四、FrameLayout / 嵌套布局（以 NeonLamp 为例）

FrameLayout（帧布局）是最简单的布局之一，所有子控件默认叠加在左上角，后添加的控件会覆盖在前面的控件之上。常与 LinearLayout 嵌套使用，实现层叠、居中的视觉效果。

核心特点

• 层叠叠加：子控件默认重叠，适合实现悬浮、覆盖效果。
• 居中控制 ：结合 android:layout_gravity="center"，可轻松实现子控件在父容器中居中。
• 嵌套灵活：多层嵌套可实现复杂的组合控件或视觉特效。

实战项目效果

核心代码示例

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/btn_one"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="#ff0000" />
    <Button
        android:id="@+id/btn_two"
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:layout_gravity="center"
        android:background="#00ff00" />
    <Button
        android:id="@+id/btn_three"
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_gravity="center"
        android:background="#0000ff" />
    <Button
        android:id="@+id/btn_four"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center"
        android:background="#ff1243" />
    <Button
        android:id="@+id/btn_five"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center"
        android:background="#324678" />
</FrameLayout>

适用场景

• 层叠效果（如指示灯、悬浮按钮、卡片叠加）。
• 自定义组合控件（如带图标的按钮、带角标的头像）。
• 简单的居中、填充布局。

五、四种布局对比总结

布局类型	核心特点	优点	缺点	典型场景
LinearLayout	水平 / 垂直线性排列	简单直观、权重分配灵活	复杂界面需多层嵌套，性能差	按钮组、列表、表单行
RelativeLayout	相对父容器 / 其他控件定位	自由度高、减少嵌套	属性繁多，学习成本稍高	登录页、详情页、复杂界面
TableLayout	表格行 / 列结构	规整对齐、支持跨列	灵活性不如 RelativeLayout	数据表格、表单、日历
FrameLayout / 嵌套	层叠 / 居中嵌套	实现重叠、居中效果方便	子控件叠加顺序需注意	指示灯、悬浮按钮、自定义控件

六、布局选择建议

• 简单线性排列 ：优先使用 LinearLayout，实现快速、代码简洁。
• 复杂相对定位 ：优先使用 RelativeLayout，减少布局层级，提升性能。
• 规整网格 ：使用 TableLayout，保证对齐和结构清晰。
• 层叠 / 居中效果 ：使用 FrameLayout 或嵌套布局，实现视觉特效。

通过这四个项目的实践，相信你已经能熟练掌握这四种布局的用法，在实际开发中根据需求灵活选择，构建出高效、美观的 Android 界面。