Android 布局系列（三）：RelativeLayout 使用指南

引言

在 Android 开发中，布局管理是构建用户界面的核心。RelativeLayout 曾经是 Android 中非常流行的一种布局方式，广泛应用于各种项目中。它通过相对位置关系组织视图元素，使得我们可以根据父容器或者其他视图的位置来灵活调整子视图的布局。与 LinearLayout 和 ConstraintLayout 不同，RelativeLayout 更强调视图之间的相对关系，适合于一些简单的相对定位布局。

尽管 ConstraintLayout 在现代 Android 开发中逐渐成为主流，但 RelativeLayout 仍然在某些场景中具有不可替代的优势。本文将深入探讨 RelativeLayout 的使用方法、常用属性以及典型的应用场景，帮助你更好地理解这一布局工具的优势与局限。

RelativeLayout 的基本概念和用途

RelativeLayout 是Android中的一种布局方式，它允许子视图根据相对位置关系来布局，而不像LinearLayout 那样将视图按顺序排列。通过设置每个子视图与父容器或其他视图的相对位置，RelativeLayout 使得布局更加灵活，适合处理一些不规则和复杂的视图布局需求。

RelativeLayout 的核心思想是，通过属性设置来确定每个视图的位置。例如，某个视图可以相对于父布局的顶部、底部、左侧、右侧对齐，也可以相对于其他子视图的位置来确定自己的位置。这种相对定位使得布局能够更加自由和动态。

常见的使用场景：

1. 简单的对齐需求：

比如，在屏幕的顶部放置一个标题，中间 放置一个图像，底部在放置一个按钮，RelativeLayout 能非常方便地处理这种场景，通过设置子视图与父容器的对齐关系来实现。

2. 视图之间的相对位置：

我们可以很容易地让一个按钮位于另一个按钮的右边，或让一个文本框位于一个图像的下方。只需指定相对于其他视图的位置，而不需要通过嵌套的布局来实现。

3. 复杂的UI排列：

对于一些具有相对关系的复杂布局，RelativeLayout 可以通过减少视图层级的嵌套来提高性能，并保持布局的清晰和可维护性。

相比于其它布局，RelativeLayout通过直接指定相对位置来减少视图的层级，提高性能，由于它提供了多种对齐方式，所以也提高了布局的灵活性。

RelativeLayout 的常用属性

RelativeLayout由于其灵活的特性，因此它的属性相对于LinearLayout也要多一些。接下来，我们将这几个常用的属性分为五部分进行详细介绍。

1. 基本属性

基本属性有两个gravity和ignoreGravity。

• gravity：这个属性控制视图在其父容器中的对齐方式。它类似于LinearLayout中的android:gravity，不过需要注意的是在RelativeLayout中，gravity是控制子视图的内容如何在其自身的框架内对齐。例如 android:gravity="center" 会让视图的内容在其自身内居中对齐，而不管它在父容器中的位置。
• ignorGravity：当设置为true时，它会使得视图忽略gravity属性的影响，这通常用于某些特殊需求的场景，例如，如果你希望视图内的内容不受父容器gravity的影响，但仍然使其位置相关的属性如 layout_alignParentTop。

2. 根据父容器定位的属性

这些属性使得你可以根据父容器的边界来定位子视图的位置。

• layout_alignParentTop：将视图的顶部与父容器的顶部对齐。
• layout_alignParentLeft：将视图的左边与父容器的左边对齐。
• layout_alignParentRight：将视图的右边与父容器的右边对齐。
• layout_alignParentBottom：将视图的底部与父容器的底部对齐。
• layout_centerInParent：将视图居中于父容器。
• layout_centerHorizontal：将视图水平居中于父容器。
• layout_centerVertical：将视图垂直居中于父容器。

这些属性非常适合用来做一些基本的对齐和定位，比如将一个按钮固定在屏幕底部，或者将一个视图居中显示。

3. 根据兄弟组件定位的属性

通过这些属性，自视图可以相对于其他子视图进行定位，

• layout_toLeftOf：将视图放置在另一个视图的左侧。
• layout_toRightOf：将视图放置在另一个视图的右侧。
• layout_above：将视图放置在另一个视图的上方。
• layout_blow：将视图放在另一个视图的下放。
• layout_alignTop：将视图的顶部与另外一个视图对齐。
• layout_alignLeft：将视图的左侧与另外一个视图对齐。
• layout_alignRight：将视图的右侧与另外一个视图对齐。
• layout_alignBottom：将视图的底部与另外一个视图对齐。

这些属性在处理相对位置时非常方便，特别是当你希望一个视图与另一个视图保持相对位置时。

4. margin 偏移

margin 属性用于设置视图的外边距，也就是视图与其相对应的兄弟元素或者父容器之间的距离。

• layout_marginTop：视图上方的外边距。
• layout_marginLeft：视图左侧的外边距。
• layout_marginRight：视图右侧的外边距。
• layout_marginBottom：视图底部的外边距。

这些属性可以用来调节视图之间的间隔，让布局更加灵活。例如，可以通过 layout_marginTop 给按钮添加与上面视图的间距。

5. padding 的填充

padding 属性用于控制视图内部内容的填充，即视图的边框与其内容之间的距离。

• android:paddingTop：视图顶部内容的填充。
• android:paddingLeft：视图左侧内容的填充。
• android:paddingRight：视图右侧内容的填充。
• android:paddingBottom：视图底部内容的填充。

通过设置不同的 padding 值，你可以调整视图内部内容的位置，使其不会紧贴视图的边缘。

RelativeLayout 的使用示例

我们就以一个梅花布局为案例，它既能展示RelativeLayout 的强大布局能力，又能够体现其灵活性和相对定位的优势。

首相将布局分成两个部分：

1. 中央的视图：放在屏幕的正中间。
2. 四个角落的视图：每个方向上各放置一个视图。

具体代码实现如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"><!--    中心视图--><TextViewandroid:id="@+id/center"android:layout_width="100dp"android:layout_height="100dp"android:textAlignment="center"android:text="中心"android:background="#FF0000"android:layout_centerInParent="true"/><!--    顶部视图--><TextViewandroid:layout_width="100dp"android:layout_height="100dp"android:textAlignment="center"android:text="上"android:background="#FFF000"android:layout_above="@+id/center"android:layout_centerHorizontal="true"/>
<!--    左侧视图--><TextViewandroid:layout_width="100dp"android:layout_height="100dp"android:textAlignment="center"android:text="左"android:background="#FFF000"android:layout_toLeftOf="@+id/center"android:layout_centerVertical="true"/>
<!--    右侧视图--><TextViewandroid:layout_width="100dp"android:layout_height="100dp"android:textAlignment="center"android:text="右"android:background="#FFF000"android:layout_toRightOf="@+id/center"android:layout_centerVertical="true"/>
<!--    底部视图--><TextViewandroid:layout_width="100dp"android:layout_height="100dp"android:textAlignment="center"android:text="下"android:background="#FFF000"android:layout_below="@+id/center"android:layout_centerHorizontal="true"/></RelativeLayout>

1. 中心视图：使用android:layout_centerInParent="true" 保证视图居中显示。
2. 顶部视图：使用android:layout_above="@+id/center"，将视图放置到中心视图的下方，使用android:layout_centerHorizontal="true" 确保它水平居中。
3. 左侧视图：使用android:layout_toLeftOf="@+id/center"，将视图放置到中心视图的左侧，使用android:layout_centerVertical="true" 确保它垂直居中。
4. 右侧视图：使用android:layout_toRightOf="@id/center"，将视图放置到中心视图的右侧，使用android:layout_centerVertical="true" 确保它垂直居中。
5. 底部视图：使用android:layout_below="@id/center"，将视图放置到中心视图的下方，使用 android:layout_centerHorizontal="true" 确保它水平居中。

效果如下：

通过这种方式，所有视图将会围绕中心视图进行排列，达到上下左右的效果，但是呢现在的情况看上去并不是十分美观，我们可以通过margin 来设置一些它们之间的间距。以顶部视图和左侧视图为例，代码如下：

<!--    顶部视图--><TextViewandroid:layout_width="100dp"android:layout_height="100dp"android:textAlignment="center"android:text="上"android:background="#FFF000"android:layout_above="@+id/center"android:layout_centerHorizontal="true"android:layout_marginBottom="40dp"/>
<!--    左侧视图--><TextViewandroid:layout_width="100dp"android:layout_height="100dp"android:textAlignment="center"android:text="左"android:background="#FFF000"android:layout_toLeftOf="@+id/center"android:layout_centerVertical="true"android:layout_marginRight="40dp"/>

1. 顶部视图：通过android:layout_marginBottom="40dp"设置它距离下面40dp，也就是向上移动。
2. 左侧视图：通过 android:layout_marginRight="40dp"设置它距离右侧40dp，也就是向左移动40dp。

右侧视图和底部视图同理，全都设置完成后效果如下：

结语

通过本次示例，我们可以看到，虽然使用 RelativeLayout 来实现一个“上下左右”布局并不难，但要达到精确的对齐效果，我们需要理解并熟练运用 RelativeLayout 中的各种布局属性。掌握这些属性的使用，能够让我们在设计布局时更加灵活和高效。

当然，随着布局需求的复杂化，灵活使用这些属性是提高开发效率的关键。只要多加练习，并根据实际需求进行调整，你将能快速实现各种复杂的布局效果。

布局的设计不仅仅是对技术的掌握，更是对细节的关注。多用、多实践，你会发现 RelativeLayout 作为一个强大而灵活的布局工具，在 Android 开发中能带来很大的便利。