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

先看一下效果圖

主角GuideView登場！

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

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

實現說明

頁面的結構以下圖所示：

核心類

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