超好用的Android高亮引導(dǎo)庫(kù)的使用

更新時(shí)間：2021年04月22日 11:43:46 作者：OyeAndroid

這篇文章主要介紹了超好用的Android高亮引導(dǎo)庫(kù)的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

簡(jiǎn)介

HighlightPro 是Android的一個(gè)高亮引導(dǎo)庫(kù)，同時(shí)它還可以是一個(gè)簡(jiǎn)單的popup window庫(kù)

功能:

可一次顯示一個(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)庫(kù)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)庫(kù)的使用的文章就介紹到這了,更多相關(guān)Android高亮引導(dǎo)庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Android高亮引導(dǎo)控件的實(shí)現(xiàn)代碼

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

超好用的Android高亮引導(dǎo)庫(kù)的使用

簡(jiǎn)介

用法:

代碼

API 文檔

最后

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具