一分鐘實(shí)現(xiàn)Android遮罩引導(dǎo)視圖，供大家參考，具體內(nèi)容如下

先看一下效果圖

主角GuideView登場(chǎng)！

GuideView是一種基于DialogFragment實(shí)現(xiàn)的引導(dǎo)遮罩浮層視圖的輕量級(jí)解決方案，它具備以下的特性：

• 響應(yīng)導(dǎo)航按鈕的動(dòng)作（因?yàn)橐龑?dǎo)浮層本質(zhì)是一個(gè)dialog）；
• 鏈?zhǔn)揭龑?dǎo)層，支持設(shè)定一組的引導(dǎo)遮罩視圖，通過(guò)點(diǎn)擊切換下一個(gè)試圖，快讀與業(yè)務(wù)進(jìn)行解藕；
• 自動(dòng)繪制半透明浮層、透明核心區(qū)以及確保目標(biāo)視圖和引導(dǎo)視圖的位置。
  

實(shí)現(xiàn)說(shuō)明

頁(yè)面的結(jié)構(gòu)如下圖所示：

核心類(lèi)

GuideViewBundle

引導(dǎo)視圖的配置項(xiàng)類(lèi)，每一頁(yè)引導(dǎo)視圖對(duì)應(yīng)一個(gè)配置項(xiàng)。在GuideView內(nèi)部通過(guò)這個(gè)配置項(xiàng)去構(gòu)造GuideView的實(shí)例，并通過(guò)GuideViewFragment顯示在界面上。

其中的屬性都通過(guò)構(gòu)造器的模式，通過(guò)靜態(tài)內(nèi)部類(lèi)Builder進(jìn)行構(gòu)建，屬性說(shuō)明如下：

targetView

引導(dǎo)視圖需要顯示附著的目標(biāo)視圖

hintView

引導(dǎo)視圖（不包含半透明浮層以及透明焦點(diǎn)區(qū)）

transparentSpaceXXX

默認(rèn)的情況下，透明焦點(diǎn)區(qū)的大小跟目標(biāo)視圖的大小保持一致，如果需要加大透明區(qū)域的大小，可以通過(guò)設(shè)置這組屬性，指定上下左右的額外的空白區(qū)域

hintViewMarginXXX

引導(dǎo)視圖（hintView）相對(duì)于目標(biāo)視圖（targetView）的邊距

hasTransparentLayer

是否顯示透明焦點(diǎn)區(qū)域，默認(rèn)顯示?？梢赃x擇不繪制透明焦點(diǎn)區(qū)域而只有半透明的浮層

hintViewDirection

引導(dǎo)視圖（hintView）相對(duì)于目標(biāo)視圖（targetView）的位置方向，目前可以定義上（上方左對(duì)齊）、下（下方左對(duì)齊）、左（左方上對(duì)齊）、右（右方上對(duì)齊）四個(gè)方向。如果需要在位置之余有不一樣的對(duì)齊效果，可以使用hintViewMarginXXX屬性

outlineType

透明焦點(diǎn)區(qū)的輪廓類(lèi)型，有圓形（橢圓）輪廓和方形輪廓兩種

maskColor

半透明遮罩浮層的顏色

isDismissOnClicked

全局點(diǎn)擊可以關(guān)閉引導(dǎo)視圖，默認(rèn)為true。如果設(shè)置false，則需要手動(dòng)設(shè)置點(diǎn)擊hintView的特定位置關(guān)閉視圖

GuideView

界面實(shí)際展示的視圖對(duì)象，根據(jù)GuideViewBundle設(shè)置的屬性，由GuideViewFragment創(chuàng)建并添加到齊視圖容器中，對(duì)外部業(yè)務(wù)完全透明無(wú)感知到一個(gè)類(lèi)

GuideViewFragment

實(shí)際顯示引導(dǎo)視圖的彈窗。其內(nèi)部加載了一個(gè)FrameLayout容器，通過(guò)在容器中添加GuideView的實(shí)例實(shí)現(xiàn)顯示引導(dǎo)視圖層。一個(gè)GuideViewFragment可以設(shè)定一組引導(dǎo)視圖，完成一組引導(dǎo)序列。請(qǐng)使用其靜態(tài)內(nèi)部類(lèi)Builder構(gòu)建其實(shí)例，并使用Builder#addGuidViewBundle(bundle)方法添加引導(dǎo)視圖的配置項(xiàng)。

如果需要自定義點(diǎn)擊關(guān)閉的動(dòng)作（GuideViewBundle.Builder#setDismissOnClicked(false)的情況下），可以使用下面的方法

void onNext()

如果還存在沒(méi)有顯示的引導(dǎo)視圖，這個(gè)方法會(huì)繼續(xù)顯示下一張，否則會(huì)關(guān)閉彈窗

添加依賴

1.在根目錄的build.gradle文件中添加jitpack倉(cāng)庫(kù)

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

具體實(shí)例以及設(shè)計(jì)實(shí)現(xiàn)可以參考我的GitHub倉(cāng)庫(kù):GuideView

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論