4、相对布局（RelativeLayout）：相对定位规则、alignParent与layout_above/below、实战：居中与边缘对齐

说到 RelativeLayout，我个人觉得这是 Android 布局里最灵活、也最容易让人「翻车」的一个容器。为什么？因为它靠的是「相对关系」——一个控件的位置，完全取决于它跟谁「攀亲戚」。你想想看，LinearLayout 是排队，FrameLayout 是叠罗汉，而 RelativeLayout 呢？它就像一场社交派对，每个控件都在找自己的「参照物」。

我在项目里接手过一个老代码，整个页面用了三层嵌套的 LinearLayout，改一个按钮位置要调半天。后来我直接换成 RelativeLayout，一层搞定。嗯，这就是它的魅力。

4.1 相对定位的核心规则

RelativeLayout 的定位规则，说白了就两种：

  • 相对于父容器：比如靠左、靠右、居中
  • 相对于兄弟控件：比如在某个按钮的上方、下方、左边、右边

这两种规则可以组合使用。举个例子：

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

    <Button
        android:id="@+id/btn_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我在中间"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/btn_above"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我在上面"
        android:layout_above="@id/btn_center"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

你看，第二个按钮通过 layout_above 指定了参照物是 btn_center，又通过 layout_centerHorizontal 让自己水平居中。这就是相对定位的典型用法。

小技巧： 我习惯给每个需要被引用的控件都加上 android:id，哪怕它本身不需要被操作。因为你永远不知道后面会不会有别的控件要「靠」着它。

4.2 alignParent 系列：跟父容器对齐

alignParent 系列属性，就是让控件「贴」着父容器的某条边。常用的有：

属性 作用
android:layout_alignParentTop 顶部对齐父容器
android:layout_alignParentBottom 底部对齐父容器
android:layout_alignParentLeft 左侧对齐父容器
android:layout_alignParentRight 右侧对齐父容器
android:layout_centerInParent 在父容器中居中（水平和垂直）
android:layout_centerHorizontal 水平居中
android:layout_centerVertical 垂直居中

这些属性都是 boolean 值，设为 true 就生效。举个例子，你想让一个按钮始终固定在屏幕右下角：

<Button
    android:id="@+id/btn_fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="FAB"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_margin="16dp" />

这里我加了个 layout_margin，不然按钮会紧贴边缘，看起来不太舒服。嗯，细节决定体验。

注意： 我曾经犯过一个错——同时设置了 alignParentTop 和 alignParentBottom，结果控件被拉伸了。因为 RelativeLayout 会尽量满足所有约束，如果上下都贴边，控件高度就会被撑满。所以，除非你真的想拉伸，否则别这么干。

4.3 layout_above / layout_below：兄弟控件之间的相对定位

这两个属性是 RelativeLayout 的精髓。它们让控件可以「依附」于另一个控件：

  • android:layout_above="@id/xxx"：当前控件在 xxx 的上方
  • android:layout_below="@id/xxx"：当前控件在 xxx 的下方
  • android:layout_toLeftOf="@id/xxx"：当前控件在 xxx 的左侧
  • android:layout_toRightOf="@id/xxx"：当前控件在 xxx 的右侧

看一个实际例子：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="用户名：" />

    <EditText
        android:id="@+id/input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/label"
        android:hint="请输入用户名" />

</RelativeLayout>

这个布局很常见——左边是标签，右边是输入框。用 layout_toRightOf 就能轻松实现，不需要嵌套 LinearLayout。

核心要点： 使用 layout_above 或 layout_below 时，被引用的控件必须已经定义过 android:id，并且最好在 XML 中先声明被引用的控件。虽然 RelativeLayout 不强制顺序，但我建议把「被依赖的控件」写在前面，这样逻辑更清晰。

4.4 实战：居中与边缘对齐

好了，理论说完了，咱们来点实战。我经常遇到的一个需求是：在屏幕底部固定一个按钮，上面是内容区域，内容区域里有一个居中的标题。用 RelativeLayout 可以这样写：

<RelativeLayout
    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="欢迎使用"
        android:textSize="24sp"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/btn_next"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="下一步"
        android:layout_alignParentBottom="true"
        android:layout_margin="16dp" />

</RelativeLayout>

这个布局里：

  • 标题通过 layout_centerInParent 居中显示
  • 按钮通过 layout_alignParentBottom 固定在底部
  • 两者互不干扰，各司其职

你可能会问：如果我想让标题在按钮的上方，而不是屏幕正中间呢？很简单，用 layout_above：

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="欢迎使用"
    android:textSize="24sp"
    android:layout_above="@id/btn_next"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="32dp" />

这样标题就位于按钮上方 32dp 的位置，并且水平居中。你看，相对定位就是这么灵活。

避坑指南： 我曾经在 RelativeLayout 里同时用了 layout_above 和 layout_alignParentBottom，结果控件位置变得很奇怪。后来发现，这两个属性是冲突的——一个要往上靠，一个要往下贴。RelativeLayout 会尝试同时满足，但最终效果往往不是你想要的。所以，避免对同一个控件使用相互矛盾的定位规则。

4.5 总结

RelativeLayout 的核心就是「相对」二字。你只要记住：

  • 跟父容器对齐用 alignParent 系列
  • 跟兄弟控件对齐用 layout_above/below/toLeftOf/toRightOf
  • 居中用 centerInParent 或 centerHorizontal/centerVertical

嗯，说白了就是给每个控件找一个「参照物」。参照物找对了，布局就稳了。我在实际项目中，能用 RelativeLayout 一层解决的，绝不嵌套两层。这样不仅代码简洁，渲染性能也更好。

下一节我们会聊 LinearLayout 的进阶用法——权重和分割线。到时候你会发现，不同布局之间其实可以互相配合，没有绝对的「谁更好」。

← 上一章 📖 返回目录 下一章 →