一个小巧好用的Android引导蒙版(浮层)库

今日科技快讯

昨天,小米在北京正式发布了小米MIX 2和小米Note 3两款手机,以及小米笔记本Pro,其中小米MIX 2主打全面屏设计,拥有18:9比例的屏幕。在明天即将召开的苹果新品发布会之前,小米抢先公布了自己的全面屏手机,也是被视为和苹果面对面的碰撞。据最新小道消息,苹果明天将会发布iPhone 8、iPhone 8 Plus以及iPhone X这三款手机,其中iPhone X为iPhone 10周年纪念版,也是采用了全面屏的设计,那么就让我们拭目以待吧。

作者简介

本篇来自 胡奚冰 的投稿,详细地讲解了一个小巧的蒙版库,希望大家喜欢!

胡奚冰 的博客地址:

http://www.jianshu.com/p/5e80c7aee1fc

写在前面

每当一个项目开发一个新功能,总会想办法及时让用户得知有这样一个新功能,这时通常会采用引导页或者蒙版(浮层)的方式提心用户,这里有需要关注的新内容。

遇到这种需求,最简单的想法就是将引导的布局直接写在对应的页面中,在首次打开时显示,之后隐藏。但是用这种做法来显示只会出现一次的布局,显然有些浪费资源。而且很 low,完全体现不出 OOP 的编程思想。本文为解决上述的问题,在项目原来的基础上,自己实现一个小巧的库,主要对调用方式进行了封装,通过链式调用,一行代码就可以实现引导层的实现。

正文

我们的项目中原来使用的是:

http://www.jianshu.com/p/5aa96683d0dc

可以看到这是一个非常好的思路,通过 DecorView 来添加引导层,引导层的相关代码就可以从 activity 中抽离出来。高亮则是通过画笔的 setXfermode 来实现。作者也进行了一定的封装,使用的效果也挺好,但是我始终对调用的方法感觉不舒服:

每次使用时要判断是否显示过

通过下列方法显示出引导层

这里还涉及到一个常量:

需要在 manager 类中定义,并且设置对应的布局:

并且每增加一种引导浮层就要重复上述3步的过程。

优化的NewbieGuide

由于非常介意上述的调用方式,于是我抽空在上述的思路上自己实现一个小巧的库,主要对调用方式进行了封装,通过链式调用,一行代码就可以实现引导层的实现。

Github地址如下:

https://github.com/huburt-Hu/NewbieGuide

导入

项目的 build.gradle 添加

module 的 build.gradle 添加

使用

使用的话非常方便,在需要引导层的地方添加如下代码:

setLabel(String label) 方法需要传入一个当前引导层的标示,用于sp缓存当前引导层是否已经显示过,因此是一个必须的参数,忘了设置的话会抛出异常!

addHighLight() 方法有三个重载,第一个参数是需要高亮的view(通常是通过 findViewById  找到的 view),第二个参数是高亮的类型,目前有四种:矩形,圆形,椭圆,圆角矩形(如果选择圆角矩形的话,调用重载3个参数的方法,第三个参数是圆角的dp值),默认的话是矩形即只有一个参数的重载。

setLayoutRes(int resId,int... id)  该方法第一个参数传入 xml 的布局,可以任意编辑,如提示的文字,颜色,位置,图片等,皆有你来自定义。第二个参数是可变参数,传入该布局内需要点击消失引导层的 view 的 id。之所以用这种方式是因为通过代码来调整视图非常麻烦,无法直接看到效果,我在使用中经常要部署好多次才会确定最终位置,远没有 layout.xml 来实现布局方便。

效果

当然,这只是最简单的实现效果,具体要如何的界面都可以由你来自定义 layout,并通过setLayoutRes() 方法传入即可。

更多配置

实现原理

这个库非常的小,总共只有5个类,一个接口,一个工具类。
高亮的实现是通过画笔的 setXfermode。即当两个画布上都绘制了图片是,可以控制最终显示的样式,有取重叠部分,有去除重叠部分的等等,总共有 16 种规则,具体下图:

我所使用的是 clear 属性,即先通过 mHcanvas.drawColor(mBackgroundColor); 绘制背景色,然后通过设置了 clear 属性的画笔

镂空出需要高亮的 view,view 在屏幕的位置可以通过下述方法获取:

mHole 就是之前传入的需要高亮的 view。

余下就是调用的封装了,使用了建造者模式来保证链式调用,有兴趣的可以 clone 代码看下,也用不了多少时间。

写在后面

这个库也是我第一个公开的库,目前仅仅实现了基本的功能,后续也会不断维护和升级。有什么疑问或者建议,或者需要补充的需求都可以回复,留言,感觉各位阅读我的文章~

更多

每天学习累了,看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号,每天都有好心情。

如果你有好的技术文章想和大家分享,欢迎向我的公众号投稿,投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号: