[Android] The most complete analysis of relative layout (RelativeLayout)

1. Overview of RelativeLayout

相对布局(RelativeLayout)It is a layout method that determines the position of controls based on the parent container and sibling controls as references.
insert image description here

To use relative layout, you need to change the layout node to RelativeLayout, the basic format is as follows:

 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 ....
    
</RelativeLayout>

2. Positioning according to the parent container

In the relative layout, the control can be placed in nine positions such as the upper left corner, the upper right corner, the lower left corner, the lower right corner, the upper, lower, left, and right centers, and the center of the parent container through the combination of the following attributes. The properties are as follows:

  • android:layout_alignParentLeft="true"parent container left
  • android:layout_alignParentRight="true"parent container right
  • android:layout_alignParentTop="true"parent container top
  • android:layout_alignParentBottom="true"parent container bottom
  • android:layout_centerHorizontal="true"center horizontally
  • android:layout_centerVertical="true"center vertically
  • android:layout_centerInParent="true"Center both horizontally and vertically
    insert image description here
    Example: After adding android:layout_alignParentRight="true"and - android:layout_alignParentTop="true"properties to a control, the control is in the upper right corner of the parent containerinsert image description here

After adding android:layout_alignParentLeft="true"and android:layout_centerVertical="true"the control is vertically centered on the left side of the parent container
insert image description here

3. Positioning according to sibling controls

In the relative layout, it is also supported to determine the position of other controls by using the determined position control as a reference. The combination of the following properties makes the control be in the upper left corner, upper right corner, lower left corner, lower right corner, directly above and directly below the other control , left, right and so on. The properties are as follows:

  • android:layout_toLeftOf="@+id/button1"On the left of the button1 control

  • android:layout_toRightOf="@+id/button1"On the right of the button1 control

  • android:layout_above="@+id/button1"above the button1 control

  • android:layout_below="@+id/button1"Below the button1 control

  • android:layout_alignLeft="@+id/button1"It is flush with the left side of the button1 control

  • android:layout_alignRight="@+id/button1"flush with the right side of the button1 control

  • android:layout_alignTop="@+id/button1"flush with the top of the button1 control

  • android:layout_alignBottom="@+id/button1"flush with the bottom of the button1 control
    insert image description here

After adding android:layout_toLeftOf="@+id/button1"and android:layout_below="@+id/button1", the control is in the lower left position of button1
insert image description here

After adding android:layout_toLeftOf="@+id/button1"and layout_alignTop="@+id/button1", the control is on the right left of button1
insert image description here

Guess you like

Origin blog.csdn.net/huweiliyi/article/details/126448069