RelativeLayout 详解

RelativeLayout，顾名思义，相对布局，也是非常常用的布局，他比LinearLayout更加灵活，可以实现非常复杂的UI。

属性

RelativeLayout的父类属性不多，只有2个。

• android:gravity：控制子控件的位置。
• android:ignoreGravity：参数是View ID，就是android:gravity对某个子控件不生效，android:ignoreGravity="@+id/ignore"。

Child View 属性

Child View 的属性很多，我把他分为3类。

1. 对父布局属性

这里属性都是Boolean类型

• android: layout_alignParentLeft：靠左边显示。

• android: layout_alignParentTop：靠顶部显示。

• android: layout_alignParentRight：靠右边显示。

• android: layout_alignParentBottom：靠底部显示。

• android: layout_centerInParent：居中显示。

• android: layout_centerHorizontal：水平居中显示。

• android: layout_centerVertical：垂直居中显示。

• android: layout_alignWithParentIfMissing：如果对应的兄弟元素找不到的话就以父元素做参照物。

• android: layout_alignParentStart：和layout_alignParentLeft的功能类似，Android 4.1引入的，是为了更好支持right-to-left布局方式（适配从右到左的语言，比如阿拉伯语）。

• android: layout_alignParentEnd：和layout_alignParentRight的功能类似，Android 4.1引入的，是为了更好支持right-to-left布局方式（适配从右到左的语言，比如阿拉伯语）。

2. 相对其他控件位置属性

这里属性类型全部都是其他兄弟控件的ID

• android: layout_toLeftOf：在另外一个 View 的左边

• android: layout_toRightOf：在另外一个 View 的右边

• android: layout_above：在另外一个 View 的上方

• android: layout_below：在另外一个 View 的下方

• android: layout_toStartOf：和 layout_toLeftOf 用法类似，支持right-to-left布局

• android: layout_toEndOf：和 layout_toRightOf 用法类似，支持right-to-left布局

3. 相对其他控件对齐方式

这里属性类型全部都是其他兄弟控件的ID

• android: layout_alignBaseline：该 View 的 baseline 和另外一个 View 的 baseline 对齐。

• android: layout_alignLeft：将该 View 的左边边缘与另外一个 View 的左边边缘

• android: layout_alignTop：将该 View 的顶部边缘与另外一个 View 的顶部边缘

• android: layout_alignRight：将该 View 的右边边缘与另外一个 View 的右边边缘

• android: layout_alignBottom：将该 View 的底部边缘与另外一个 View 的底部边缘

• android: layout_alignStart：和 layout_alignLeft 类似，支持right-to-left布局

• android: layout_alignEnd：和 layout_alignRight 类似，支持right-to-left布局

测试

相对其他 View 位置

layout_toLeftOf、layout_toRightOf、layout_above、layout_below

image.png

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:layout_centerInParent="true"
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="target" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/button1"
        android:text="layout_toLeftOf" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/button1"
        android:text="layout_toRightOf" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button1"
        android:text="layout_above" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:text="layout_below" />
</RelativeLayout>

和其他 View 的对齐方式

image.png

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="cdgf"
        android:layout_centerInParent="true"
        android:textSize="50sp" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:text="alignBaseline"
        android:textSize="20sp" />
     <TextView
         android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/button1"
        android:text="alignTop"
        android:textSize="20sp" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:text="alignLeft"
        android:textSize="20sp" />
    <TextView
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/button1"
        android:text="alignRight"
        android:textSize="20sp" />
</RelativeLayout>

android:ignoreGravity

image.png

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:ignoreGravity="@+id/ignore">
    <Button
        android:id="@+id/normal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="normal" />
    <Button
        android:id="@+id/ignore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ignore" />
</RelativeLayout>