四种布局资源

一、LinearLayout（线性布局）

核心特性

• 子视图按垂直（vertical）  或水平（horizontal）  方向依次排列。
• 支持 layout_weight 按比例分配剩余空间。
• 结构简单，适合列表式、表单式界面。

 LinearLayout 截图显示了三个按钮垂直排列，这正是线性布局的典型效果。

示例代码（activity_linear.xml）

xml

<?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"
    android:padding="16dp">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="按钮1" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="按钮2" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="按钮3" />

</LinearLayout>

界面显示三个按钮从上到下垂直排列，宽度填满屏幕，每个按钮依次排开。

适用场景

• 设置界面、菜单列表、垂直表单。

---

二、RelativeLayout（相对布局）

核心特性

• 子视图相对于父容器或其他兄弟视图进行定位。
• 常用属性：layout_alignParentTop、layout_toRightOf、layout_centerInParent 等。
• 适合控件之间有相对位置关系的界面。

 RelativeLayout 截图中，按钮1、按钮2、按钮3 并非简单线性排列，而是通过相对定位放置在界面的不同位置（比如底部、居中、顶部等）。

示例代码（activity_relative.xml）

xml

<?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"
    android:padding="16dp">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

按钮3位于顶部居中，按钮2位于屏幕正中央，按钮1位于底部居中。

适用场景

• 需要灵活控制控件位置的界面，如标题栏+内容+底部按钮。

---

三、TableLayout（表格布局）

核心特性

• 以行（TableRow）  为单位组织内容，类似 HTML 的 <table>。
• 可以控制列合并、列拉伸等。
• 适合数据展示、表单排列等规则网格界面。

 TableLayout 截图展示了按钮1到按钮5在表格形式下排列，通常每个 TableRow 包含若干个控件。

示例代码（activity_table.xml）

xml

<?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:stretchColumns="0,1"
    android:padding="16dp">

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

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

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮5" />
    </TableRow>

</TableLayout>

按钮1和按钮2在第一行，按钮3和按钮4在第二行，按钮5单独在第三行，呈现网格状排列。

适用场景

• 计算器界面、属性配置页、数据表格展示。

---

四、自定义视图 / FrameLayout（以 NeonLamp 为例）

核心特性

• FrameLayout 是最简单的布局，所有子视图默认堆叠在左上角，后添加的覆盖在前者之上。
• 常作为占位容器（如 Fragment 容器）或悬浮层（如加载提示）。

NeonLamp 项目展示了一个带有霓虹灯文字效果的界面，这类效果通常需要自定义绘制，但外部仍用布局容器包裹。

示例代码（activity_neon.xml，使用 FrameLayout 包裹自定义视图）

xml

<?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"
    android:background="#000000">

    <com.example.neonlamp.NeonLampView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="NeonLamp"
        android:gravity="center"/>

</FrameLayout>

NeonLampView 核心代码（示意）

java

public class NeonLampView extends View {
    // 自定义绘制逻辑，实现霓虹灯闪烁、渐变效果
    @Override
    protected void onDraw(Canvas canvas) {
        // 绘制发光文字
    }
}

屏幕显示带有霓虹灯特效的文字“NeonLamp”，背景为黑色，文字呈现流光或闪烁效果。

适用场景

• 特殊视觉效果（动态光效、粒子效果、动画控件）。
• 自定义控件通常配合 FrameLayout 或直接作为根视图使用。