Android学习笔记十四之RelativeLayout相对布局

Android学习笔记十四之RelativeLayout相对布局

　　跟前面介绍的LinearLayout线性布局一样，RelativeLayout相对布局也是我们常用的布局之一，但是，不同于LinearLayout线性布局，RelativeLayout中控件的排列方式都是相对的。下面我们介绍一下RelativeLayout相对布局的常用属性：

1、根据父布局定位

• 左对齐:android:layout_alighParentLeft
• 右对齐:android:layout_alighParentRight
• 顶端对齐:android:layout_alighParentTop
• 底部对齐:android:layout_alighParentBottom
• 水平居中:android:layout_centerHorizontal
• 垂直居中:android:layout_centerVertical
• 中央位置:android:layout_centerInParent

这里说的相对定位都是相对于父布局来讲的。

2、根据同一父布局内的其他组件定位

• 左边:android:layout_toLeftOf
• 右边:android:layout_toRightOf
• 上方:android:layout_above
• 下方:android:layout_below
• 对齐上边界:android:layout_alignTop
• 对齐下边界:android:layout_alignBottom
• 对齐左边界:android:layout_alignLeft
• 对齐右边界:android:layout_alignRight

3、设置组件与父布局的边距

• android:layout_margin: 设置控件的四个方向与外部的距离，依次是上、左、下、右
• android:layout_marginLeft: 设置控件的左边与外部的距离
• android:layout_marginTop: 设置控件的顶部与外部的距离
• android:layout_marginRight: 设置控件的右边与外部的距离
• android:layout_marginBottom: 设置控件的下方与外部的距离

4、设置组件内容与组件的距离

• android:padding :设定控件内部留出的边距
• android:paddingLeft: 设定控件的左边的内部留出的边距
• android:paddingTop: 设定控件的上边的内部留出的边距
• android:paddingRight: 设定控件的右边的内部留出的边距
• android:paddingBottom: 设定控件的下边的内部留出的边距

以上就是RelativeLayout的常用属性，我们利用这些属性可以设计出很复杂的界面，例如下面的例子：

布局文件代码：

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

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <TextView
        android:id="@+id/tv_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="实现梅花布局"
        android:textSize="18sp" />

    <Button
        android:id="@+id/btn_001"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="中心" />

    <Button
        android:id="@+id/btn_002"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/btn_001"
        android:layout_centerHorizontal="true"
        android:text="上方" />

    <Button
        android:id="@+id/btn_003"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/btn_001"
        android:text="左边" />

    <Button
        android:id="@+id/btn_004"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn_001"
        android:layout_centerHorizontal="true"
        android:text="下方" />

    <Button
        android:id="@+id/btn_005"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/btn_001"
        android:text="右边" />

</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <Button
        android:id="@+id/btn_006"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:padding="20dp"
        android:text="中心" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/btn_006"
        android:layout_centerHorizontal="true"
        android:paddingTop="20dp"
        android:text="上方" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/btn_006"
        android:paddingLeft="40dp"
        android:text="左边" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn_006"
        android:layout_centerHorizontal="true"
        android:paddingBottom="20dp"
        android:text="下方" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/btn_006"
        android:paddingRight="40dp"
        android:text="右边" />

</RelativeLayout>


</LinearLayout>

效果图：

如图所示是实现梅花布局的，上方图是没有设置padding属性的，下方的是设置了padding属性的，关于RelativeLayout相对布局就简单介绍到这里，利用布局嵌套我们可以实现比较复杂的界面布局，下一节，我们介绍TabLayout表格布局。

附上RelativeLayout的国内镜像API，本例子的Demo比较简单，就不上传代码了。