Android学习分享-常用布局02-FrameLayout和RelativeLayout

本节引言

上一节分享了LinearLayout，它能够让控件按照线性的方式摆放，但是对于复杂的界面来说，这远远不够，这就需要其他布局的帮助了。今天就给大家分享常用的另外两个布局，FrameLayout（帧布局）和RelativeLayout（相对布局）。我们先从简单地FrameLayout开始吧。

FrameLayout详解

FrameLayout中的控件会默认的排布在左上角，而且继续向布局中添加控件的话，该控件会被覆盖在原先的控件上。或许这样说有些抽象，看看效果图就懂了。效果图如下：

XML代码如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@android:color/holo_orange_light"
        android:gravity="right"
        android:text="TextView01" />

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@android:color/holo_purple"
        android:gravity="right"
        android:text="TextView02" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_red_light"
        android:gravity="right"
        android:text="TextView03" />

</FrameLayout>

我们可以看到在FrameLayout中的三个TextView层叠在了屏幕的左上方，后添加的TextView覆盖在了之前的TextView上。可是如果我们想改变TextView的位置呢？那么可以通过使用android:layout_gravity来实现，将Textview02和TextView03的android:layout_gravity设值为right|bottom和bottom就变成下面这张效果图的样子了。

TextView03的位置变成了左下方，TextView02的位置变成了右下方。FrameLayout比较简单，接下来来看看RelativeLayout。

RelativeLayout详解

RelativeLayout可以让布局中的控件相对父布局或者兄弟控件定位摆放，然后通过设置margin或padding就可以完成比较复杂的布局。

相对父布局定位

RelativeLayout中的控件可以下相对父布局摆放位置，以下是常用属性：

以下属性的值为true或false
android:layout_alignParentLeft：与父布局左边对齐
android:layout_alignParentTop：与父布局顶部对齐
android:layout_alignParentRight：与父布局右边对齐
android:layout_alignParentBottom：与父布局底部对齐
android:layout_centerHorizontal：在父布局中水平居中
android:layout_centerVertical：在父布局中垂直居中
android:layout_centerInParent：在父布局中居中（即水平居中又垂直居中）

下面是利用上面的属性编写的Demo的效果图：

XML代码如下：

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

    <TextView
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:layout_alignParentLeft="true"
        android:gravity="center"
        android:background="@android:color/holo_green_light"
        android:text="与父布局左边对齐"/>
    <TextView
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:background="@android:color/holo_blue_bright"
        android:text="水平居中并且与父布局顶部对齐"/>
    <TextView
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:layout_alignParentRight="true"
        android:gravity="center"
        android:background="@android:color/holo_green_light"
        android:text="与父布局右边对齐"/>
    <TextView
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_alignParentBottom="true"
        android:background="@android:color/holo_purple"
        android:text="与父布局底边对齐"/>
    <TextView
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_marginTop="100dp"
        android:layout_centerHorizontal="true"
        android:background="@android:color/holo_orange_light"
        android:text="顶部边界100dp并且水平居中于父布局"/>
    <TextView
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_centerInParent="true"
        android:background="@android:color/holo_red_light"
        android:text="父布局中居中"/>
    <TextView
        android:layout_width="120dp"
        android:layout_height="60dp"
        android:gravity="center"
        android:layout_centerVertical="true"
        android:background="@android:color/holo_orange_light"
        android:text="垂直居中于父布局"/>

</RelativeLayout>

相对兄弟控件定位

RelativeLayout中的控件也可以相对兄弟控件摆放位置。兄弟控件指的是在同一个布局层次下的控件，以下是常用的属性：

以下属性的值为相对兄弟控件的id
android:layout_toLeftOf：在相对兄弟控件的左边摆放
android:layout_toRightOf：在相对兄弟控件的右边摆放
android:layout_above：在相对兄弟控件的上边摆放
android:layout_below：在相对兄弟控件的下边摆放

下面是利用上面的属性编写的Demo的效果图：

XML代码如下：

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

    <TextView
        android:id="@+id/center_tv"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:background="@android:color/holo_red_light"
        android:gravity="center"
        android:padding="10dp"
        android:text="CenterTextView" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/center_tv"
        android:background="@android:color/holo_orange_light"
        android:gravity="center"
        android:text="在CenterTextView左边摆放并且水平居中" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/center_tv"
        android:background="@android:color/holo_blue_light"
        android:gravity="center"
        android:text="在CenterTextView右边摆放并且水平居中" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@id/center_tv"
        android:layout_centerHorizontal="true"
        android:background="@android:color/holo_green_light"
        android:gravity="center"
        android:text="在CenterTextView顶部边摆放并且水平居中" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@id/center_tv"
        android:layout_centerHorizontal="true"
        android:background="@android:color/holo_purple"
        android:gravity="center"
        android:text="在CenterTextView底部边摆放并且水平居中" />

</RelativeLayout>

RelativeLayout中控件的属性的确比较多，但是它却可以极大地减少布局的嵌套层数，所以在平常的使用频率也是很高。

本节小结

本节分享了FrameLayout和RelativeLayout的用法，平常使用频率很高的是RelativeLayout，所以多加练习。