基础布局之RelativeLayout相对布局
概述
相对布局（RelativeLayout）是一种根据父容器和兄弟控件作为参照来确定控件位置的布局方式。
使用相对布局，需要将布局节点改成RelativeLayout，基本格式如下：
<?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">
</RelativeLayout>
一、属性分类
线性布局和相对布局是兼容的，在线性布局常用的属性外，最常用的属性如下：
与父容器定位相关属性
| 属性 | 作用 |
|---|---|
| android:layout_alignParentTop | 控件顶部与父布局的顶部对齐。 |
| android:layout_alignParentBottom | 控件底部与父布局的底部对齐。 |
| android:layout_alignParentLeft | 控件左边与父布局的左边对齐。 |
| android:layout_alignParentRight | 控件右边与父布局的右边对齐。 |
| android:layout_alignParentStart | 将控件的起始边（根据布局方向，可能是左边或右边）与父容器的起始边对齐。 |
| android:layout_alignParentEnd | 将控件的结束边（根据布局方向，可能是右边或左边）与父容器的结束边对齐。 |
| android:layout_centerHorizontal | 将控件水平居中对齐。 |
| android:layout_centerVertical | 将控件垂直居中对齐。 |
| android:layout_centerInParent | 水平垂直都居中 |
相对定位属性：
| 属性 | 作用 |
|---|---|
| android:layout_above | 控件放置在指定控件的上方。 |
| android:layout_below | 控件放置在指定控件的下方。 |
| android:layout_toLeftOf | 控件放置在指定控件的左边。 |
| android:layout_toRightOf | 控件放置在指定控件的右边。 |
| android:layout_alignTop | 控件的顶部与指定控件的顶部对齐。 |
| android:layout_alignBottom | 控件的底部与指定控件的底部对齐。 |
| android:layout_alignLeft | 控件的左边与指定控件的左边对齐。 |
| android:layout_alignRight | 控件的右边与指定控件的右边对齐。 |
| android:layout_alignStart | 将控件的起始边（根据布局方向，可能是左边或右边）与指定控件的起始边对齐。 |
| android:layout_alignEnd | 将控件的结束边（根据布局方向，可能是右边或左边）与指定控件的结束边对齐。 |
| android:layout_alignBaseline | 控件的基线与指定控件的基线对齐。 |
其中start、end相关的两个属性通常用于支持不同语言的布局需求，例如从右到左的阿拉伯语布局。在安卓开发中，可以通过设置这两个属性来实现适应不同语言布局方向的界面设计。
二、父容器定位属性
2.1 示例1
简单举例一下：
<?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">
<Button
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@color/green" />
</RelativeLayout>
与父布局右边对齐，垂直居中
2.2 示例2
看一下 android:layout_centerInParent=“true”
在父布局中垂直、水平方向都居中。
<?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">
<Button
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:background="@color/green" />
</RelativeLayout>
三、相对定位属性
3.1 示例1
看一下
android:layout_above 控件放置在指定控件的上方。
android:layout_below 控件放置在指定控件的下方。
android:layout_toLeftOf 控件放置在指定控件的左边。
android:layout_toRightOf 控件放置在指定控件的右边。
<?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">
<Button
android:id="@+id/center"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:background="@color/green" />
<Button
android:id="@+id/left"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_toLeftOf="@+id/center"
android:background="@color/pink" />
<Button
android:id="@+id/right"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_toRightOf="@+id/center"
android:background="@color/blue" />
<Button
android:id="@+id/top"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="@+id/center"
android:background="@color/red" />
<Button
android:id="@+id/below"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@+id/center"
android:background="@color/yellow" />
</RelativeLayout>
3.2 示例2
在上面的基础上添加
android:layout_alignTop 控件的顶部与指定控件的顶部对齐。
android:layout_alignBottom 控件的底部与指定控件的底部对齐。
android:layout_alignLeft 控件的左边与指定控件的左边对齐。
android:layout_alignRight 控件的右边与指定控件的右边对齐。
分别与中心控件的顶部、底部、左边、右边对齐。
<?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">
<Button
android:id="@+id/center"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:background="@color/green" />
<Button
android:id="@+id/left"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignTop="@+id/center"
android:layout_toLeftOf="@+id/center"
android:background="@color/pink" />
<Button
android:id="@+id/right"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignBottom="@id/center"
android:layout_toRightOf="@+id/center"
android:background="@color/blue" />
<Button
android:id="@+id/top"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_above="@+id/center"
android:layout_alignLeft="@+id/center"
android:background="@color/red" />
<Button
android:id="@+id/below"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@+id/center"
android:layout_alignRight="@+id/center"
android:background="@color/yellow" />
</RelativeLayout>
3.3 示例3
看一下android:layout_alignBaseline的使用：
在安卓相对布局中，android:layout_alignBaseline 是用于将控件的基线与指定控件的基线对齐的属性。基线是文本行中字符底部对齐的虚拟线，通常用于对齐文本或文字相关的控件。
使用详解如下：
当一个控件设置了 android:layout_alignBaseline=“@id/otherView”，该控件的基线会与指定控件（@id/otherView）的基线对齐。
如果两个控件都设置了 android:layout_alignBaseline，则它们的基线会对齐。
如果指定的控件没有基线（比如非文本控件），则基线对齐的效果可能不明显。
没有添加layout_alignBaseline的效果：
<?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">
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/yellow"
android:text="hello" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/text1"
android:background="@color/pink"
android:padding="20dp"
android:text="world" />
</RelativeLayout>
添加layout_alignBaseline的效果：
给textview1添加
<?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">
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/yellow"
android:layout_alignBaseline="@+id/text2"
android:text="hello" />
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/text1"
android:background="@color/pink"
android:padding="20dp"
android:text="world"
/>
</RelativeLayout>
给textview2添加
<?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">
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/yellow"
android:text="hello" />
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/text1"
android:background="@color/pink"
android:padding="20dp"
android:text="world"
android:layout_alignBaseline="@+id/text1"
/>
</RelativeLayout>
