Android从零单排系列三十《Android布局——RelativeLayout》

目录

前言

一 RelativeLayout基本介绍

二 RelativeLayout使用方法

三 RelativeLayout常见属性及方法

四 RelativeLayout简单案例

五 总结

前言

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

一 RelativeLayout基本介绍

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

1. 相对位置：RelativeLayout使用相对位置来定义子视图之间的关系。你可以通过在子视图的属性中指定相对于其他视图的位置进行布局，例如使用android:layout_alignParentTop将一个视图与其父容器顶部对齐，或使用android:layout_below将一个视图放置在另一个视图的下方。

2. 对齐方式：RelativeLayout支持多种对齐方式来控制子视图的位置，包括与父容器对齐（如android:layout_alignParentTop）、与其他视图对齐（如android:layout_toRightOf）以及自身内部对齐（如android:layout_centerVertical）。这些属性可通过设置为true或指定具体的参考视图来生效。

3. 布局规则（Layout Rules）：RelativeLayout使用布局规则来确定视图之间的相对位置。每个子视图都可以通过设置android:layout_alignXXXX属性来指定与其他视图的相对位置关系。布局规则作用于子视图，而不是整个容器，使得开发者能够更精确地控制视图的放置方式。

4. 重叠视图（Overlapping Views）：RelativeLayout允许视图重叠，即一个视图可以部分或完全覆盖另一个视图。这是通过使用android:layout_above、android:layout_below等属性来设置相对位置实现的。

5. 编程控制：除了在XML布局文件中设置属性外，开发者也可以通过编程方式使用RelativeLayout的方法来动态地添加和管理子视图，例如使用addView()、setLayoutParams()等方法。

二 RelativeLayout使用方法

1. 在XML布局文件中定义一个RelativeLayout容器：
   1.  
      <RelativeLayout
   2.  
      xmlns:android="http://schemas.android.com/apk/res/android"
   3.  
      android:layout_width="match_parent"
   4.  
      android:layout_height="match_parent">
   5.  
       
   6.  
      <!-- 添加子视图 -->
   7.  
       
   8.  
      </RelativeLayout>
2. 在RelativeLayout容器内部添加子视图，并设置它们的布局属性：
   1.  
      <RelativeLayout
   2.  
      ...>
   3.  
       
   4.  
      <Button
   5.  
      android:id="@ id/button1"
   6.  
      android:layout_width="wrap_content"
   7.  
      android:layout_height="wrap_content"
   8.  
      android:text="Button 1"
   9.  
      android:layout_alignParentTop="true"
   10.  
       android:layout_alignParentLeft="true"/>
   11.  
        
   12.  
       <TextView
   13.  
       android:id="@ id/textView1"
   14.  
       android:layout_width="wrap_content"
   15.  
       android:layout_height="wrap_content"
   16.  
       android:text="TextView 1"
   17.  
       android:layout_below="@id/button1"
   18.  
       android:layout_toRightOf="@id/button1"/>
   19.  
        
   20.  
       <!-- 添加其他子视图 -->
   21.  
        
   22.  
       </RelativeLayout>

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

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

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

1.  
   RelativeLayout relativeLayout = findViewById(R.id.relativeLayout);
2.  
   Button button = findViewById(R.id.button1);
3.  
   TextView textView = findViewById(R.id.textView1);
4.  
    
5.  
   // 设置按钮位于父容器右上角
6.  
   RelativeLayout.LayoutParams buttonParams = (RelativeLayout.LayoutParams) button.getLayoutParams();
7.  
   buttonParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
8.  
   buttonParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
9.  
   button.setLayoutParams(buttonParams);
10.  
     
11.  
    // 设置文本视图位于按钮下方并且与按钮左对齐
12.  
    RelativeLayout.LayoutParams textParams = (RelativeLayout.LayoutParams) textView.getLayoutParams();
13.  
    textParams.addRule(RelativeLayout.BELOW, R.id.button1);
14.  
    textParams.addRule(RelativeLayout.ALIGN_LEFT, R.id.button1);
15.  
    textView.setLayoutParams(textParams);

三 RelativeLayout常见属性及方法

常见属性：

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

常见方法（通过LayoutParams）：

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

四 RelativeLayout简单案例

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

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

    <Button
        android:id="@ id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"/>

    <Button
        android:id="@ id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"/>

    <TextView
        android:id="@ id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, RelativeLayout!"
        android:layout_below="@id/btn1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"/>
</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元素的场景。

这篇好文章是转载于：学新通技术网