超好用的Android高亮引導(dǎo)庫的使用
簡(jiǎn)介
HighlightPro 是Android的一個(gè)高亮引導(dǎo)庫,同時(shí)它還可以是一個(gè)簡(jiǎn)單的popup window庫
功能:
- 可一次顯示一個(gè)或多個(gè)高亮view
- 通過水平約束和豎直約束來準(zhǔn)確定位提示view
- 自定義提示view的出現(xiàn)動(dòng)畫
- 自定義高亮形狀和大小
- 自定義高亮形狀的paint
- 鏈?zhǔn)秸{(diào)用,使用簡(jiǎn)單
- 支持簡(jiǎn)單的pop window
效果圖:



用法:
Gradle
在項(xiàng)目級(jí)的build.gradle文件種添加maven存儲(chǔ)倉(cāng)庫Jitpack:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
添加依賴到你的app的build.gradle 文件中:
dependencies {
implementation 'com.github.hyy920109:GuidePro:1.0.3'
}
代碼
我們可以通過Activity Fragment ViewGroup其中一個(gè)拿到HighlightPro對(duì)象:
/**
* 會(huì)使用activity.window.decorView 作為父view 全屏顯示
*/
fun with(activity: Activity): HighlightPro {
return HighlightPro(activity)
}
/**
* 會(huì)使用會(huì)使用fragment依賴的activity的activity.window.decorView 作為父view 全屏顯示
*/
fun with(fragment: Fragment): HighlightPro {
return HighlightPro(fragment)
}
/**
* 會(huì)使用傳進(jìn)來的viewGroup作為父view
*/
fun with(view: ViewGroup): HighlightPro {
return HighlightPro(view)
}
簡(jiǎn)單的完整鏈?zhǔn)秸{(diào)用
HighlightPro.with(this)
.setHighlightParameter {
HighlightParameter.Builder()
.setHighlightViewId(R.id.btn_step_first)
.setTipsViewId(R.layout.guide_step_first)
.setHighlightShape(RectShape(4f.dp, 4f.dp, 6f))
.setHighlightHorizontalPadding(8f.dp)
.setConstraints(Constraints.StartToEndOfHighlight + Constraints.TopToTopOfHighlight)
.setMarginOffset(MarginOffset(start = 8.dp))
.build()
}
.setBackgroundColor("#80000000".toColorInt())
.setOnShowCallback { index ->
//do something
}
.setOnDismissCallback {
//do something
}
.show()
如果你想一次展示多個(gè)高亮view可以看如下代碼(區(qū)別是傳入的是一個(gè)List):
HighlightPro.with(this)
.setHighlightParameters(
HighlightParameter.Builder()
.setHighlightViewId(R.id.btn_step_first)
.setTipsViewId(R.layout.guide_step_first)
.setHighlightShape(RectShape(4f.dp, 4f.dp, 6f))
.setHighlightHorizontalPadding(8f.dp)
.setConstraints(Constraints.StartToEndOfHighlight + Constraints.TopToTopOfHighlight)
.setMarginOffset(MarginOffset(start = 8.dp))
.build()
+
HighlightParameter.Builder()
.setHighlightViewId(R.id.btn_step_second)
.setTipsViewId(R.layout.guide_step_second)
.setHighlightShape(RectShape(4f.dp, 4f.dp, 6f))
.setHighlightHorizontalPadding(8f.dp)
.setConstraints(Constraints.StartToEndOfHighlight + Constraints.TopToTopOfHighlight)
.setMarginOffset(MarginOffset(start = 8.dp))
.build()
)
.setBackgroundColor("#80000000".toColorInt())
.setOnShowCallback { index ->
//do something
}
.setOnDismissCallback {
//do something
}
.show()
如果我們連環(huán)展示高亮view(比如第一步、第二步。。。),可以采用多次調(diào)用setHighlightParameter, 代碼如下:
HighlightPro.with(this)
.setHighlightParameter {
HighlightParameter.Builder()
.setHighlightViewId(R.id.btn_step_first)
.setTipsViewId(R.layout.guide_step_first)
.setHighlightShape(RectShape(4f.dp, 4f.dp, 6f))
.setHighlightHorizontalPadding(8f.dp)
.setConstraints(Constraints.StartToEndOfHighlight + Constraints.TopToTopOfHighlight)
.setMarginOffset(MarginOffset(start = 8.dp))
.build()
}
.setHighlightParameter {
HighlightParameter.Builder()
.setHighlightViewId(R.id.btn_step_second)
.setTipsViewId(R.layout.guide_step_second)
.setHighlightShape(CircleShape())
.setHighlightHorizontalPadding(20f.dp)
.setHighlightVerticalPadding(20f.dp)
.setConstraints(Constraints.TopToBottomOfHighlight + Constraints.EndToEndOfHighlight)
.setMarginOffset(MarginOffset(top = 8.dp))
.build()
}
.setHighlightParameter {
HighlightParameter.Builder()
.setHighlightViewId(R.id.btn_step_third)
.setTipsViewId(R.layout.guide_step_third)
.setHighlightShape(OvalShape())
.setHighlightHorizontalPadding(12f.dp)
.setHighlightVerticalPadding(12f.dp)
.setConstraints(Constraints.BottomToTopOfHighlight + Constraints.EndToEndOfHighlight)
.setMarginOffset(MarginOffset(bottom = 6.dp))
.build()
}
.setBackgroundColor("#80000000".toColorInt())
.setOnShowCallback { index ->
//do something
}
.setOnDismissCallback {
//do something
}
.interceptBackPressed(true)
.show()
如果我們想現(xiàn)實(shí)pop window, 可以通過enableHighlight來控制,傳入false 就代表了不會(huì)高亮target view:
HighlightPro.with(this)
.setHighlightParameter {
HighlightParameter.Builder()
.setHighlightViewId(R.id.btn_tips_bottom)
.setTipsViewId(R.layout.pop_tips_layout_bottom)
.setConstraints(Constraints.TopToBottomOfHighlight + Constraints.EndToEndOfHighlight)
.setMarginOffset(MarginOffset(end = (-2).dp))
.build()
}
.enableHighlight(false)//禁用highlight
.interceptBackPressed(true)//攔截返回鍵,返回鍵會(huì)導(dǎo)致 popwindow消失
.show()
API 文檔
關(guān)于 HighlightParameter.Builder
| 方法名 | 方法描述 |
|---|---|
| setHighlightViewId | 設(shè)置高亮view的id |
| setHighlightView | 設(shè)置高亮view |
| setTipsViewId | 設(shè)置提示view的id |
| setTipsView | 設(shè)置提示view |
| setHighlightShape | 設(shè)置高亮形狀 |
| setHighlightVerticalPadding | 設(shè)置高亮區(qū)域的豎直padding |
| setHighlightHorizontalPadding | 設(shè)置高亮區(qū)域的水平padding |
| setConstraints | 設(shè)置提示view的相關(guān)約束 |
| setMarginOffset | 設(shè)置提示view的偏移量 |
| build | 返回一個(gè) HighlightParameter 對(duì)象 |
注意
- setHighlightViewId & setHighlightView
- setTipsViewId & setTipsView
對(duì)于上面兩組方法,你只需要使用每組中其中一個(gè)方法。如果都沒使用,UI 表現(xiàn)會(huì)不正常
關(guān)于 HighlightShape
| HighlightShape | 方法描述 |
|---|---|
| RectShape | 邊緣模糊的矩形圖形 |
| CircleShape | 邊緣模糊的圓形 |
| OvalShape | 邊緣模糊的橢圓形 |
注意
任何形狀都是基于高亮view在屏幕中的矩形區(qū)域,我們可以通過setHighlightVerticalPadding 或 setHighlightHorizontalPadding來擴(kuò)大高亮區(qū)域
關(guān)于 Constraints
這個(gè)類是決定提示view位置的核心類,類似于Android自帶的約束布局,目前我們所有的約束均依賴于高亮view
| Vertical Constraints | 屬性描述 |
|---|---|
| TopToTopOfHighlight | 將提示view頂部和高亮矩形頂部對(duì)齊 |
| TopToBottomOfHighlight | 將提示view頂部和高亮矩形底部對(duì)齊 |
| BottomToBottomOfHighlight | 將提示view底部和高亮矩形底部對(duì)齊 |
| BottomToTopOfHighlight | 將提示view底部和高亮矩形頂部對(duì)齊 |
| Horizontal Constraint | 屬性描述 |
|---|---|
| StartToStartOfHighlight | 將提示view左側(cè)和高亮矩形左側(cè)對(duì)齊 |
| StartToEndOfHighlight | 將提示view左側(cè)和高亮矩形右側(cè)對(duì)齊 |
| EndToEndOfHighlight | 將提示view右側(cè)和高亮矩形右側(cè)對(duì)齊 |
| EndToStartOfHighlight | 將提示view右側(cè)和高亮矩形左側(cè)對(duì)齊 |
注意
通常我們就設(shè)置兩個(gè)約束:一個(gè)豎直約束,一個(gè)水平約束,而且我們可以通過運(yùn)算符重載+來構(gòu)建約束集合:
Constraints.TopToBottomOfHighlight + Constraints.EndToEndOfHighlight
當(dāng)然我們也可以設(shè)置偏移量來調(diào)整提示view的位置:
setMarginOffset(MarginOffset(start = 8.dp))
最后
上面我們基本把HighlightPro的用法介紹完了,歡迎大家使用,如果它對(duì)您有幫助,記得給個(gè)star哦。如果使用過程有啥bug,歡迎提Issues,我會(huì)及時(shí)跟進(jìn)的。
到此這篇關(guān)于超好用的Android高亮引導(dǎo)庫的使用的文章就介紹到這了,更多相關(guān)Android高亮引導(dǎo)庫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android圖片選擇器ImageEditContainer
這篇文章主要為大家詳細(xì)介紹了Android圖片選擇器ImageEditContainer的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
Android實(shí)現(xiàn)簡(jiǎn)單的照相功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)簡(jiǎn)單的照相功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
android初學(xué)者必須掌握的Activity狀態(tài)的四大知識(shí)點(diǎn)(必讀)
本篇文章主要介紹了android activity的四種狀態(tài),詳細(xì)的介紹了四種狀態(tài),包括Running狀態(tài)、Paused狀態(tài)、Stopped狀態(tài)、Killed狀態(tài),有興趣的可以了解一下。2016-11-11
Android自定義ScrollView使用自定義監(jiān)聽
這篇文章主要介紹了Android自定義ScrollView使用自定義監(jiān)聽 ,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12
Android中的sqlite查詢數(shù)據(jù)時(shí)去掉重復(fù)值的方法實(shí)例
今天小編就為大家分享一篇關(guān)于Android中的sqlite查詢數(shù)據(jù)時(shí)去掉重復(fù)值的方法實(shí)例,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-01-01
android教程viewpager自動(dòng)循環(huán)和手動(dòng)循環(huán)
這篇文章主要介紹了android的viewpager自動(dòng)循環(huán)和手動(dòng)循環(huán)示例,需要的朋友可以參考下2014-02-02
Android開發(fā)之?dāng)?shù)據(jù)的存儲(chǔ)方式詳解
本篇文章主要介紹了Android開發(fā)之?dāng)?shù)據(jù)的存儲(chǔ)方式,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧。2016-11-11
Android自定義View實(shí)現(xiàn)loading動(dòng)畫加載效果
項(xiàng)目開發(fā)中對(duì)Loading的處理是比較常見的,安卓系統(tǒng)提供的不太美觀,引入第三發(fā)又太麻煩,這時(shí)候自己定義View來實(shí)現(xiàn)這個(gè)效果。這篇文章主要介紹了Android自定義View實(shí)現(xiàn)loading動(dòng)畫加載效果,需要的朋友可以參考下2017-03-03
Android 客戶端RSA加密的實(shí)現(xiàn)方法
這篇文章主要介紹了Android 客戶端RSA加密的實(shí)現(xiàn)方法的相關(guān)資料,希望通過本文能掌握RSA 的使用,需要的朋友可以參考下2017-08-08
Android實(shí)現(xiàn)帶指示器的自動(dòng)輪播式ViewPager
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)帶指示器的自動(dòng)輪播式ViewPager的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02

