乐趣区

关于android:Android入门教程-UI布局之RelativeLayout-相对布局

jiezi

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 属性：

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>

示例 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>

RelativeLayout 绝对布局入门视频参考

退出移动版