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>