TapTargetView

2025-05-01

android

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

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 提供了更加直观和吸引人的用户体验。

核心特点:

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

使用场景

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

  1. 新功能引导
    在应用更新后,引导用户使用新增功能。

  2. 操作提示
    提示用户完成特定的关键操作,如首次使用时的教程。

  3. 特定控件高亮
    在复杂 UI 中突出显示重要控件,帮助用户聚焦。


快速上手指南

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

1. 添加依赖

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

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

2. 创建 TapTargetView

通过 API 创建并显示 TapTargetView:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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. 高亮屏幕指定位置

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

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

2. 多步引导

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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();

社区与支持

TapTargetView 是一个活跃的开源项目,目前在 GitHub 上拥有 5433 个星标593 个分支。你可以通过以下方式获取支持:

  • 访问项目主页GitHub 仓库
  • 提交 Issue:报告 Bug 或提出功能建议。
  • 贡献代码:通过 Pull Request 为项目做出贡献。

适用项目

TapTargetView 适合各种类型的 Android 应用,特别是在以下场景中能显著提升用户体验:

  1. 初始设置向导
    引导用户完成应用的首次设置。
  2. 复杂交互界面
    帮助用户快速理解复杂界面的操作逻辑。
  3. 功能介绍
    向用户展示新功能的亮点和使用方法。

结语

TapTargetView 是一个功能强大且易于使用的功能引导库,它通过 Material Design 风格的高亮视图,引导用户完成操作并提升其体验。如果你正在寻找一个直观的功能发现解决方案,不妨试试 TapTargetView!它将帮助你的应用更好地与用户互动。