一个非常好用的页面引导工具guideView

用户8062833872909
1,673 阅读3分钟

先看图，我就放一张，其实有各种各样的式样，下面详细解释一下。 1.png

使用方法

使用起来非常简单，代码如下：

Guide.with(this).addGuideParameter(
            GuideParamter.Builder(this.context!!)
//            .addHighLightView(textView)//直接加view
            .addHighLightViewById(R.id.message)//添加id
            .setHighLightShap(Shape.RoundRect)
            .setHighLightViewPadding(PaddingOffset(0, 0, 0, 0))
//            .addTipContentViewById(R.layout.guide_layout)
            .addTipContentView(tipView)//也可以直接添加view，因为这个页面可能多次使用
            .setTipViewOrientation(TipOrientation.BOTTOM)
            .setTipViewMargin(10)
            .setTipHintListener { loge(mTAG, "第一步") }
            .setDialogDimAmount(0.5f)
            .build()
        ).addGuideParameter(
            GuideParamter.Builder(this.context!!)
//            .addHighLightView(textView1)
            .addHighLightViewById(R.id.message1)
            .setHighLightShap(Shape.Oval)
            .setHighLightViewPadding(PaddingOffset(0, 0, 0, 0))
//            .addTipContentViewById(R.layout.guide_layout)
            .addTipContentView(tipView)//也可以直接添加view，因为这个页面可能多次使用
            .setTipViewOrientation(TipOrientation.LEFT)
            .setTipViewMargin(15)
            .setTipHintListener { loge(mTAG, "第二步") }
            .setDialogDimAmount(0.5f)
            .build()
        ).setGuideDimAmount(0.5f)
        .setLastStepListener {
            loge(mTAG, "最后一步")
        }.show()

或者是

Guide.with(this).setGuideParameters(
            GuideParamter.Builder(this.context!!)
//            .addHighLightView(textView)//直接加view
            .addHighLightViewById(R.id.message)//添加id
            .setHighLightShap(Shape.RoundRect)
            .setHighLightViewPadding(PaddingOffset(0, 0, 0, 0))
//            .addTipContentViewById(R.layout.guide_layout)
            .addTipContentView(tipView)//也可以直接添加view，因为这个页面可能多次使用
            .setTipViewOrientation(TipOrientation.BOTTOM)
            .setTipViewMargin(10)
            .setTipHintListener { loge(mTAG, "第一步") }
            .setDialogDimAmount(0.5f)
            .build()
                +
            GuideParamter.Builder(this.context!!)
//            .addHighLightView(textView1)
            .addHighLightViewById(R.id.message1)
            .setHighLightShap(Shape.Oval)
            .setHighLightViewPadding(PaddingOffset(0, 0, 0, 0))
//            .addTipContentViewById(R.layout.guide_layout)
            .addTipContentView(tipView)//也可以直接添加view，因为这个页面可能多次使用
            .setTipViewOrientation(TipOrientation.LEFT)
            .setTipViewMargin(15)
            .setTipHintListener { loge(mTAG, "第二步") }
            .setDialogDimAmount(0.5f)
            .build()
        ).setGuideDimAmount(0.5f)
        .setLastStepListener {
            loge(mTAG, "最后一步")
        }.show()

可以看出使用起来是超级简单的，你想在那里用就直接放入就好，而且有现成的库。 1.5版本新增一项功能，可以设置返回按钮的模式。

代码说明

Guide.with(this)这个with(this)支持activity、fragment、view都可以。show()就是显示了。

外部Guide的方法说明

方法名含义
addGuideParameter(paramter: GuideParamter)添加需要引导的步骤(单个，可多次添加)
setGuideParameters(guideParamters: MutableList<GuideParamter>)添加需要引导的步骤（多个，它支持plus操作符）
setGuideDimAmount(amount:Float)设置那个需要引导的view那里的透明度（范围0～1）
setLastStepListener(lastStepListener: () -> Unit)可以设置最后一步的监听事件
setKeyBackStatus(status: KeyBackEnum)可以返回按钮的效果，这个需要使用1.5版本

Shap的形状支持如下几种，是枚举类型

Shap说明
Rect矩形
RoundRect圆角矩形
Circle圆形
Oval椭圆形

内部GuideParamter引导步骤的方法说明

GuideParamter.Builder(this.context!!)这个Builder(this.context!!)需要传入Context对象

方法名含义
addHighLightView(view: View)添加需要引导的的view
addHighLightViewById(@IdRes viewId: Int)添加需要引导的的view的id
setHighLightShap(shape: Shape)设置需要引导的view外部的高亮框的样式
setHighLightViewPadding(paddingOffset: PaddingOffset)设置需要引导的view外部的高亮框与view的间隔
addTipContentView(view: View)添加对于引导步骤的指示view，直接添加view
addTipContentViewById(@LayoutRes viewId: Int)添加对于引导步骤的指示view，可以直接添加layout
setTipViewOrientation(orientation: TipOrientation)设置指示view的方位，是对于高亮view来说的
setTipViewMargin(margin: Int)设置指示view的方位距离高亮view的间隔
setTipHintListener(tipHintListener: () -> Unit)设置单步的监听事件
setDialogDimAmount(amount:Float)设置单步的高亮部分的透明度（范围0～1）
build()创建步骤的对象

你可以选择自己需要的形式来实现

PaddingOffset传入四个参数，分别是左、上、右、下，单位是像素

TipOrientation提示框在高亮框的哪个方位，也是枚举

TipOrientation说明
LEFT左边
TOP上面
RIGHT右边
BOTTOM下面

引入库的方法

第一步，在项目所在的build.gradle中加入maven { url 'https://jitpack.io'}
allprojects {
    repositories {
       ...
        maven { url 'https://jitpack.io'}
    }
}
第二步，在app所在的build.gradle下的dependencies中依赖implementation 'com.github.tangqipeng:guideView:1.4'就好。

记得1.5可以设置返回按钮的效果

KeyBackEnum说明
DEFAULT默认状态（点击返回按钮之后guide直接消失）
INVALID无效状态（点击返回按钮没有效果）
EFFECTIVE有效状态（点击返回按钮的效果和提示窗口一样）

1.8的版本完善了相应的弹窗之后状态栏黑色的问题，还有增加了圆角矩形的圆角设置setRoundRectCorners(25F, 25F)

例如：

GuideParamter.Builder(this.requireContext())
    .addHighLightView(mCardView)
    .setHighLightShap(Shape.RoundRect)
    .setRoundRectCorners(25F, 25F)
    .setHighLightViewPadding(PaddingOffset(0, 0, 0, 0))
    .addTipContentViewById(R.layout.guide_layout)
    .setTipViewOrientation(TipOrientation.BOTTOM)
    .setTipViewMargin(15)
    .setTipHintListener { Log.e(mTAG, "第二步") }
    .build()

是不是很简单，有兴趣的同学可以试一试。

avatar
文章
阅读
粉丝