Android Relative Layout 安卓相对布局详解

思维导图可在幕布找到

1. 基础

如果在相对布局里，控件没有指明相对位置，则默认都是在相对布局的左上角：

<textview
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff00ff"
    android:padding="20dp"
    android:text="item2"/>

<textview
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff0000"
    android:text="item1"/>

gravity

gravity属性用来设置容器内组件的对齐方式

<textview
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:background="#ff4081"
    android:text="item1" />

效果为

2. 根据兄弟控件定位

2.1 相对兄弟组件的位置

android:layout_above：// 参考的兄弟控件上边
android:layout_below：// 参考的兄弟控件下边
android:layout_toleftof // 参考的兄弟控件的左边
android:layout_torightof // 参考的兄弟控件右边

代码示例

android:layout_below等属性通过制定控件的id来选择需要参考的兄弟组件，即@id/firsttext：

<textview
    android:id="@+id/firsttext"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff0000 "
    android:text="firsttext" />

<textview
    android:id="@+id/righttext"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#00ff00"
    android:layout_torightof="@id/firsttext"
    android:text="righttext" />

<textview
    android:id="@+id/bottomtext"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#00ff00"
    android:layout_below="@id/firsttext"
    android:text="bottomtext" />

显示的效果为

2.2 对齐相对组件

对齐兄弟相对组件的有四个属性，为android:layout_align${方向}

android:layout_aligntop // 对齐参考组件的上边界
android:layout_alignbottom // 对齐参考组件的下边界
android:layout_alignleft // 对齐参考组件的左边界
android:layout_alignright  // 对齐参考组件的右边界

android:layout_aligntop等属性同样是通过制定控件的id来设置参考的组件的边界线：

代码示例1

<textview
    android:id="@+id/item1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff00ff"
    android:padding="20dp"
    android:text="item2"/>

<textview
    android:id="@+id/item2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff0000"
    android:padding="10dp"
    android:layout_below="@id/item1"
    android:layout_alignright="@id/item1"
    android:text="item1"/>

效果为

代码实例2

<textview
    android:id="@+id/item3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff00ff"
    android:padding="20dp"
    android:text="item3"/>

<textview
    android:id="@+id/item4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff0000"
    android:padding="10dp"
    android:layout_torightof="@+id/item3"
    android:layout_alignbottom="@id/item3"
    android:text="item4"/>

效果为

3. 根据父控件定位

3.1 与父控件的四个边缘对齐

与父控件的边缘对齐的属性由android:layout_alignparent${方向}组成

android:layout_alignparenttop  // 顶部对齐于父控件
android:layout_alignparentbottom // 底部对齐于父控件
android:layout_alignparentleft // 左对齐于父控件
android:layout_alignparentright // 右对齐于父控件

需要注意的是，这些属性是通过布尔值来设置是否对齐于父控件的某个方向的：

<relativelayout
    android:layout_width="match_parent"
    android:layout_height="300dp">
    <textview
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first"
        android:textsize="50dp"
        android:background="#ff0000"
        android:layout_alignparentright="true"
        android:layout_alignparentbottom="true"/>
</relativelayout>

效果为：

除此之外还有layout_alignparentleft、layout_alignparenttop

3.2 对齐至父控件的*

对齐至父控件*的属性可以用来设置居中的布局位置：

android:layout_centerhorizontal  // 水平居中
android:layout_centervertical // 垂直居中
android:layout_centerinparent // 水平且垂直居中，处于父组件的正*位置

代码示例

同样，这些属性也是通过设置的值也是布尔类型：

<textview
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="centerhorizontal"
    android:textsize="50dp"
    android:background="#ff0000"
    android:layout_centerhorizontal="true"/>

<textview
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="centervertical"
    android:textsize="50dp"
    android:background="#ff0000"
    android:layout_centervertical="true"/>
    
<textview
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="centerinparent"
    android:textsize="15dp"
    android:background="#0000ff"
    android:layout_centerinparent="true"/>

效果为：

4. 其他

对齐至控件的基准线

<textview
    android:id="@+id/firsttext"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textsize="100dp"
    android:text="hello" />

<textview
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_torightof="@+id/firsttext"
    android:text="world" />

如果没有使用对齐基准线，那么当hello的字体的大于world时，world则无法和hello在同一基准线上：

通过给world的textview添加layout_alignbaseline属性来实现对齐firsttext控件的基准线：

android:layout_alignbaseline="@+id/firsttext"

效果为：

5. 实例

用相对布局来完成经典的梅花布局

    <!--*-->
    <imageview
        android:id="@+id/img1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerinparent="true"
        android:src="@drawable/pic1"/>

    <!--右边-->
    <imageview
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerinparent="true"
        android:layout_toleftof="@+id/img1"
        android:layout_centervertical="true"
        android:src="@drawable/pic2"/>

    <!--左边-->
    <imageview
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_torightof="@+id/img1"
        android:layout_centervertical="true"
        android:src="@drawable/pic3"/>

    <!--上边-->
    <imageview
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_above="@+id/img1"
        android:layout_centerhorizontal="true"
        android:src="@drawable/pic4"/>

    <!--下边-->
    <imageview
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_below="@+id/img1"
        android:layout_centerhorizontal="true"
        android:src="@drawable/pic5"/>

效果图为

参考资料

2.2.2 relativelayout(相对布局)