【Android从零单排系列三十】《Android布局介绍——RelativeLayout》

前言

小伙伴们，在上文中我们介绍了Android常见布局中的LinearLayout，本文我们继续盘点介绍Android开发中另一个常见的布局，相对布局RelativeLayout。

一 RelativeLayout基本介绍

RelativeLayout是Android中常用的布局容器，它基于相对位置来排列子视图，允许开发者以更灵活的方式组织界面布局。以下是对RelativeLayout的基本介绍：

相对位置：RelativeLayout使用相对位置来定义子视图之间的关系。你可以通过在子视图的属性中指定相对于其他视图的位置进行布局，例如使用android:layout_alignParentTop将一个视图与其父容器顶部对齐，或使用android:layout_below将一个视图放置在另一个视图的下方。
对齐方式：RelativeLayout支持多种对齐方式来控制子视图的位置，包括与父容器对齐（如android:layout_alignParentTop）、与其他视图对齐（如android:layout_toRightOf）以及自身内部对齐（如android:layout_centerVertical）。这些属性可通过设置为true或指定具体的参考视图来生效。
布局规则（Layout Rules）：RelativeLayout使用布局规则来确定视图之间的相对位置。每个子视图都可以通过设置android:layout_alignXXXX属性来指定与其他视图的相对位置关系。布局规则作用于子视图，而不是整个容器，使得开发者能够更精确地控制视图的放置方式。
重叠视图（Overlapping Views）：RelativeLayout允许视图重叠，即一个视图可以部分或完全覆盖另一个视图。这是通过使用android:layout_above、android:layout_below等属性来设置相对位置实现的。
编程控制：除了在XML布局文件中设置属性外，开发者也可以通过编程方式使用RelativeLayout的方法来动态地添加和管理子视图，例如使用addView()、setLayoutParams()等方法。

二 RelativeLayout使用方法

在XML布局文件中定义一个RelativeLayout容器：

代码语言：javascript复制

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 添加子视图 -->

</RelativeLayout>

在RelativeLayout容器内部添加子视图，并设置它们的布局属性：

代码语言：javascript复制

<RelativeLayout
    ...>

    <Button
        android:id="@ id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"/>

    <TextView
        android:id="@ id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 1"
        android:layout_below="@id/button1"
        android:layout_toRightOf="@id/button1"/>

    <!-- 添加其他子视图 -->

</RelativeLayout>

在上面的示例中，我们创建了一个RelativeLayout容器，并在其中添加了一个按钮和一个文本视图。按钮通过android:layout_alignParentTop="true"和android:layout_alignParentLeft="true"的属性值，将其与父容器的顶部和左侧对齐。文本视图则通过android:layout_below="@id/button1"和android:layout_toRightOf="@id/button1"的属性值，将其放置在按钮的下方并且位于按钮的右侧。

可选：使用编程方式操作RelativeLayout。

除了在XML布局文件中设置属性之外，你还可以使用Java代码动态地操作RelativeLayout。通过findViewById()方法获取RelativeLayout容器和子视图的引用，并使用关联的LayoutParams来调整它们的位置和大小：

代码语言：javascript复制

RelativeLayout relativeLayout = findViewById(R.id.relativeLayout);
Button button = findViewById(R.id.button1);
TextView textView = findViewById(R.id.textView1);

// 设置按钮位于父容器右上角
RelativeLayout.LayoutParams buttonParams = (RelativeLayout.LayoutParams) button.getLayoutParams();
buttonParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
buttonParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
button.setLayoutParams(buttonParams);

// 设置文本视图位于按钮下方并且与按钮左对齐
RelativeLayout.LayoutParams textParams = (RelativeLayout.LayoutParams) textView.getLayoutParams();
textParams.addRule(RelativeLayout.BELOW, R.id.button1);
textParams.addRule(RelativeLayout.ALIGN_LEFT, R.id.button1);
textView.setLayoutParams(textParams);

三 RelativeLayout常见属性及方法

常见属性：

android:layout_alignParentTop：将视图与父容器的顶部对齐。
android:layout_alignParentBottom：将视图与父容器的底部对齐。
android:layout_alignParentLeft：将视图与父容器的左侧对齐。
android:layout_alignParentRight：将视图与父容器的右侧对齐。
android:layout_centerVertical：在垂直方向上将视图居中对齐。
android:layout_centerHorizontal：在水平方向上将视图居中对齐。
android:layout_below：使视图位于另一个视图下方。
android:layout_above：使视图位于另一个视图上方。
android:layout_toLeftOf：使视图位于另一个视图的左侧。
android:layout_toRightOf：使视图位于另一个视图的右侧。

常见方法（通过LayoutParams）：

addRule(int verb)：添加相对布局规则，如RelativeLayout.ALIGN_PARENT_TOP、RelativeLayout.BELOW等。
addRule(int verb, int anchor)：添加相对布局规则，并指定参考视图id。
removeRule(int verb)：移除相对布局规则。
getRules()：获取所有的相对布局规则。
addRule(int verb, int subject, int anchor)：添加双侧相对布局规则，指定参考视图id。
alignWithParent(boolean align)：设置是否将视图与父容器边界对齐。
alignBaseline(int anchor)：使视图的基线与指定视图的基线对齐。
setMargins(int left, int top, int right, int bottom)：设置视图的外边距。

四 RelativeLayout简单案例

以下是一个简单的RelativeLayout布局案例：

这个布局中包含了两个按钮（btn1和btn2）和一个文本视图（textView）。其中，textview位于btn1的下方并水平居中对齐。btn1位于父容器的左上角，而btn2位于右上角。

通过使用android:layout_alignParentTop、android:layout_alignParentLeft、android:layout_alignParentRight、android:layout_below、android:layout_centerHorizontal等属性，我们可以轻松地设置视图之间的相对位置关系。

五总结

RelativeLayout提供了更灵活的布局能力，使开发者能够精确控制子视图之间的位置关系。它适用于复杂的界面布局，特别是需要根据相对位置来调整UI元素的场景。

android 容器 layout 布局开发者

0 人点赞

【Android从零单排系列三十】《Android布局介绍——RelativeLayout》

前言

一 RelativeLayout基本介绍

二 RelativeLayout使用方法

三 RelativeLayout常见属性及方法

四 RelativeLayout简单案例

五 总结

五总结