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

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


6.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 有效状态(点击返回按钮的效果和提示窗口一样)

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容