安卓开发入门教程-常用布局_RelativeLayout

什么是RelativeLayout

RelativeLayout又称相对布局,是安卓开发中几个常用的布局之一,使用频率最高.支持相对于父控件或同级兄弟控件进行定位.

基础样例

1. 相对父控件定位

效果图

代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:text="左上" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:text="右上" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="中心参考按钮" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:text="左下" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:text="右下" />
</RelativeLayout>

代码说明:

1. android:layout_centerInParent,设置是否在父控件中居中(横向和纵向).
2. android:layout_alignParentStart,设置是否和父控件左对齐.
3. android:layout_alignParentEnd,设置是否和父控件右对齐.
4. android:layout_alignParentTop,设置是否和父控件上对齐(因为默认就是上对齐的,所以就不用设置了).
5. android:layout_alignParentBottom,设置是否和父控件下对齐.

2. 相对同级兄弟控件对齐1(layout_align**)

设置本控件的一侧和目标控件(同级兄弟控件)的同侧对齐,如左侧对齐、右侧对齐.

效果图

代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@+id/centerButton"
        android:text="左对齐" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/centerButton"
        android:text="右对齐" />
    <Button
        android:id="@+id/centerButton"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:text="中心参考按钮" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/centerButton"
        android:text="上对齐" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/centerButton"
        android:text="下对齐" />
</RelativeLayout>

代码说明:

1. android:layout_alignStart,和目标控件左对齐.
2. android:layout_alignEnd,和目标控件右对齐.
3. android:layout_alignTop,和目标控件上对齐.
4. android:layout_alignBottom,和目标控件下对齐.

3. 相对同级兄弟控件对齐2(layout_to**)

设置本控件整体位于目标控件(同级兄弟控件)的左侧、右侧等.

效果图

代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/centerButton"
        android:layout_toStartOf="@+id/centerButton"
        android:text="我在左上" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/centerButton"
        android:layout_toEndOf="@+id/centerButton"
        android:text="我在右上" />
    <Button
        android:id="@+id/centerButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="中心参考按钮" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/centerButton"
        android:layout_toStartOf="@id/centerButton"
        android:text="我在左下" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/centerButton"
        android:layout_toEndOf="@id/centerButton"
        android:text="我在右下" />
</RelativeLayout>

代码说明:

1. android:layout_above,当前控件整体位于目标控件之上.
2. android:layout_below,当前控件整体位于目标控件之下.
3. android:layout_toStartOf,当前控件整体位于目标控件左侧.
4. android:layout_toEndOf,当前控件整体位于目标控件右侧.

基础样例完整源代码

https://gitee.com/cxyzy1/RelativeLayoutDemo

常用属性说明

属性名	用途
android:layout_width	设置控件宽度,可设置为:match_parent(和父控件一样),wrap_content(按照内容自动伸缩),设置固定值(如200dp)
android:layout_height	设置控件高度,可设置为:match_parent(和父控件一样),wrap_content(按照内容自动伸缩),设置固定值(如200dp)
android:background	设置背景,可以是色值(如#FF0000)或图片等
android:visibility	可选值: visible(显示), invisible(隐藏,但是仍占据UI空间),gone(隐藏,且不占UI空间)
android:layout_above	当前控件整体位于目标控件之上.
android:layout_below	当前控件整体位于目标控件之下.
android:layout_toStartOf	当前控件整体位于目标控件左侧.
android:layout_toEndOf	当前控件整体位于目标控件右侧.
android:layout_alignStart	和目标控件左对齐.
android:layout_alignEnd	和目标控件右对齐.
android:layout_alignTop	和目标控件上对齐.
android:layout_alignBottom	和目标控件下对齐.
android:layout_centerInParent	设置是否在父控件中居中(横向和纵向).
android:layout_alignParentStart	设置是否和父控件左对齐.
android:layout_alignParentEnd	设置是否和父控件右对齐.
android:layout_alignParentTop	设置是否和父控件上对齐.
android:layout_alignParentBottom	设置是否和父控件下对齐.

更多属性及实际效果,可以在开发工具里自行体验.