Android 四大布局项目实战与详解

2503_91778090

185人浏览 · 2026-03-27 23:47:37

2503_91778090 · 2026-03-27 23:47:37 发布

Android 四大布局项目实战与详解

本文将结合 LinearLayout、RelativeLayout、TableLayout、NeonLamp 四个实战项目，详细介绍 Android 布局资源的四种核心类型，并附上项目运行效果与代码解析。

一、项目导入与运行说明

本次实战的四个项目均为 Android 基础布局练习，分别对应线性布局、相对布局、表格布局和帧布局：

LinearLayout：线性布局项目
RelativeLayout：相对布局项目
TableLayout：表格布局项目
NeonLamp：帧布局（霓虹灯效果）项目

导入与运行步骤

打开 Android Studio → File → Open，选择对应项目文件夹
等待 Gradle 同步完成（若遇到依赖下载问题，可配置国内镜像或离线模式）
连接真机 / 启动模拟器 → 点击绿色运行按钮 ▶
截取运行界面截图，用于后续博客展示

二、四大布局项目实战解析

1. LinearLayout（线性布局）

运行截图：

核心特点：

子控件按 水平（horizontal） 或 垂直（vertical） 方向线性排列
通过 android:layout_weight 属性实现按比例分配剩余空间
适合简单线性界面，如登录表单、设置项列表

关键代码示例：

xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="用户名"
        android:textSize="16sp"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="请输入用户名"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登录"
        android:layout_marginTop="16dp"/>

</LinearLayout>

2. RelativeLayout（相对布局）

运行截图：

核心特点：

子控件通过 相对位置关系（相对于父容器或其他控件）定位
灵活性高，可实现复杂不规则布局，减少嵌套层级
适合需要控件对齐的界面，如个人信息页、商品详情页

关键代码示例：

xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <ImageView
        android:id="@+id/iv_avatar"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/ic_avatar"/>

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="用户名"
        android:textSize="18sp"
        android:layout_toRightOf="@id/iv_avatar"
        android:layout_marginLeft="16dp"
        android:layout_alignTop="@id/iv_avatar"/>

    <TextView
        android:id="@+id/tv_desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="个人简介"
        android:textSize="14sp"
        android:layout_below="@id/tv_name"
        android:layout_toRightOf="@id/iv_avatar"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="8dp"/>

</RelativeLayout>

3. TableLayout（表格布局）

运行截图：

核心特点：

以 行（TableRow） 和列的形式排列子控件，自动适配列宽
支持合并单元格，适合结构化数据展示
典型场景：计算器界面、成绩表、表单表格

关键代码示例：

xml

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:stretchColumns="*">

    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="科目"
            android:padding="8dp"
            android:background="@drawable/border"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="成绩"
            android:padding="8dp"
            android:background="@drawable/border"/>
    </TableRow>

    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="语文"
            android:padding="8dp"
            android:background="@drawable/border"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="90"
            android:padding="8dp"
            android:background="@drawable/border"/>
    </TableRow>

</TableLayout>

4. NeonLamp（FrameLayout 帧布局）

运行截图：

核心特点：

子控件默认 叠加在左上角，后添加的控件会覆盖先添加的控件
通过 android:layout_gravity 控制子控件对齐方式
适合层叠效果、Fragment 容器、加载动画、霓虹灯等场景

关键代码示例：

xml

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/bg_neon"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="霓虹灯效果"
        android:textSize="24sp"
        android:textColor="@color/white"
        android:layout_gravity="center"/>

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="32dp"/>

</FrameLayout>

三、四大布局对比总结

表格

布局类型	核心特点	适用场景
LinearLayout	线性排列，支持比例分配	简单线性界面、表单、列表项
RelativeLayout	相对位置定位，灵活性高	复杂不规则界面、信息展示页
TableLayout	表格形式排列，自动适配列宽	数据表格、计算器等结构化界面
FrameLayout	层叠叠加，控制对齐方式	层叠效果、Fragment 容器、动画