一分鐘實(shí)現(xiàn)Android遮罩引導(dǎo)視圖
一分鐘實(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)如下圖所示:

核心類
GuideViewBundle
引導(dǎo)視圖的配置項(xiàng)類,每一頁(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)部類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ū)的輪廓類型,有圓形(橢圓)輪廓和方形輪廓兩種
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è)類
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)部類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í)有所幫助,也希望大家多多支持腳本之家。
- Android自定義Dialog內(nèi)部透明、外部遮罩效果
- Android實(shí)現(xiàn)遮罩層(蒙板)效果
- Android PopupWindow實(shí)現(xiàn)遮罩層效果
- Android使用popUpWindow帶遮罩層的彈出框
- Android之淘寶商品列表長(zhǎng)按遮罩效果的實(shí)現(xiàn)
- 360瀏覽器文本框獲得焦點(diǎn)后被android軟鍵盤遮罩該怎么辦
- Android頁(yè)面中引導(dǎo)蒙層的使用方法詳解
- Android實(shí)現(xiàn)新手引導(dǎo)半透明蒙層效果
- Android自定義ViewGroup實(shí)現(xiàn)豎向引導(dǎo)界面
- Android GuideView實(shí)現(xiàn)首次登陸引導(dǎo)
相關(guān)文章
TextView實(shí)現(xiàn)圖文混合編排的方法
這篇文章主要為大家詳細(xì)介紹了TextView實(shí)現(xiàn)圖文混合編排的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
Kotlin創(chuàng)建一個(gè)好用的協(xié)程作用域
這篇文章主要介紹了Kotlin創(chuàng)建一個(gè)好用的協(xié)程作用域,kotlin中使用協(xié)程,是一定要跟協(xié)程作用域一起配合使用的,否則可能協(xié)程的生命周期無(wú)法被準(zhǔn)確控制,造成內(nèi)存泄漏或其他問(wèn)題2022-07-07
自定義一個(gè)theme在不同的sdk環(huán)境下繼承不同的值
可能很多在高版本下編繹apk的同學(xué),可能都曾有和我一樣的困惑,就是如何讓低版本的用戶也能有高版本的體驗(yàn)?zāi)?/div> 2013-01-01
Android Studio打包APK文件具體實(shí)現(xiàn)步驟解析
這篇文章主要介紹了Android Studio打包APK文件具體實(shí)現(xiàn)步驟解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
Android中button實(shí)現(xiàn)onclicklistener事件的兩種方式
本文介紹下Android中button實(shí)現(xiàn)onclicklistener事件的兩種方法,感興趣的朋友可以參考下2013-04-04
android實(shí)現(xiàn)手機(jī)傳感器調(diào)用
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)手機(jī)傳感器調(diào)用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-04-04
android自定義View實(shí)現(xiàn)簡(jiǎn)單五子棋游戲
這篇文章主要為大家詳細(xì)介紹了android自定義View實(shí)現(xiàn)簡(jiǎn)單五子棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05
Android實(shí)現(xiàn)啟動(dòng)頁(yè)倒計(jì)時(shí)效果
這篇文章主要介紹了Android實(shí)現(xiàn)啟動(dòng)頁(yè)倒計(jì)時(shí)效果的示例代碼,幫助大家更好的理解和學(xué)習(xí)使用Android進(jìn)行開(kāi)發(fā),感興趣的朋友可以了解下2021-04-04最新評(píng)論

