Android Studio 相对布局RelativeLayout实例

桃扇骨 2023-07-23 13:57 13阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 相对布局含义
 *  2. 相对父视图布局
 *  3. 相对指定视图布局

# 1. 相对布局含义 #

相对布局分两种，一种是相对于当前控件的父视图布局，例如在父视图的中间，左下角之类的。

还有一种是相对于指定视图布局，在指定布局的右边，上边之类的。

# 2. 相对父视图布局 #

直接看实例即可：

<?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="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textAllCaps="false"
            android:text="centerInParent" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:textAllCaps="false"
            android:text="centerHorizontal" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:textAllCaps="false"
            android:text="centerVertical" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:textAllCaps="false"
            android:text="alignParentLeft" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:textAllCaps="false"
            android:text="alignParentRight" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:textAllCaps="false"
            android:text="alignParentBottom" />
    </RelativeLayout>

效果如下，具体不演示太多了，随用随查就行：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]

# 3. 相对指定视图布局 #

我们先定义一个视图元素，然后其他元素均相对于该元素布局。

<?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/btnHere"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textAllCaps="false"
            android:text="centerInParent" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/btnHere"
            android:textAllCaps="false"
            android:text="layout_above" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/btnHere"
            android:textAllCaps="false"
            android:text="layout_below" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/btnHere"
            android:textAllCaps="false"
            android:text="alignLeft" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/btnHere"
            android:textAllCaps="false"
            android:text="alignTop" />
    </RelativeLayout>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/8879994ee81d4e0bbb57bb4997309783.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/a245c4d0794e4591902c759c845f3c31.png