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

更新:目前该库已更新v2.0版本,修改了调用api,详细使用可以看:可能是最好用的Android引导层库

前言

每当一个项目开发一个新功能,总会想办法及时让用户得知有这样一个新功能,这时通常会采用引导页或者蒙版(浮层)的方式提心用户,这里有需要关注的新内容。
遇到这种需求,最简单的想法就是将引导的布局直接写在对应的页面中,在首次打开时显示,之后隐藏。但是用这种做法来显示只会出现一次的布局,显然有些浪费资源。而且很low,完全体现不出OOP的编程思想。我们的项目中原来使用的是:http://www.jianshu.com/p/5aa96683d0dc
可以看到这是一个非常好的思路,通过DecorView来添加引导层,引导层的相关代码就可以从activity中抽离出来。高亮则是通过画笔的setXfermode来实现。作者也进行了一定的封装,使用的效果也挺好,但是我始终对调用的方法感觉不舒服:
每次使用时要判断是否显示过

if(NewbieGuideManager.isNeverShowed(this, NewbieGuideManager.TYPE_COLLECT)) {
      new NewbieGuideManager(this, NewbieGuideManager.TYPE_COLLECT).addView
              (mCollect, HoleBean.TYPE_CIRCLE).addView(mTitleTv, HoleBean
              .TYPE_RECTANGLE).show();
  }

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

new NewbieGuideManager(MainActivity.this,
                                  NewbieGuideManager.TYPE_LIST).addView(view
                                  .getChildAt(0).findViewById(R.id.logo), HoleBean
                                  .TYPE_RECTANGLE).show();

这里还涉及到一个常量:NewbieGuideManager.TYPE_LIST,需要在manager类中定义,并且设置对应的布局:

mNewbieGuide.setEveryWhereTouchable(false).addIndicateImg(R.drawable.left_arrow, ScreenUtils.dpToPx(mActivity,
                                60), ScreenUtils.dpToPx(mActivity, 110)).addMsgAndKnowTv("这个listview滚动到item6后出现新手引导浮层,\n只有点击我知道啦才会想消失",
                                -ScreenUtils.dpToPx(mActivity, 250)).show();

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

优化的NewbieGuide

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

导入

先来看下如何导入项目中:
项目的build.gradle添加

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

module的build.gradle添加

dependencies {
     compile 'com.github.huburt-Hu:NewbieGuide:v1.0.2'
   }

使用

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

NewbieGuide.with(this)//传入activity
               .setLabel("guide1")//设置引导层标示,用于区分不同引导层,必传!否则报错
               .addHighLight(view, HighLight.Type.RECTANGLE)//添加需要高亮的view
               .setLayoutRes(R.layout.view_guide)//自定义的提示layout,不要添加背景色,引导层背景色通过setBackgroundColor()设置
               .show();//显示引导层

setLabel(String label)方法需要传入一个当前引导层的标示,用于sp缓存当前引导层是否已经显示过,因此是一个必须的参数,忘了设置的话会抛出异常!
addHighLight()方法有三个重载,第一个参数是需要高亮的view(通常是通过findViewById找到的view),第二个参数是高亮的类型,目前有四种:矩形,圆形,椭圆,圆角矩形(如果选择圆角矩形的话,调用重载3个参数的方法,第三个参数是圆角的dp值),默认的话是矩形即只有一个参数的重载。
setLayoutRes(int resId,int... id)该方法第一个参数传入xml的布局,可以任意编辑,如提示的文字,颜色,位置,图片等,皆有你来自定义。第二个参数是可变参数,传入该布局内需要点击消失引导层的view的id。之所以用这种方式是因为通过代码来调整视图非常麻烦,无法直接看到效果,我在使用中经常要部署好多次才会确定最终位置,远没有layout.xml来实现布局方便。

效果

效果

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

更多配置

Controller controller = NewbieGuide.with(this)
                .setOnGuideChangedListener(new OnGuideChangedListener() {//设置监听
                    @Override
                    public void onShowed(Controller controller) {
                        //引导层显示
                    }

                    @Override
                    public void onRemoved(Controller controller) {
                        //引导层消失
                    }
                })
                .setBackgroundColor(Color.BLACK)//设置引导层背景色,建议有透明度,默认背景色为:0xb2000000
                .setEveryWhereCancelable(false)//设置点击任何区域消失,默认为true
                .setLayoutRes(R.layout.view_guide, R.id.textView)//自定义的提示layout,第二个可变参数为点击隐藏引导层view的id
                .alwaysShow(true)//是否每次都显示引导层,默认false
                .build();//构建引导层的控制器
        controller.resetLabel("guide1");
        controller.remove();//移除引导层
        controller.show();//显示引导层

实现原理

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

setXfermode属性

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

PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
        mPaint.setXfermode(xfermode);

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

public RectF getRectF() {
        RectF rectF = new RectF();
        if (mHole != null) {
            int[] location = new int[2];
            mHole.getLocationOnScreen(location);
            rectF.left = location[0];
            rectF.top = location[1];
            rectF.right = location[0] + mHole.getWidth();
            rectF.bottom = location[1] + mHole.getHeight();
        }
        return rectF;
    }

mHole就是之前传入的需要高亮的view。
余下就是调用的封装了,使用了建造者模式来保证链式调用,有兴趣的可以clone代码看下,也用不了多少时间。

后记

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,590评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,808评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,151评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,779评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,773评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,656评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,022评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,678评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,038评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,411评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,005评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2 343

推荐阅读更多精彩内容