Android布局（二）——相对布局RelativeLayout

今天来讲布局管理器的第二个布局——相对布局RelativeLayout，就名字来理解，相对布局肯定有是一个参考物的，以什么为参考来相邻或者对齐，有父控件或者之前定义的控件。

1.主要常用的属性

android:layout_toLeftOF：在谁的左边

android:layout_toRightOF：在谁的右边

android:layout_alignBottom：跟谁底部对齐

android:layout_alignParentBottom：跟父控件底部对齐

android:layout_below：在谁的下边

可以直接创建layout的时候定义它的布局，然后再写代码。

来看一下大概样式。

<?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">

    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#000000">
    </View>

</RelativeLayout>

这是相对布局的一个大概写法，效果如图

 

2.一些属性的解释说明

（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">

    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#000000">
    </View>
    <View
        android:id="@+id/view2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#F32016"
        android:layout_alignParentBottom="true" //摆放在父控件的下方
        android:layout_alignParentRight="true">//摆放在父控件的右方
    </View>
    <View
        android:id="@+id/view3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#2BD56F"
        android:layout_toRightOf="@+id/view1" //摆放在控件view1的右方
        >
    </View>
    <View
        android:id="@+id/view4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#2B452F"
        android:layout_below="@+id/view1">//摆放在控件view1的下方
    </View>
    

</RelativeLayout>

效果如下图所示

（2）相对布局中还可以嵌套布局（相对布局或者线性布局）

<LinearLayout
        android:id="@+id/ll1"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_below="@id/view4"
        android:background="@color/colorBlue"
        android:padding="15dp"
        android:orientation="horizontal">
        <View
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#FF0033">

        </View>
        <RelativeLayout
            android:id="@+id/rl1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorDark"
            android:padding="15dp">

            <View
                android:id="@+id/view5"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:background="@color/colorPrimary">

            </View>
            <View
                android:id="@+id/view6"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:background="@color/colorWhite"
                android:layout_toRightOf="@id/view5"
                android:layout_marginLeft="10dp">

            </View>
        </RelativeLayout>

    </LinearLayout>

效果如下图所示：

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">

    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#000000">
    </View>
    <View
        android:id="@+id/view2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#F32016"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true">
    </View>
    <View
        android:id="@+id/view3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#2BD56F"
        android:layout_toRightOf="@+id/view1"
        >
    </View>
    <View
        android:id="@+id/view4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#2B452F"
        android:layout_below="@+id/view1">
    </View>
    <LinearLayout
        android:id="@+id/ll1"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_below="@id/view4"
        android:background="@color/colorBlue"
        android:padding="15dp"
        android:orientation="horizontal">
        <View
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#FF0033">
        </View>
        <RelativeLayout
            android:id="@+id/rl1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorDark"
            android:padding="15dp">
            <View
                android:id="@+id/view5"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:background="@color/colorPrimary">
            </View>
            <View
                android:id="@+id/view6"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:background="@color/colorWhite"
                android:layout_toRightOf="@id/view5"
                android:layout_marginLeft="10dp">
            </View>
        </RelativeLayout>
    </LinearLayout>
</RelativeLayout>