Android 入门必学：四大界面布局从原理到实战本文系统讲解 Android 四大经典界面布局，包含核心概念、通用属性

本文基于 Android 基础教程第 2 章整理，从核心概念到可运行代码，一次性吃透线性、帧、表格、相对四大布局，新手也能直接上手。

前言

在 Android 开发里，界面 = 布局 + 控件。布局就像是界面的骨架，决定控件怎么排列、怎么摆放、怎么适配屏幕。这篇文章带你系统学习 Android 最经典、最常用的四大布局，附完整可复制代码 + 真实运行效果。

一、基础概念：View 与 ViewGroup

Android 所有界面元素，都由两个基础类构成：

View：基础控件（Button、TextView、ImageView 等）
ViewGroup：容器，用来装载和管理多个 View / ViewGroup
我们写的所有布局，本质都是 ViewGroup

二、界面布局两种编写方式

Android 支持两种写法，工业界优先使用 XML。

1. 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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="XML 实现界面"
        android:textColor="#ff0000"
        android:layout_centerInParent="true"/>
</RelativeLayout>

2. Java 代码编写

适合动态界面，全部用 new 创建，可读性一般。

RelativeLayout layout = new RelativeLayout(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
    RelativeLayout.LayoutParams.WRAP_CONTENT,
    RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.CENTER_IN_PARENT);

TextView tv = new TextView(this);
tv.setText("Java 代码实现布局");
tv.setTextColor(Color.RED);

layout.addView(tv, params);
setContentView(layout);

三、布局通用属性（所有布局都能用）

属性	作用
android:id	控件唯一标识
android:layout_width	宽度
android:layout_height	高度
android:background	背景颜色 / 图片
android:layout_margin	外边距
android:padding	内边距

三个常用尺寸值

match_parent：填满父容器
wrap_content：包裹自身内容
固定值：如 50dp（尺寸用 dp，文字用 sp）

四、四大布局实战 + 代码 + 运行效果

1. 线性布局 LinearLayout

特点

按水平或垂直方向依次排列，支持权重比例分配空间，最常用、最基础。

核心属性

android:orientation="horizontal/vertical" 排列方向
android:layout_weight 权重比例
使用权重时，对应方向宽 / 高必须设为 0dp

实战代码

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

✅ 运行效果

三个按钮在屏幕水平方向按 1:1:2 比例自动分配宽度，占满整行，比例精准、适配性强。

2. 帧布局 FrameLayout

特点

控件层层叠加，后写的覆盖先写的，默认左上角对齐，可设置居中。

核心属性

layout_gravity 控制对齐方式
支持前景图、层叠展示

实战代码

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

    <Button
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:background="#ff0000" />

    <Button
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:layout_gravity="center"
        android:background="#00ff00" />

    <Button
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_gravity="center"
        android:background="#0000ff" />

    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center"
        android:background="#ff1243" />

    <Button
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="center"
        android:background="#324678" />
</FrameLayout>

✅ 运行效果

5 个不同颜色、不同大小的按钮在屏幕正中心层层叠加，形成类似霓虹灯、同心圆、层级叠加的视觉效果。

3. 表格布局 TableLayout

特点

按行、列整齐排列，类似 Excel 表格，适合计算器、表单、规整网格。

核心属性

stretchColumns 拉伸列
shrinkColumns 收缩列
layout_column 指定在第几列

实战代码

<?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_column="0"
            android:text="按钮1" />
        <Button
            android:layout_column="1"
            android:text="按钮2" />
    </TableRow>

    <TableRow>
        <Button
            android:layout_column="1"
            android:text="按钮3" />
        <Button
            android:layout_column="2"
            android:text="按钮4" />
    </TableRow>

    <TableRow>
        <Button
            android:layout_column="2"
            android:text="按钮5" />
    </TableRow>
</TableLayout>

✅ 运行效果

按钮按 3 行 3 列 整齐排列，第 2 列被自动拉伸填充空白，整体布局工整、规范。

4. 相对布局 RelativeLayout

特点

通过相对位置定位控件，灵活度极高，可相对父布局、相对其他控件。

常用属性

layout_alignParentBottom 贴父布局底部
layout_centerHorizontal 水平居中
layout_toRightOf 在某控件右侧
不设置位置默认左上角对齐

实战代码

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

✅ 运行效果

三个按钮根据父布局和彼此之间的相对关系自由定位，位置灵活、可自由调整，适合复杂界面排版。

五、四大布局选型指南

横竖排队、按比例排列 → LinearLayout
层级叠加、霓虹灯、悬浮 → FrameLayout
表格、表单、计算器 → TableLayout
复杂界面、自由定位 → RelativeLayout

六、总结

View 是控件，ViewGroup 是容器，布局都是 ViewGroup。
优先使用 XML 编写布局，解耦、易维护。
通用属性 + 四大布局，足以完成绝大多数 Android 界面。
权重、相对定位、层叠是 Android UI 开发的核心思想。