[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.
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 leftandroid:layout_alignParentRight="true"
parent container rightandroid:layout_alignParentTop="true"
parent container topandroid:layout_alignParentBottom="true"
parent container bottomandroid:layout_centerHorizontal="true"
center horizontallyandroid:layout_centerVertical="true"
center verticallyandroid:layout_centerInParent="true"
Center both horizontally and vertically
Example: After addingandroid:layout_alignParentRight="true"
and -android:layout_alignParentTop="true"
properties to a control, the control is in the upper right corner of the parent container
After adding android:layout_alignParentLeft="true"
and android:layout_centerVertical="true"
the control is vertically centered on the left side of the parent container
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
After adding android:layout_toLeftOf="@+id/button1"
and android:layout_below="@+id/button1"
, the control is in the lower left position of button1
After adding android:layout_toLeftOf="@+id/button1"
and layout_alignTop="@+id/button1"
, the control is on the right left of button1