App Guide相关

##TourGuide https://github.com/worker8/TourGuide

TourGuide

TourGuide is an Android library. It lets you add pointer, overlay and tooltip easily, guiding users on how to use your app. Refer to the example below(this is a trivial example for demo purpose):

Let’s say you have a button on your home screen that you want your users to click on:

Using TourGuide, the end result will look as below. A pointer, overlay and tooltip are added to the page to clearly notify user to tap on the “Get Started” button. Once user tap on the “Get Started” button, the overlay, pointer and tooltip will disappear.

The reason for having Overlay, Pointer and a Tooltip:

  • Overlay: Darken other UI elements on the screen, so that user can focus on one single UI element.
  • Tooltip: To give a text explanation
  • Pointer: An animated clicking gesture to indicate the clickable UI element

Demo

How to setup

Add the below dependencies into your gradle file:

repositories {
    mavenCentral()
    maven(){
        url "https://oss.sonatype.org/content/repositories/snapshots"
    }
}
compile ('com.github.worker8:tourguide:1.0.17-SNAPSHOT@aar'){
    transitive=true
} # MinSDK Version The minimum SDK version required by TourGuide is `API Level 11+ (Android 3.0.x, HONEYCOMB)`.

How to use

Basic

Let’s say you have a button like this where you want user to click on:

Button button = (Button)findViewById(R.id.button);

You can add the tutorial pointer on top of it by:

TourGuide mTourGuideHandler = TourGuide.init(this).with(TourGuide.Technique.Click)
            .setPointer(new Pointer())
            .setToolTip(new ToolTip().setTitle("Welcome!").setDescription("Click on Get Started to begin..."))
            .setOverlay(new Overlay())
            .playOn(button);
  • setPointer() - This describe how the Pointer will look like, refer to Pointer Customization Guide on how to change the appearance, null can be passed in if a Pointer is not wanted.
  • setToolTip - This describe how the ToolTip will look like, refer to ToolTip Customization Guide on how to change the appearance, null can be passed in if a ToolTip is not wanted.
  • setOverlay - This describe how the Overlay will look like, refer to Overlay Customization Guide on how to change the appearance, null can be passed in if an Overlay is not wanted.
  • with - Use TourGuide.Technique.Click for the moment, this will be removed in the future.
  • mTourGuideHandler - The return type is a handler to be used for clean up purpose.

When the user is done, you can dismiss the tutorial by calling:

mTourGuideHandler.cleanUp();

ToolTip Customization Guide

Tooltip is the box of text that gives further explanation of a UI element. In the basic example above, the ToolTip not customized, so the default style is used. However, you can customize it if you wish to.

    Animation animation = new TranslateAnimation(0f, 0f, 200f, 0f);
    animation.setDuration(1000);
    animation.setFillAfter(true);
    animation.setInterpolator(new BounceInterpolator());

    ToolTip toolTip = new ToolTip()
                        .setTitle("Next Button")
                        .setDescription("Click on Next button to proceed...")
                        .setTextColor(Color.parseColor("#bdc3c7"))
                        .setBackgroundColor(Color.parseColor("#e74c3c"))
                        .setShadow(true)
                        .setGravity(Gravity.TOP | Gravity.LEFT)
                        .setEnterAnimation(animation);

TourGuide mTourGuideHandler = TourGuide.init(this).with(TourGuide.Technique.Click)
            .setPointer(new Pointer())
            .setToolTip(toolTip)
            .setOverlay(new Overlay())
            .playOn(button);

Most of the customization methods/parameters are self-explanatory, except gravity that deserves a mention. gravity is relative to targetted button where TourGuide playOn(). For example .setGravity(Gravity.TOP | Gravity.LEFT) will produce the following:

Pointer Customization Guide

Pointer is the round button that is animating to indicate the clickable UI element. The default color is white and the default gravity is center. You can customize it by:

new Pointer().setColor(Color.RED).setGravity(Gravity.BOTTOM|Gravity.RIGHT);

This is a comparison with and without the customization:

Overlay Customization Guide

Overlay is the semi-transparent background that is used to cover up other UI elements so that users can take focus on what to click on. The color and shape can be customized by:

 Overlay overlay = new Overlay()
            .setBackgroundColor(Color.parseColor("#AAFF0000"))
            .disableClick(true)
            .setStyle(Overlay.Style.Rectangle);
  • disableClick(true) will make elements covered by the overlay to become unclickable. Refer to Overlay Customization Activity in the example.
  • .setStyle() Currently only 2 styles are available: Overlay.Style.Rectangle and Overlay.Style.Circle

Running TourGuide in Sequence

Running TourGuide in sequence is a very common use case where you want to show a few buttons in a row instead of just one. Running in sequence can be subdivided into 2 use cases:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码匠的流水账

聊聊rocketmq的RequestTask

org/apache/rocketmq/remoting/netty/RequestTask.java

1892
来自专栏菩提树下的杨过

Silverlight Telerik控件学习:TreeView数据绑定并初始化选中状态、PanelBar的Accordion效果、TabPanel、Frame基本使用

实际开发中控件的数据源肯定是动态绑定的,不可能在xaml里写死item项。既然要绑定,就先来几个实体类: ? 上面是类图,各类的代码如下:  Business...

2978
来自专栏大数据学习笔记

NoClassDefFoundError: org/hibernate/engine/transaction/spi/TransactionContext

1.问题 在整合Hibernate 5.2和spring4.3时出现了这个问题。 HTTP Status 500 – Internal Server Error...

8076
来自专栏技术小黑屋

Code Snippet for Media on Android

A few days ago,I have wrote down this post http://androidyue.github.io/blog/2014...

2181
来自专栏SAP最佳业务实践

SAP S/4 HANA新变化-CO物料帐(for Ver.1610)

Material Ledger Actual Costing has been activated already in the system before t...

7125
来自专栏技术小黑屋

Set the Preferred Application in Android

A great application should provide a function to let users set it as the preferr...

992
来自专栏跟着阿笨一起玩NET

TabControl控件的美化

文件下载:http://files.cnblogs.com/zfanlong1314/TabControlEX.rar

3822
来自专栏lgp20151222

RestTemplate的异常:Not enough variables available to expand

原因:RestTemplate使用出错,我的情况是不知道这里要求用RestTemplate的使用格式,应该很多人都是这样吧?不过,看了下RestTemplate...

1204
来自专栏沃趣科技

Oracle 12c系列(九) | 通过unplug与plug方式升级pdb数据库

对于Oracle数据库升级操作,每个版本之间的升级步骤均相似,首先升级Oracle软件,然后升级数据库内的数据字典表。

2483
来自专栏向治洪

语音兰度短信

原理:获取来电短信内容,调用系统的语音朗读功能。 效果图: ? 具体代码如下: 1,获取短信息: package com.internal.message;  ...

1877

扫码关注云+社区

领取腾讯云代金券