TapTargetView

阿超

发布于 2025-05-02 13:20:15

6000

代码可运行

文章被收录于专栏：快乐阿超快乐阿超

运行总次数：0

代码可运行

最好不要在夕阳西下的时候去幻想什么，而要在旭日初升的时候即投入工作。 —— 谢觉哉

GitHub - KeepSafe/TapTargetView: An implementation of tap targets from the Material Design guidelines for feature discovery.

TapTargetView：实现 Material Design 的功能引导视图

在移动应用开发中，新功能引导和操作提示是提升用户体验的重要手段。基于 Material Design 指南，TapTargetView 是一个开源的 Android 库，用于实现功能发现（Feature Discovery）的点击目标视图。它帮助开发者以现代化的方式引导用户完成关键操作。

什么是 TapTargetView？

TapTargetView 是一个 Android 库，用于实现 Material Design 中的功能引导视图。它支持在界面上高亮特定的控件，同时通过动画和文本提示引导用户点击目标控件。与传统的引导方式相比，TapTargetView 提供了更加直观和吸引人的用户体验。

核心特点：

Material Design 风格：完全遵循 Material Design 指南。
灵活性：支持高亮任意视图或屏幕位置。
动画效果：内置平滑的显示与消失动画。
易于集成：通过简单的 API 快速实现功能引导。
可定制化：支持多种样式和行为配置。

使用场景

TapTargetView 是功能引导和操作提示的理想工具，适用于以下场景：

新功能引导 在应用更新后，引导用户使用新增功能。
操作提示 提示用户完成特定的关键操作，如首次使用时的教程。
特定控件高亮 在复杂 UI 中突出显示重要控件，帮助用户聚焦。

快速上手指南

以下是使用 TapTargetView 的基本步骤：

1. 添加依赖

在项目的 build.gradle 文件中添加以下依赖：

implementation 'com.getkeepsafe.taptargetview:taptargetview:1.13.3'

2. 创建 TapTargetView

通过 API 创建并显示 TapTargetView：

TapTargetView.showFor(this,                 // 当前 Activity
    TapTarget.forView(findViewById(R.id.button), "Hello, world!", "This is a description")
        .outerCircleColor(R.color.colorPrimary)      // 外圈颜色
        .targetCircleColor(R.color.colorAccent)      // 高亮目标颜色
        .titleTextSize(20)                           // 标题文字大小
        .descriptionTextSize(16)                     // 描述文字大小
        .textColor(R.color.white),                   // 文本颜色
    new TapTargetView.Listener() {                   // 监听事件
        @Override
        public void onTargetClick(TapTargetView view) {
            super.onTargetClick(view);               // 用户点击目标
            view.dismiss();                          // 手动关闭视图
        }
    });

组件属性

TapTargetView 提供了丰富的属性和方法用于定制引导视图：

方法名	描述
outerCircleColor	设置外圈的颜色
targetCircleColor	设置目标圈的颜色
titleTextSize	设置标题文字大小
descriptionTextSize	设置描述文字大小
textColor	设置标题和描述文字的颜色
transparentTarget	目标是否透明
dimColor	背景遮罩的颜色
cancelable	是否允许点击外部区域关闭视图
drawShadow	是否绘制阴影

高级用法

1. 高亮屏幕指定位置

除了高亮视图，你还可以高亮任意屏幕位置：

TapTargetView.showFor(this,
    TapTarget.forBounds(new Rect(100, 100, 200, 200), "Target", "This is a custom target"));

2. 多步引导

通过依次显示多个 TapTargetView 实现多步引导：

TapTargetSequence sequence = new TapTargetSequence(this)
    .targets(
        TapTarget.forView(findViewById(R.id.button1), "Step 1", "Description 1"),
        TapTarget.forView(findViewById(R.id.button2), "Step 2", "Description 2")
    )
    .listener(new TapTargetSequence.Listener() {
        @Override
        public void onSequenceFinish() {
            // 引导完成
        }
        @Override
        public void onSequenceCanceled(TapTarget lastTarget) {
            // 引导取消
        }
    });
sequence.start();