如何在另一个透明背景中进行透明切割？

Question

我想为布局中的新元素制作教程，我在整个视图上放置了另一层。 然后我想剪一些地方来看看下面的层。 简而言之，剪裁适应下面的元素。

现在我制作另一个黑色透明布局。 然后创建另一个白色透明的布局，但它不干净，删除我的黑色透明区域，效果就像图片中一样。 这个地方应该是透明的白色，看看下面是什么。 在代码中查看@+id/test

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    android:focusableInTouchMode="true">

  

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
[ my linear layout with elements]
    
                </LinearLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/tutorial"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/tutorial_background">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/test"
            android:layout_width="380dp"
            android:layout_height="32dp"
            android:layout_marginStart="15dp"
            android:layout_marginTop="100dp"
            android:layout_marginEnd="16dp"
            android:background="@color/tutorial_white_background"
            android:padding="8dp" />

        <Button
            android:id="@+id/btnGoToWorkList"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="100dp"
            android:layout_marginEnd="100dp"
            android:layout_marginBottom="100dp"
            android:text="OK, TAKE ME TO WORK LIST"
            app:layout_constraintBottom_toTopOf="@+id/tutorialDontShowAgain"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />
    
        <CheckBox
            android:id="@+id/tutorialDontShowAgain"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:buttonTint="@color/mdtp_white"
            android:text="@string/tutorial_dont_show_again"
            android:textColor="@color/mdtp_white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

屏幕测试

Answer 1

通过使用第三方库，您可以很容易地做到这一点：

将此添加到您的根build.gradle文件（而不是您的模块build.gradle文件）中：

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

将库添加到您的模块build.gradle

dependencies {
    implementation 'com.github.faruktoptas:FancyShowCaseView:1.3.9'
}

示例使用

new FancyShowCaseView.Builder(this/*Pass Your Context Here*/)
        .focusOn(view/*Pass Your View Object On Which You Want To Focus On*/)
        .title("Pass Title Here")
        .build()
        .show();

你可以在这里看到结果：