Android布局-FrameLayout

一. 继承图

二. Xml方式

1. 所有的布局共有的属性

① View在左上右下四个方向和其他View之间的距离，值是 dp

android:layout_marginStart (android:layout_marginLeft) 
android:layout_marginTop
android:layout_marginEnd   (android:layout_marginRight)
android:layout_marginBottom

② View内部元素到View左上右下边框之间的距离，值是 dp

android:paddingStart (android:paddingLeft)
android:paddingTop
android:paddingEnd   (android:paddingRight)
android:paddingBottom

③ 容器内部的对齐方式以及容器相对于父容器的对齐方式

1 2	android:gravity //设置布局管理器内组件的对齐方式 android:layout_gravity //设置布局本身相对于父视图的位置

2. FrameLayout

在FrameLayout中，这个布局直接在屏幕上开辟出一块空白的区域，所有添加到这个布局中的视图都是以层叠的方式显示，而它会把这些试图默认放到这块区域的左上角，第一个添加到布局中视图显示在最底层，最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。

FrameLayout的常用属性：

//设置帧布局容器的前景图像
//前景图像:永远处于帧布局最上面,直接面对用户的图像,就是不会被覆盖的图片。
android:foreground=""

//设置前景图像显示的位置
android:foregroundGravity=""

① 简单的测试 foreground

首先测试，设置背景颜色的效果

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@drawable/image">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textColor="#ff8888"
        android:textStyle="bold"
        android:textSize="20sp"
        />

</FrameLayout>

将设置的背景颜色改为设置前景颜色

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:foreground="@drawable/image">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textColor="#ff8888"
        android:textStyle="bold"
        android:textSize="20sp"
        />

</FrameLayout>

同样的代码，只是将background变成foreground，可以明确的看出第一张图片中HelloWord依然可以看到，但是在第二张图片中，已经被挡住。我们可以这样简单的去理解，foreground其实就是一本书的封面，它把书中的内容全部遮盖住了。

② FrameLayout如何设置其子视图的位置

通过layout_gravity设定相对位置，再配合layout_marginTop，layout_marginLeft来设置位置。

下面介绍一个小例子来详细介绍：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"

    android:background="@drawable/image">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="公司"
        android:textColor="#ff8888"
        android:textStyle="bold"
        android:textSize="20sp"

        android:layout_gravity="center"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="办公室"
        android:textColor="#ff8888"
        android:textStyle="bold"
        android:textSize="20sp"

        android:layout_gravity="center"
        android:layout_marginTop="-150dp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="工作"
        android:textColor="#ff8888"
        android:textStyle="bold"
        android:textSize="20sp"

        android:layout_gravity="top"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="40dp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="程序员"
        android:textColor="#ff8888"
        android:textStyle="bold"
        android:textSize="20sp"

        android:layout_gravity="center"
        android:layout_marginTop="80dp"
        />

</FrameLayout>