一分鐘實現Android遮罩引導檢視

LemonYang發表於2018-04-17
Android遮罩

先看一下效果圖

一分鐘實現Android遮罩引導檢視

主角GuideView登場！

GuideView是一種基於DialogFragment實現的引導遮罩浮層檢視的輕量級解決方案，它具備以下的特性：

  • 響應導航按鈕的動作（因為引導浮層本質是一個dialog）；
  • 鏈式引導層，支援設定一組的引導遮罩檢視，通過點選切換下一個試圖，快讀與業務進行解藕；
  • 自動繪製半透明浮層、透明核心區以及確保目標檢視和引導檢視的位置。

實現說明

頁面的結構如下圖所示：

一分鐘實現Android遮罩引導檢視

核心類

GuideViewBundle

引導檢視的配置項類，每一頁引導檢視對應一個配置項。在GuideView內部通過這個配置項去構造GuideView的例項，並通過GuideViewFragment顯示在介面上。

其中的屬性都通過構造器的模式，通過靜態內部類Builder進行構建，屬性說明如下：

  • targetView

    引導檢視需要顯示附著的目標檢視

  • hintView

    引導檢視（不包含半透明浮層以及透明焦點區）

  • transparentSpaceXXX

    預設的情況下，透明焦點區的大小跟目標檢視的大小保持一致，如果需要加大透明區域的大小，可以通過設定這組屬性，指定上下左右的額外的空白區域

  • hintViewMarginXXX

    引導檢視（hintView）相對於目標檢視（targetView）的邊距

  • hasTransparentLayer

    是否顯示透明焦點區域，預設顯示。可以選擇不繪製透明焦點區域而只有半透明的浮層

  • hintViewDirection

    引導檢視（hintView）相對於目標檢視（targetView）的位置方向，目前可以定義上（上方左對齊）、下（下方左對齊）、左（左方上對齊）、右（右方上對齊）四個方向。如果需要在位置之餘有不一樣的對齊效果，可以使用hintViewMarginXXX屬性

  • outlineType

    透明焦點區的輪廓型別，有圓形（橢圓）輪廓和方形輪廓兩種

  • maskColor

    半透明遮罩浮層的顏色

  • isDismissOnClicked

    全域性點選可以關閉引導檢視，預設為true。如果設定false，則需要手動設定點選hintView的特定位置關閉檢視

GuideView

介面實際展示的檢視物件，根據GuideViewBundle設定的屬性，由GuideViewFragment建立並新增到齊檢視容器中，對外部業務完全透明無感知到一個類

GuideViewFragment

實際顯示引導檢視的彈窗。其內部載入了一個FrameLayout容器，通過在容器中新增GuideView的例項實現顯示引導檢視層。一個GuideViewFragment可以設定一組引導檢視，完成一組引導序列。請使用其靜態內部類Builder構建其例項，並使用Builder#addGuidViewBundle(bundle)方法新增引導檢視的配置項。

如果需要自定義點選關閉的動作（GuideViewBundle.Builder#setDismissOnClicked(false)的情況下），可以使用下面的方法

void onNext()
複製程式碼

如果還存在沒有顯示的引導檢視，這個方法會繼續顯示下一張，否則會關閉彈窗

新增依賴

  1. 在根目錄的build.gradle檔案中新增jitpack倉庫

    allprojects {
       repositories {
          ...
          maven { url 'https://jitpack.io' }
       }
}
複製程式碼

  2. 新增GuideView依賴

    dependencies {
    compile 'com.github.easilycoder:GuideView:0.0.1'
}
複製程式碼

使用示例

GuideViewFragment.Builder()
                    .addGuidViewBundle(GuideViewBundle.Builder()
                            .setTargetView(tvContent)
                            .setHintView(hintViewLeft)
                            .setDismissOnClicked(false)
                            .setHintViewMargin(0, -160, 0, 0)
                            .setTransparentSpace(space, space, space, space)
                            .setOutlineType(TYPE_RECT)
                            .setHintViewParams(params)
                            .setHintViewDirection(LEFT).build())
                    .addGuidViewBundle(GuideViewBundle.Builder()
                            .setTargetView(tvContent)
                            .setOutlineType(TYPE_OVAL)
                            .setHintView(hintViewTop)
                            .setDismissOnClicked(false)
                            .setHintViewParams(params)
                            .setHintViewMargin(-dp2px(this, 55f), 0, 0, 0)
                            .setTransparentSpace(space, space, space, space)
                            .setHintViewDirection(TOP)
                            .build())
                    .addGuidViewBundle(GuideViewBundle.Builder()
                            .setTargetView(tvContent)
                            .setOutlineType(TYPE_OVAL)
                            .setHintView(hintViewRight)
                            .setDismissOnClicked(false)
                            .setHintViewParams(params)
                            .setHintViewMargin(0, -160, 0, 0)
                            .setTransparentSpace(space, space, space, space)
                            .setHintViewDirection(RIGHT)
                            .build())
                    .addGuidViewBundle(GuideViewBundle.Builder()
                            .setTargetView(tvContent)
                            .setOutlineType(TYPE_OVAL)
                            .setHintViewParams(params)
                            .setHintViewMargin(-dp2px(this, 55f), 0, 0, 0)
                            .setHintView(hintViewBottom)
                            .setTransparentSpace(space, space, space, space)
                            .setHintViewDirection(BOTTOM)
                            .build())
                    .setCancelable(false)
                    .build().show(supportFragmentManager, "hit")
複製程式碼

具體例項以及設計實現可以參考我的GitHub倉庫:GuideView

相關文章