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

大概就是醬紫剩下的就是對常用位置(上下左右)進行封裝了,這個比較簡單,看看源碼就知道了

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容