Android引導動畫庫：TourGuide

本文由碼農網 – 小峰原創，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

對於一些複雜的App，我們希望能夠給使用者一些引導操作。當使用者首次開啟應用的時候，可以按照給出的引導來熟悉App。TourGuid就是為這種場景而生的專案，動畫效果很漂亮。

使用說明：

在gradle file中新增如下依賴：

repositories {
    mavenCentral()
    maven(){
        url "https://oss.sonatype.org/content/repositories/snapshots"
    }
}
compile ('com.github.worker8:tourguide:1.0.10-SNAPSHOT@aar'){
    transitive=true
}

最低SDK 版本

TourGuide要求的最低版本是API 11+（Android 3.0.x, HONEYCOMB）。

如何使用

基礎

假如你有這樣一個button需要使用者去點選：

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

你可以通過如下辦法在button之上新增引導提示：

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() - 設定Pointer，關於如何改變其外觀，參考下面Pointer 自定義指南  如果不想要Pointer，可以傳入null。
• setToolTip -  設定ToolTip ，關於如何改變其外觀，參考下面ToolTip自定義指南，如果不想要ToolTip，可以傳入null。
• setOverlay -  設定Overlay，關於如何改變其外觀，參考下面 Overlay 自定義指南 如果不想要Overlay，可以傳入null。
• with -  目前是使用TourGuide.Technique.Click ，今後將去掉。
• mTourGuideHandler -  返回的handler 型別，用於清理。

當使用者完成之後，你可以通過呼叫如下程式碼解除這個tutorial：

mTourGuideHandler.cleanUp();

ToolTip 自定義指南

Tooltip（工具提示）是指對一個UI元素進行進一步解釋的文字框。在前面的基礎用法示例中，ToolTip並沒有自定義，使用的是預設的樣式。但是你是可以隨意自定義的。

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

除了gravity需要解釋一下外，大多數自定義方法都可以從命名看出其作用。gravity是TourGuide相對於目標按鈕的位置。比如，setGravity(Gravity.TOP | Gravity.LEFT) 所產生的效果如下：

Pointer 自定義指南

Pointer是一個暗示存在可點選UI元素的圓形動畫按鈕。預設為白色，居中顯示，你可以這樣自定義：

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

下面是沒有自定義和自定義之後的區別：

Overlay 自定義指南

Overlay是一個用於擋住所有其他UI原色的半透明背景，可以讓使用者的注意力集中在需要點選的元素上面。其顏色和形狀都是可以自定義的：

 Overlay overlay = new Overlay()
            .setBackgroundColor(Color.parseColor("#AAFF0000"))
            .disableClick(true)
            .setStyle(Overlay.Style.Rectangle);

• disableClick(true) 可以讓被overlay擋住的UI元素變的不可點選。參考本例的Overlay自定義Activity。
• setStyle() 目前只有兩種樣式可用： Overlay.Style.Rectangle 和 Overlay.Style.Circle

軟體首頁 軟體文件 軟體下載