UI布局之相对布局

最新推荐文章于 2025-08-05 07:03:40 发布

原创最新推荐文章于 2025-08-05 07:03:40 发布 · 729 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android

Android 专栏收录该内容

1 篇文章

订阅专栏

本文深入解析了Android中相对布局的使用方法，包括控件相对于指定ID控件和父组件的位置设置，以及如何实现水平、垂直居中。通过具体示例代码，展示了如何利用这些属性创建复杂的UI布局。

UI布局之相对布局

一、

1.相对于指定ID控件

android:layout_above，将控件位置设定在指定ID控件之上
android:layout_above，将控件位置设定在指定ID控件之上
android:layout_below，将控件位置设定在指定ID控件之下
android:layout_toLeftOf，将控件位置设定在指定ID控件左侧
android:layout_toRightOf，将控件位置设定在指定ID控件右侧
android:layout_alignLeft，设置控件与指定Id控件左边界对齐
android:layout_alignRight，设置控件与指定Id控件右边界对齐
android:layout_alignTop，设置控件与指定Id控件上边界对齐
android:layout_alignBotton，设置控件与指定Id控件下边界对齐
android:layout_alignBaseline，设置控件与指定ID控件的基线对齐，设置边界对齐以及指定上线相对位置失效

2.相对于父组件
android:layout_alignParentTop，设置组件处于父容器顶部
android:layout_alignParentBotton，设置组件处于父容器底部
android:layout_alignParentLeft，设置组件处于父容器左侧
android:layout_alignParentRight，设置组件处于父容器右侧

3.居中属性
android:layout_centerHorizontal，在父容器中水平居中
android:layout_centerVertical，在父容器中垂直居中
android:layout_centerInParent，在父容器中水平、垂直居中

二、

示例：
使用相对布局实现下图布局
在这里插入图片描述
思路：顺时针开始

在这里插入图片描述
具体代码：

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

    <TextView
        android:id="@+id/iv_top"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#FCF729"
        />
    <TextView
        android:id="@+id/iv_right01"
        android:layout_width="60dp"
        android:layout_height="900dp"
        android:background="#EE1C1C"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/iv_top"
        />
    <TextView
        android:id="@+id/iv_bottom"
        android:layout_width="480dp"
        android:layout_height="60dp"
        android:background="#F321DF"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/iv_right01"
        />
    <TextView
        android:id="@+id/iv_left01"
        android:layout_width="60dp"
        android:layout_height="840dp"
        android:background="#A129EB"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/iv_top"
        android:layout_above="@+id/iv_bottom"
        />
    <TextView
        android:id="@+id/iv_top02"
        android:layout_width="420dp"
        android:layout_height="60dp"
        android:background="#0E7FE9"

        android:layout_below="@+id/iv_top"
        android:layout_toLeftOf="@+id/iv_right01"
        android:layout_toRightOf="@+id/iv_left01"
        />
    <TextView
        android:id="@+id/iv_right02"
        android:layout_width="60dp"
        android:layout_height="780dp"
        android:background="#16F5F5"
        android:layout_toLeftOf="@+id/iv_right01"
        android:layout_below="@+id/iv_top02"
        android:layout_above="@id/iv_bottom"

        />
    <TextView
        android:id="@+id/iv_bottom02"
        android:layout_width="360dp"
        android:layout_height="60dp"
        android:background="#30CAB2"
        android:layout_toLeftOf="@id/iv_right02"
        android:layout_toRightOf="@id/iv_left01"
        android:layout_above="@+id/iv_bottom"

        />
    <TextView
        android:id="@+id/iv_left02"
        android:layout_width="60dp"
        android:layout_height="720dp"
        android:background="#2BE978"
        android:layout_toRightOf="@id/iv_left01"
        android:layout_above="@+id/iv_bottom02"
        android:layout_below="@id/iv_top02"

        />

</RelativeLayout>