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

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

大家喜欢!

写在前面

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

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

正文

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

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

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

iOS形状蒙版 苹果手机蒙版在哪里_xml

这里还涉及到一个常量:

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

iOS形状蒙版 苹果手机蒙版在哪里_高亮_02

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

优化的NewbieGuide

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

导入

项目的 build.gradle 添加

iOS形状蒙版 苹果手机蒙版在哪里_iOS形状蒙版_03

module 的 build.gradle 添加

iOS形状蒙版 苹果手机蒙版在哪里_xml_04

使用

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

iOS形状蒙版 苹果手机蒙版在哪里_高亮_05

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

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

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

效果

iOS形状蒙版 苹果手机蒙版在哪里_android 蒙版图片带拖动_06

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

更多配置

iOS形状蒙版 苹果手机蒙版在哪里_xml_07

实现原理

这个库非常的小,总共只有5个类,一个接口,一个工具类。

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

iOS形状蒙版 苹果手机蒙版在哪里_xml_08

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

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

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

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

写在后面

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