超好用的Android高亮引導庫的使用

Posted on by

簡介

HighlightPro 是Android的一個高亮引導庫，同時它還可以是一個簡單的popup window庫

功能:

  • 可一次顯示一個或多個高亮view
  • 通過水平約束和豎直約束來準確定位提示view
  • 自定義提示view的出現動畫
  • 自定義高亮形狀和大小
  • 自定義高亮形狀的paint
  • 鏈式調用，使用簡單
  • 支持簡單的pop window

效果圖:

highlight_pro_cn.gif

highlight_pro_popup_cn.gif

highlight_recycler_view_cn.gif

用法:

Gradle

在項目級的build.gradle文件種添加maven存儲倉庫Jitpack：

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

添加依賴到你的app的build.gradle 文件中：

dependencies {		
	implementation 'com.github.hyy920109:GuidePro:1.0.3'
}

代碼

我們可以通過Activity Fragment ViewGroup其中一個拿到HighlightPro對象：

/**
 * 會使用activity.window.decorView 作為父view 全屏顯示
 */
fun with(activity: Activity): HighlightPro {
    return HighlightPro(activity)
}

/**
 * 會使用會使用fragment依賴的activity的activity.window.decorView 作為父view 全屏顯示
 */
fun with(fragment: Fragment): HighlightPro {
    return HighlightPro(fragment)
}

/**
 * 會使用傳進來的viewGroup作為父view
 */
fun with(view: ViewGroup): HighlightPro {
    return HighlightPro(view)
}

簡單的完整鏈式調用

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

如果你想一次展示多個高亮view可以看如下代碼（區別是傳入的是一個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()

如果我們連環展示高亮view(比如第一步、第二步。。。)，可以采用多次調用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()

如果我們想現實pop window, 可以通過enableHighlight來控制，傳入false 就代表瞭不會高亮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)//攔截返回鍵，返回鍵會導致 popwindow消失
    .show()

API 文檔

關於 HighlightParameter.Builder

方法名 方法描述
setHighlightViewId 設置高亮view的id
setHighlightView 設置高亮view
setTipsViewId 設置提示view的id
setTipsView 設置提示view
setHighlightShape 設置高亮形狀
setHighlightVerticalPadding 設置高亮區域的豎直padding
setHighlightHorizontalPadding 設置高亮區域的水平padding
setConstraints 設置提示view的相關約束
setMarginOffset 設置提示view的偏移量
build 返回一個 HighlightParameter 對象

註意

  • setHighlightViewId & setHighlightView
  • setTipsViewId & setTipsView

對於上面兩組方法，你隻需要使用每組中其中一個方法。如果都沒使用，UI 表現會不正常

關於 HighlightShape

HighlightShape 方法描述
RectShape 邊緣模糊的矩形圖形
CircleShape 邊緣模糊的圓形
OvalShape 邊緣模糊的橢圓形

註意

任何形狀都是基於高亮view在屏幕中的矩形區域，我們可以通過setHighlightVerticalPadding 或 setHighlightHorizontalPadding來擴大高亮區域

關於 Constraints

這個類是決定提示view位置的核心類，類似於Android自帶的約束佈局，目前我們所有的約束均依賴於高亮view

Vertical Constraints 屬性描述
TopToTopOfHighlight 將提示view頂部和高亮矩形頂部對齊
TopToBottomOfHighlight 將提示view頂部和高亮矩形底部對齊
BottomToBottomOfHighlight 將提示view底部和高亮矩形底部對齊
BottomToTopOfHighlight 將提示view底部和高亮矩形頂部對齊
Horizontal Constraint 屬性描述
StartToStartOfHighlight 將提示view左側和高亮矩形左側對齊
StartToEndOfHighlight 將提示view左側和高亮矩形右側對齊
EndToEndOfHighlight 將提示view右側和高亮矩形右側對齊
EndToStartOfHighlight 將提示view右側和高亮矩形左側對齊

註意

通常我們就設置兩個約束：一個豎直約束，一個水平約束，而且我們可以通過運算符重載+來構建約束集合：

Constraints.TopToBottomOfHighlight + Constraints.EndToEndOfHighlight

當然我們也可以設置偏移量來調整提示view的位置：

setMarginOffset(MarginOffset(start = 8.dp))

最後

上面我們基本把HighlightPro的用法介紹完瞭，歡迎大傢使用，如果它對您有幫助，記得給個star哦。如果使用過程有啥bug，歡迎提Issues，我會及時跟進的。

到此這篇關於超好用的Android高亮引導庫的使用的文章就介紹到這瞭,更多相關Android高亮引導庫內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：

    None Found