Android入门教程 | UI布局之RelativeLayout 相对布局

标签：入门教程 RelativeLayout 布局视图 layout Android View

Android入门教程 | UI布局之RelativeLayout 相对布局_子视图

RelativeLayout 简述

RelativeLayout 继承于 android.widget.ViewGroup，按照子元素之间的位置关系完成布局，作为 Android 系统五大布局中最灵活也是最常用的一种布局方式，非常适合于一些比较复杂的界面设计。

RelativeLayout 和 LinearLayout 类似，都是 ViewGroup，能“容纳”多个子view。

RelativeLayout 是一个以相对位置显示子视图的视图组。每个视图的位置可以指定为相对于同级元素的位置（例如，在另一个视图的左侧或下方）或相对于父级 RelativeLayout 区域的位置（例如在底部、左侧或中心对齐）。

子 view 可以是 TextView，Button，或者是 LinearLayout，RelativeLayout 等等。如果不添加其他配置，它们默认是在 RelativeLayout 的左上角。

在 RelativeLayout 中，子 View 可以根据另一个子 View 来确定位置。但必须注意的是，RelativeLayout 和它的子 View 不能互相依赖。比如 RelativeLayout 设置高度为 wrap_content，子 View 设置了 ALIGN_PARENT_BOTTOM，这样你会发现 RelativeLayout 被撑到最大。 RelativeLayout 能消除嵌套视图组并使布局层次结构保持扁平化。

属性介绍

RelativeLayout 属性：

Android入门教程 | UI布局之RelativeLayout 相对布局_子视图_02

RelativeLayout 可以指定子视图相对于父视图或彼此（由 ID 确定）的位置。因此，可以按照右边框对齐两个元素，或者使它们一上一下，屏幕居中，左侧居中，等等。默认情况下，所有子视图均绘制在布局的左上角，因此必须使用 RelativeLayout.LayoutParams 中提供的各种布局属性定义每个视图的位置。

有很多布局属性可用于 RelativeLayout 中的视图，部分示例包括：

android:layout_alignParentTop

如果为 "true"，会将此视图的上边缘与父视图的上边缘对齐。

android:layout_centerVertical

如果为 "true"，会将此子级在父级内垂直居中。

android:layout_below

将此视图的上边缘放置在使用资源 ID 指定的视图下方。

android:layout_toRightOf

将此视图的左边缘放置在使用资源 ID 指定的视图右侧。

示例:

为了让UI好看一点，先定义一下样式，在style.xml文件中新增一个style。

<style name="RelativeLayoutDemo1Item">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:padding">4dp</item>
    <item name="android:background">@color/colorAccent</item>
    <item name="android:textColor">#ffffff</item>
    <item name="android:textSize">12sp</item>
</style>

示例1:

在layout中增加RelativeLayout与一些子View。子View设置了不同的属性，分布在父View的上下左右中各个地方。

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

        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:text="default" />

        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:layout_alignParentEnd="true"
            android:text="layout_alignParentEnd" />

        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:layout_centerInParent="true"
            android:text="layout_centerInParent" />

        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:layout_alignParentBottom="true"
            android:text="layout_alignParentBottom" />

        <TextView
            style="@style/RelativeLayoutDemo1Item"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:text="layout_alignParentBottom | End" />

    </RelativeLayout>

Android入门教程 | UI布局之RelativeLayout 相对布局_Android_03

示例2:

子View可以把另外的子View当做位置依据。

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="120dp">

        <TextView
            android:id="@+id/tv1"
            style="@style/RelativeLayoutDemo1Item"
            android:text="天" />

        <TextView
            android:id="@+id/tv2"
            style="@style/RelativeLayoutDemo1Item"
            android:layout_below="@id/tv1"
            android:layout_toEndOf="@id/tv1"
            android:text="天" />

        <TextView
            android:id="@+id/tv3"
            style="@style/RelativeLayoutDemo1Item"
            android:layout_below="@id/tv2"
            android:layout_toEndOf="@id/tv2"
            android:text="向" />

        <TextView
            android:id="@+id/tv4"
            style="@style/RelativeLayoutDemo1Item"
            android:layout_below="@id/tv3"
            android:layout_toEndOf="@id/tv3"
            android:text="上" />

    </RelativeLayout>

最后分享一份