android 蒙版图片带拖动_一个小巧好用的Android引导蒙版(浮层)库

原标题:一个小巧好用的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 来实现。作者也进行了一定的封装,使用的效果也挺好,但是我始终对调用的方法感觉不舒服:

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

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

7a7594346d7d34b77c996de22fb51ab2.png

这里还涉及到一个常量:

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

ef89c49deb6a3670ccfda8618d4ddea6.png

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

优化的NewbieGuide

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

Github地址如下:

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

导入

项目的 build.gradle 添加

8f7ba2c4f38e9078492c0e5fdd2b004c.png

module 的 build.gradle 添加

6bade1acb466179c967094595c5b642b.png

使用

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

d9c0276a470c736cc36359b2fa97db36.png

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

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

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

效果

69e0db121663540d466fdb7d056fcb80.png

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

更多配置

5592e13e978df4c8ff096fbd9f0be6f6.png

实现原理

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

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

698a5ff53549fe2a47c3049f28d2859f.png

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

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

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

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

写在后面

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

责任编辑:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值