本教程共 100 篇 · 第 58 篇 · 更新于 2026-07-28 · 约 8 分钟阅读

58. 布局管理器

本节目标：掌握传统 View 体系的三大布局：LinearLayout、ConstraintLayout、FrameLayout，知道什么时候用哪个。

传统 View 体系有六七种布局，但实际开发中最常用的就三种。其他如 RelativeLayout（被 ConstraintLayout 替代）、TableLayout（少用）这里简略带过。

LinearLayout 线性布局

子元素按一个方向排列：水平或垂直。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一行" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二行" />

</LinearLayout>

orientation 方向

vertical：垂直排列（从上到下）
horizontal：水平排列（从左到右）

gravity 对齐

android:gravity 控制子元素的对齐方式：

值	效果
`center`	居中
`center_vertical` / `center_horizontal`	单方向居中
`start` / `end`	靠左/靠右
`top` / `bottom`	靠上/靠下

layout_weight 权重

按比例分配剩余空间，和 Compose 的 weight 类似：

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <View
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:background="#FF0000" />

    <View
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="2"
        android:background="#00FF00" />

</LinearLayout>

Warning

用 weight 时，对应方向的尺寸必须设为 0dp（不是 wrap_content 或 match_parent）。否则会先按指定尺寸分配，再分配 weight 的剩余空间，结果不对。这是新手常犯的错误。

适合场景

简单的线性排列（几行文字、几个按钮一排）
需要按比例分配空间

Tip

别嵌套太深的 LinearLayout。多层嵌套会拖慢布局测量速度（层级越深性能越差）。复杂布局用 ConstraintLayout 扁平化。

ConstraintLayout 约束布局

ConstraintLayout 是最强大的布局，能用扁平结构实现复杂界面，替代嵌套的 LinearLayout 和已废弃的 RelativeLayout。

核心概念：约束

约束（Constraint）定义一个控件相对于另一个控件或父容器的位置关系。就像用绳子把控件拴在参照物上。

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="标题"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/subtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="副标题"
        app:layout_constraintTop_toBottomOf="@id/title"
        app:layout_constraintStart_toStartOf="@id/title" />

</androidx.constraintlayout.widget.ConstraintLayout>

每个控件至少需要水平和垂直各一个约束，否则会跑到左上角 (0,0)。

约束方向

app:layout_constraintTop_toTopOf        # 顶部对齐某元素的顶部
app:layout_constraintTop_toBottomOf     # 顶部在某元素底部下方
app:layout_constraintBottom_toBottomOf  # 底部对齐
app:layout_constraintStart_toStartOf    # 左边对齐
app:layout_constraintEnd_toEndOf        # 右边对齐

参照物可以是 parent（父容器）或其他控件的 @id。

居中

两边都加约束就居中了：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="居中"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

margin 间距

app:layout_constraintTop_toBottomOf="@id/title"
android:layout_marginTop="16dp"

bias 偏向

居中时可以用 bias 微调偏向：

app:layout_constraintHorizontal_bias="0.3"  # 30% 偏左

Chain 链

多个控件连成链，自动分布：

<Button android:id="@+id/btn1"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@id/btn2" />

chainStyle	效果
`spread`	均匀分布（默认）
`packed`	挤在一起
`spread_inside`	首尾贴边，中间均匀

Note

ConstraintLayout 推荐用 Android Studio 的布局编辑器拖拽操作，比手写 XML 快很多。在 Design 视图里拖约束连线即可。

适合场景

复杂界面布局
需要扁平化减少嵌套层级
需要精确定位关系

FrameLayout 帧布局

最简单的布局，所有子元素堆叠在左上角，后添加的盖在前面上面。适合只放一个子元素或做叠加效果：

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

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:text="叠加文字" />

</FrameLayout>

gravity vs layout_gravity

容易混淆：

android:gravity：容器属性，控制子元素怎么排。
android:layout_gravity：子元素属性，控制自己在容器里的位置。

适合场景

Fragment 的容器（动态替换 Fragment）
叠加效果（图片上盖文字）
只放单个子元素

布局选择指南

布局	适用场景	特点
LinearLayout	简单线性排列	易用，但别嵌套深
ConstraintLayout	复杂界面	扁平化，功能强
FrameLayout	叠加/单元素	最简单

Tip

默认首选 ConstraintLayout。简单排列用 LinearLayout。需要叠加或 Fragment 容器用 FrameLayout。RelativeLayout 已被 ConstraintLayout 完全替代，新项目别用了。

小结

LinearLayout 做线性排列配 weight，ConstraintLayout 做复杂布局用约束连线，FrameLayout 做叠加和 Fragment 容器。记住 gravity 管子元素排列，layout_gravity 管自己位置。复杂界面别嵌套深 LinearLayout，用 ConstraintLayout 扁平化。下一节学习基础控件。