Android 四大常用布局介绍和示例

Android 四大常用布局详解

在 Android 开发中，布局是构建 UI 界面的核心，直接决定了界面的结构和元素排列方式。本文将结合实战截图，详细讲解 LinearLayout 、RelativeLayout 、TableLayout 三种系统原生布局，以及 NeonLamp 自定义嵌套布局的核心用法、特点和适用场景，帮助初学者快速掌握布局基础。

一、LinearLayout（线性布局）

1. 核心概念

LinearLayout 是最基础、最常用的布局之一，它会将所有子元素沿水平（horizontal）或垂直（vertical）方向依次排列，就像一条直线上的元素串联。

2. 布局特点

方向可控：通过 android:orientation 属性设置水平（horizontal）或垂直（vertical）排列。
权重分配：支持 android:layout_weight 属性，让子元素按比例分配剩余空间。
简单直观：适合元素排列规则简单的场景（如表单、列表）。

3. 实战代码（对应截图）

xml

ini 复制代码

<?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>

4. 适用场景

简单的水平 / 垂直列表（如底部导航栏、表单输入框）。
元素排列规则固定，无需复杂位置关系的界面。

二、RelativeLayout（相对布局）

1. 核心概念

RelativeLayout 允许子元素相对于父容器或其他子元素 定位，通过一系列 layout_alignXXX、layout_below 等属性控制位置，灵活性远高于 LinearLayout。

2. 布局特点

相对定位：支持 "在父容器顶部 / 底部 / 居中""在某个元素左侧 / 右侧 / 下方" 等定位方式。
无需嵌套：复杂界面可通过相对定位减少布局嵌套层级，提升性能。
学习成本稍高：需掌握大量定位属性，适合复杂界面布局。

3. 实战代码（对应截图）

xml

ini 复制代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/AppTheme"
    android:id="@+id/mainRelativelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="1dp"

    >
    <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:layout_alignBottom="@id/btn_two"
        android:layout_marginLeft="-5dp"
        android:layout_marginBottom="151dp"
        android:layout_toRightOf="@id/btn_two"
        android:text="按钮3" />
</RelativeLayout>

4. 适用场景

复杂界面布局（如登录页、个人中心），需要元素按相对位置排列。
减少布局嵌套，提升 UI 渲染效率。

三、TableLayout（表格布局）

1. 核心概念

TableLayout 以行（TableRow）和列的形式组织子元素，类似 HTML 中的表格，适合需要行列对齐的界面。

2. 布局特点

行列结构：通过 TableRow 定义行，行内元素自动按列分布。
列宽自适应：列宽由该行最宽元素决定，所有行共享列宽。
轻量级：无需复杂属性，适合表格化数据展示。

3. 实战代码（对应截图）

xml

ini 复制代码

<?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>

4. 适用场景

表格化数据展示（如商品列表、成绩表）。
需要行列对齐的简单界面，替代复杂的 RelativeLayout 嵌套。

四、NeonLamp（自定义嵌套布局）

1. 核心概念

NeonLamp 并非系统原生布局，而是自定义的嵌套布局案例，通过多层 View（如 ViewGroup 或 View）嵌套实现霓虹灯光圈效果，展示了布局的灵活组合能力。

2. 布局特点

自定义组合：通过嵌套 LinearLayout/RelativeLayout 或直接使用 View 实现复杂视觉效果。
视觉效果强：适合需要自定义 UI 样式的场景（如特效、动画背景）。
扩展性高：可通过修改颜色、大小、层级实现不同视觉效果。

3. 实战代码（核心思路）

xml

ini 复制代码

<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>

4. 适用场景

自定义 UI 特效（如背景、装饰元素）。
学习布局嵌套和自定义 View 的基础案例。

选择建议

简单界面优先用 LinearLayout，代码简洁易维护。
复杂界面优先用 RelativeLayout，减少嵌套提升性能。
表格化数据用 TableLayout，行列对齐更直观。
自定义 UI 可尝试 NeonLamp 这类嵌套布局，学习布局组合技巧。

总结

Android 布局是 UI 开发的基础，掌握 LinearLayout、RelativeLayout、TableLayout 三种原生布局，再结合自定义布局案例，就能应对绝大多数界面开发需求。初学者应多动手实践，通过修改属性、调整嵌套关系，理解布局的核心逻辑，才能真正灵活运用布局构建优质界面。