超好用的Android高亮引導庫

簡介

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

功能:

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

效果圖:

用法:

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 & setHighlightView
• setTipsViewId & setTipsView

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

關于 HighlightShape

注意

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

關于 Constraints

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

注意

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

Constraints.TopToBottomOfHighlight + Constraints.EndToEndOfHighlight

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

setMarginOffset(MarginOffset(start = 8.dp))

最后

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