一起Talk Android吧（第五百零八回：多层布局功能)

Posted 2023-03-07 talk_8

文章目录

• 功能介绍
• 使用方法
• 示例代码

各位看官们大家好，上一回中咱们说的例子是"图片滤镜ImageFilterView",这一回中咱们说的例子是"

多层布局功能

"。闲话休提，言归正转， 让我们一起Talk android吧！

功能介绍

我们在这里说的多层布局功能表示使用两个布局，一个在前台，另外一个在后台，前台和后台的内容可以同时显示出来，进而实现多层叠加的效果，不过在用户看来仍然是一个布局，完全体会不到多个布局的存在，该功能可以满足在多个布局中复用同一个背景，这点类似面向对象中多个子类共同继承一个父类。

使用方法

• 创建一个布局页面当作背景页面。
• 创建一个Activity和它的配套布局文件当做前台页面;
• 在前台布局中通过include标签引入背景布局；
• 在这两个布局中都添加TextView组件，组件在每个布局中的位置不一样；

示例代码

介绍完使用方法后，我们通过示例代码来演示，这样更加有说服力：

//前台的布局代码
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@color/purple_700"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.ActivityConstrilayout">

    <include layout="@layout/activity_background"></include>

    <TextView
        android:text="This the Foreground Top Title"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintVertical_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </TextView>

    <TextView
        android:text="This the Foreground Bottom Title"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintVertical_bias="0.7"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </TextView>
</androidx.constraintlayout.widget.ConstraintLayout>


//后台的布局代码
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@color/purple_200"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.ActivityBackground">

    <TextView
        android:text="This is background Top Title"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintVertical_bias="0.1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </TextView>

    <TextView
        android:text="This is background Bottom Title"

        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintVertical_bias="0.9"

        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </TextView>
</androidx.constraintlayout.widget.ConstraintLayout>

上面代码中创建了两个布局，每个布局中包含两个TextView,一共四个。它的们位置都不一样。把这两布局组合后四个TextView组件都可以被看到，这样就达到了布局叠加的效果。虽然布局叠加了，但是布局中的组件并没有因为布局的叠加而发生遮挡现象。我在这里就不演示具体的效果了，建议大家自己动手去实践。

注意:前台和背景使用的布局类型必须是约束布局，换成其它布局后没有效果。下面是我调试的结果：

• 如果背景和前台是两个线性布局，只显示背景布局中的组件,布局颜色是背景的布局颜色 ;
• 如果背景是约束布局，前台是线性布局,只显示背景中的组件,布局颜色是背景的布局颜色 ;
• 如果背景和前台是两个约束布局，背景和前台上的组件都会显示，不过布局颜色是背景的布局颜色 ;

从中可以看到：

• 对于布局的颜色来说，不论前台和背景是哪种类型的布局，如果这两个布局都设置了背景颜色，那么只会显示背景布局中设置的颜色;
• 对于布局中的组件来说，只有前台和后台都使用了约束布局才能实现布局叠加功能，而且不会遮挡布局中的组件。

看官们，关于"多层布局功能"的例子咱们就介绍到这里，欲知后面还有什么例子，且听下回分解！