如何在另一個透明背景中進行透明切割？

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();

你可以在這里看到結果：