Android庫:TourGuide

jopen 9年前發布 | 23K 次閱讀 TourGuide Android開發 移動開發

對于一些復雜的App,我們希望能夠給用戶一些引導操作。當用戶首次打開應用的時候,可以按照給出的引導來熟悉App。TourGuid就是為這種場景而生的項目,動畫效果很漂亮。
Android庫:TourGuide

使用說明:


 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) 所產生的效果如下:

Android庫:TourGuide


Pointer 自定義指南


Pointer是一個暗示存在可點擊UI元素的圓形動畫按鈕。默認為白色,居中顯示,你可以這樣自定義:

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

下面是沒有自定義和自定義之后的區別:

Android庫:TourGuide


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

項目主頁:http://www.baiduhome.net/lib/view/home/1437053882021

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!