一分钟实现Android遮罩引导视图

下面是详细讲解一分钟实现Android遮罩引导视图的完整攻略。

什么是遮罩引导视图

遮罩引导视图是指在用户APP首次使用时，通过给予一些引导提示，增强用户对APP各项功能的认知和使用，从而提高用户的体验。遮罩引导视图通常会以遮罩控件的形式展现在用户窗口之上，从而达到引导用户的目的。

攻略实现步骤

步骤1：添加依赖库

在 app 模块的 build.gradle 文件中添加如下依赖：

implementation 'com.github.amlcurran.showcaseview:library:x.x.x@aar'

步骤2：在布局文件中添加遮罩引导视图

在布局文件中使用 FrameLayout 或者其他容器来作为遮罩引导视图的容器，并添加需要引导的控件。具体细节如下：

<FrameLayout
  android:id="@+id/showcase_container"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <Button
    android:id="@+id/my_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="My Button"/>

</FrameLayout>

步骤3：实现遮罩引导

通过实例化 ShowcaseView.Builder 类，并指定需要引导的控件或视图，来创建遮罩引导视图，具体细节如下：

new ShowcaseView.Builder(this)
  .setTarget(new ViewTarget(R.id.my_button, this))
  .setContentTitle("Button")
  .setContentText("This is a button.")
  .hideOnTouchOutside()
  .build();

示例说明

示例1：引导图片控件

假设我们要为一个图片控件添加遮罩引导，那么需要在图片控件外部嵌套一个容器，并在容器中添加一个控件，具体实现细节如下所示：

<FrameLayout
  android:id="@+id/showcase_container"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_marginLeft="48dp"
  android:layout_marginRight="48dp">

  <ImageView
    android:id="@+id/my_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="32dp"
    android:src="@drawable/my_pic"/>

</FrameLayout>

接下来需要在 Activity 中添加代码来实现遮罩引导视图的出现，这里我们以图片控件为例进行详细说明：

new ShowcaseView.Builder(this)
  .setTarget(new ViewTarget(R.id.my_image, this))
  .setContentTitle("Image")
  .setContentText("This is an image.")
  .hideOnTouchOutside()
  .build();

示例2：引导嵌套的子控件

在布局文件中，有时会出现一些嵌套的控件，例如一个 ListView 嵌套在一个 FrameLayout 中，这时需要为 ListView 添加遮罩引导，则需要在嵌套控件的外部嵌套一个容器，并在容器中添加一个控件，具体实现细节如下：

<FrameLayout
  android:id="@+id/showcase_container"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:padding="16dp">

  <ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

      <TextView
        android:id="@+id/my_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="My List"/>

      <ListView
        android:id="@+id/my_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    </LinearLayout>
  </ScrollView>
</FrameLayout>

接下来需要在 Activity 中添加代码来实现遮罩引导视图的出现，这里我们以 ListView 为例进行详细说明：

new ShowcaseView.Builder(this)
  .setTarget(new ViewTarget(R.id.my_list, this))
  .setContentTitle("List")
  .setContentText("This is a list.")
  .hideOnTouchOutside()
  .build();

至此，我们已经完成了 Android 遮罩引导视图的实现。