Xfermode实践，实现可定制化的高亮引导库

发现自己平时写的小demo存电脑里经常各种找不到。。。还是不能偷懒啊，好记性不如烂笔头

Paint有个方法用来设置图像混合模式。

setXfermode(Xfermode xfermode)

至于什么是图像混合模式，在PS中，图像混合模式会影响是将两个图层叠加后的效果，其中涉及到的图形算法我们程序员一般不需要知道，具体还是掌握使用方法

通过查看API发现有三个子类
AvoidXfermode
PixelXorXfermode
PorterDuffXfermode
我们要用到的是PorterDuffXfermode，相信很多人都不陌生了，许多炫酷都效果都是使用它来实现的，像我们经常用到的效果：圆形图片、圆角矩形图片都可以使用它来实现。
系统为我们提供了18种图形混合的模式，不同模式下，图片混合得到的结果也大不相同，下面这种经典的图片可以说明各种混合模式的效果

20141120172919656.jpeg

下面通过例子来展示下，两种图形效果叠加的的混合效果

 private Bitmap createDstBitmap(){
        Paint circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        Bitmap target = Bitmap.createBitmap(getMeasuredWidth(),getMeasuredHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(target);
        canvas.drawCircle(150,150,95,circlePaint);
        return target;
    }
    private Bitmap createSrcBitmap(){
        Paint imageBitmapPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        Bitmap target = Bitmap.createBitmap(getMeasuredWidth(),getMeasuredHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(target);
        Bitmap source = BitmapFactory.decodeResource(getResources(),R.mipmap.bg);
        canvas.drawBitmap(source,0,0,imageBitmapPaint);
        return target;
    }```

```java
    @Override
    protected void onDraw(Canvas canvas) {
        //dst
        canvas.drawBitmap(createDstBitmap(),0,0,mPaint);
        Xfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
        mPaint.setXfermode(mXfermode);
        //src
        canvas.drawBitmap(createSrcBitmap(),0,0,mPaint);
    }

这样可以简单的实现圆形图片的效果~

1E3043EE-4AE7-4D8B-B76B-703FFBA8D269.png

其他效果就不演示了，照着图试一下就行了
实测下来发现硬件加速会影响混合的效果，所以最好还是把它关了

我们看看下面这种效果~

01454755a8c1836ac7258178c06963.jpg

（图片来着网络，如有侵权请与我联系）

在app中经常可以看到，下面说说实现思路

1，自定义一个FrameLayout，用来绘制遮罩层和用户引导
2，得到需要高亮的控件的位置信息
3，绘制一个半透明的遮罩层，设置Xfermode，然后根据2得到的位置信息，画出高亮显示的图形（如上图是一个圆）
4，开放接口，让用户可以控制用户引导的位置
5，开放接口让用户可以自定义高亮的图形
6，点击事件回调

其实像这种需求，网上已经很多轮子了，我看了一下hongyang 大神的杰作，基本也是差不多，下面我就拿hongyang大神的开源项目Highlight，拆开轮子看一看
文章后面我也基础这个项目做了一些扩展

先来实现一个简单版本的
自定义View三部曲~

public class MyTipLightView extends FrameLayout {
    private Bitmap mMaskBitmap;//遮罩层
    private static final PorterDuffXfermode MODE_DST_OUT = new PorterDuffXfermode(PorterDuff.Mode.DST_OUT);
    private int  maskColor = 0xCC000000;//暂时写死
    private Paint mPaint;
    private View mLightView;//需要高亮的View
    public MyTipLightView(Context context,View view) {
        super(context);
        setWillNotDraw(false);
        this.mLightView = view;
        mPaint = new Paint();
        mPaint.setDither(true);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
    }
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom)
    {
        super.onLayout(changed, left, top, right, bottom);
        if (changed){
            buildMask();
        }
    }
    private void buildMask() {
        mMaskBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(mMaskBitmap);
        canvas.drawColor(maskColor);
        mPaint.setXfermode(MODE_DST_OUT);
//这个工具类可以找到控件占据的矩形区域的矩形坐标，后面会给出
        RectF rect = new RectF(ViewUtils.getLocationInView((ViewGroup) mLightView.getParent(),mLightView));
//根据获取到的控件的矩形坐标，绘制一个圆角矩形高亮显示
        canvas.drawRoundRect(rect,6,6,mPaint);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(mMaskBitmap, 0, 0, null);
        super.onDraw(canvas);

    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        measureChildren(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),//
                MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
        setMeasuredDimension(width, height);
    }
}```
另外在封装一个工具类对外面提供方法来操作高亮显示
目前较为简单，只有一个显示的方法
```java
    /**
     *
     * @param parentlayout 显示遮罩层的容器
     * @param targetView   需要高亮的控件
     */
public class TipLightViewUtils {
    public void showLightView(View parentlayout,View targetView){
        MyTipLightView myTipLightView = new MyTipLightView(mContext,targetView);
        if (parentlayout instanceof FrameLayout)
        {
            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams
                    (ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            //添加到FrameLayout的最外层布局
            ((ViewGroup) parentlayout).addView(myTipLightView, ((ViewGroup) parentlayout).getChildCount(), lp);

        } else
        {
            FrameLayout frameLayout = new FrameLayout(this);
            ViewGroup parent = (ViewGroup) parentlayout.getParent();
            parent.removeView(parentlayout);
            parent.addView(frameLayout, parentlayout.getLayoutParams());
            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams
                    (ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            frameLayout.addView(parentlayout, lp);
            frameLayout.addView(myTipLightView);
        }
    }```
调用showLightView就能实现如下效果

![light.gif](http://upload-images.jianshu.io/upload_images/205088-d54c1af8c12e8113.gif?imageMogr2/auto-orient/strip)


但是这里还是有很多问题的。
没有显示用户自定义的引导提示界面。。
没有点击回调
无法高亮多个控件。。


需要高亮显示多个控件的话，那么在我们自定义的Framelayout里应该有个集合用来保存所有高亮的控件
每一个需要进行高亮显示的控件
需要具备，自定义的引导页面、高亮控件的位置信息，另外应保罗一个接口，让外面可以控制引导界面的显示位置
那么我们根据这些属性，建立相应的实体类已偏操作~
```java
public class ViewPosInfo {
    public int layoutId = -1;//用户自定义的引导提示布局
    public RectF rectF;      //高亮控件的位置信息
    public MarginInfo marginInfo;  //引导界面的位置信息
    public View view;     //需要高亮的控件
    public OnPosCallback onPosCallback;  //引导界面的位置控制接口
    public  interface OnPosCallback
    {
        void getPos(float rightMargin, float bottomMargin, RectF rectF, MarginInfo marginInfo);
    }
}

MarginInfo只是封装了一些margin

public class MarginInfo {
    public float topMargin;
    public float leftMargin;
    public float rightMargin;
    public float bottomMargin;
}```
提供接口用来设置高亮引导的布局的位置
```java
   public interface OnPosCallback
    {
     /**
     * @param rightMargin 高亮view在anchor中的右边距
     * @param bottomMargin 高亮view在anchor中的下边距
     * @param rectF 高亮view的l,t,r,b,w,h都有
     * @param marginInfo 设置你的布局的位置，一般设置l,t或者r,b
 */
        void getPos(float rightMargin, float bottomMargin, RectF rectF, MarginInfo marginInfo);
    }

下面改造一下自定义的FrameLayout，不再只是接受一个单一的高亮View了，使用一个数组集合来保存所有需要高亮的View

    private List<TipLightViewUtils.ViewPosInfo> viewRects;
    public MyTipLightView(Context context,List<TipLightViewUtils.ViewPosInfo> viewRects) {
        super(context);
        this.viewRects = viewRects;
        init();
    }
    public void init(){
        setWillNotDraw(false);

        mPaint = new Paint();
        mPaint.setDither(true);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        //绘制高亮的布局
        addViewForTip();
    }
    private void addViewForTip(){
        for(TipLightViewUtils.ViewPosInfo viewPosInfo : viewRects){
            View view = LayoutInflater.from(getContext()).inflate(viewPosInfo.layoutId,this,false);
            FrameLayout.LayoutParams lp = (LayoutParams) view.getLayoutParams();
            //将用户传递的高亮布局添加到当前Framelayout中,通过margin的方式来设定所处位置
            lp.width = ViewGroup.LayoutParams.WRAP_CONTENT;
            lp.height = ViewGroup.LayoutParams.WRAP_CONTENT;
            lp.leftMargin = (int) viewPosInfo.marginInfo.leftMargin;
            lp.topMargin = (int) viewPosInfo.marginInfo.topMargin;
            lp.rightMargin = (int) viewPosInfo.marginInfo.rightMargin;
            lp.bottomMargin = (int) viewPosInfo.marginInfo.bottomMargin;
            if(lp.rightMargin != 0){
                //如果设置了rightmargin,那么,说明布局是要往左边放,这样内部的控件应向右对其
                lp.gravity = Gravity.RIGHT;
            }else {
                lp.gravity = Gravity.LEFT;
            }
            if(lp.bottomMargin != 0){
                lp.gravity |= Gravity.BOTTOM;
            }else {
                lp.gravity |= Gravity.TOP;
            }
            addView(view,lp);
        }
    }```

绘制部分~
```java
private void buildMask() {
        mMaskBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(mMaskBitmap);
        canvas.drawColor(maskColor);
        mPaint.setXfermode(MODE_DST_OUT);
        for(TipLightViewUtils.ViewPosInfo viewPosInfo : viewRects){
            canvas.drawRoundRect(viewPosInfo.rectF,6,6,mPaint);
        }

    }```
TipLightViewUtils把add和show的逻辑分开
```java
 public TipLightViewUtils addHighLight(int viewId, int decorLayoutId, OnPosCallback onPosCallback){
        ViewGroup viewGroup = (ViewGroup) mAnchor;
        View view = viewGroup.findViewById(viewId);
        addHighLight(view,decorLayoutId,onPosCallback);
        return this;
    }
    public TipLightViewUtils addHighLight(View view,int decorLayoutId, OnPosCallback onPosCallback){
        ViewGroup parent = (ViewGroup) mAnchor;
        ViewPosInfo viewPosInfo = new ViewPosInfo();
        viewPosInfo.view = view;
        viewPosInfo.rectF = new RectF(ViewUtils.getLocationInView(mAnchor,view));
        viewPosInfo.layoutId = decorLayoutId;

        MarginInfo marginInfo = new MarginInfo();
        onPosCallback.getPos(parent.getWidth() - viewPosInfo.rectF.right,
                parent.getHeight() - viewPosInfo.rectF.bottom,viewPosInfo.rectF,marginInfo);
        viewPosInfo.marginInfo = marginInfo;
        viewPosInfo.onPosCallback = onPosCallback;
        viewRects.add(viewPosInfo);
        return this;
    }
    public void show(){
        MyTipLightView tipLightView = new MyTipLightView(mContext,viewRects);
        if (mAnchor instanceof FrameLayout)
        {
            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams
                    (ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            //添加到FrameLayout的最外层布局
            ((ViewGroup) mAnchor).addView(tipLightView, ((ViewGroup) mAnchor).getChildCount(), lp);

        } else
        {
            FrameLayout frameLayout = new FrameLayout(mContext);
            ViewGroup parent = (ViewGroup) mAnchor.getParent();
            parent.removeView(mAnchor);
            parent.addView(frameLayout, mAnchor.getLayoutParams());
            ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams
                    (ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            frameLayout.addView(mAnchor, lp);

            frameLayout.addView(tipLightView);
        }
    }```
相当简单，这时我们运行看看效果~

加张背景图让遮罩效果看起来更明显一些~

![了](http://upload-images.jianshu.io/upload_images/205088-4278d9a7df966882.gif?imageMogr2/auto-orient/strip)


还有一个用户可以自定义高亮的图形的功能的，前面我们写死了
```java
canvas.drawRoundRect(viewPosInfo.rectF,6,6,mPaint);

下面我们就把接口抽取出来~
怎么抽取呢？
前面我们在画高亮显示的区域时，是直接将图形写在了mMaskBitmap上，我们可以另外定义多一个Bitmap，让大家可以在上面绘制自己需要的高亮的显示图片~

so~

    //你想怎么显示~就怎么画，任性~
    public static interface LightShape{
        public void shape(Bitmap bitmap,ViewPosInfo viewPosInfo);
    }```
在viewPosInfo新增一个lightShape来保存用户自定义的图形接口
添加高亮控件的方法addHightlight里对拿到用户定义的LightShape~
```java
    public HighLight addHighLight(View view, int decorLayoutId, OnPosCallback onPosCallback,
                                  LightShape lightShape)
    {
        //省略。。。。
        //新增部分
        viewPosInfo.lightShape = lightShape == null?new RectLightShape():lightShape;
        mViewRects.add(viewPosInfo);

        return this;
    }```

再将绘制方法改一下就OK拉。

```java
private void buildMask()
    {
        mMaskBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(mMaskBitmap);
        canvas.drawColor(maskColor);
        mPaint.setXfermode(MODE_DST_OUT);
        mHighLight.updateInfo();
        mLightBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Bitmap.Config.ARGB_8888);
        for (HighLight.ViewPosInfo viewPosInfo : mViewRects) {
            viewPosInfo.lightShape.shape(mLightBitmap,viewPosInfo);
        }
        canvas.drawBitmap(mLightBitmap,0,0,mPaint);
    }```

举个例子，我们实现一个圆形的高亮图案~
```java
public class CircleLightShape implements HighLight.LightShape {
    @Override
    public void shape(Bitmap bitmap, HighLight.ViewPosInfo viewPosInfo) {
        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setDither(true);
        paint.setAntiAlias(true);
        paint.setMaskFilter(new BlurMaskFilter(15, BlurMaskFilter.Blur.SOLID));
        RectF rectF = viewPosInfo.rectF;
        canvas.drawCircle(rectF.left+(rectF.width()/2),rectF.top+(rectF.height()/2),
                Math.max(rectF.width(),rectF.height())/2,paint);
    }
}

在addHightlight时传入即可~
看看效果

light02.gif

大概就是酱紫_{剩下的就是对常用位置（上下左右）进行封装了，这个比较简单，看看源码就知道了}

最后编辑于：2017.12.04 02:01:41

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,761评论 5赞 460
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,953评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,998评论 0赞 320
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,248评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,130评论 4赞 356
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,145评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,550评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,236评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,510评论 1赞 291
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,601评论 2赞 310
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,376评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,247评论 3赞 313
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,613评论 3赞 299
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,911评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,191评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,532评论 2赞 342
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,739评论 2赞 335

Xfermode实践，实现可定制化的高亮引导库

推荐阅读更多精彩内容