Android 使用Xfermode合成TabBarView

一、前言

PorterDuffXfermode  作为Android重要的合成组件，可以通过区域叠加方式进行裁剪和合成，起作用和Path.Op 类似，对于音视频开发中使用蒙版抠图和裁剪的需求，这种情况一般生成不了Path时，因此只能使用PorterDuffXfermode进行合成，当然Paint设置Shader也具备一定的能力，但是还是无法做到很多效果。

二、案例

这个案例使用了Bitmap合成，在边缘区域对色彩裁剪，从而实现了圆觉裁剪。

模版

//裁剪区域

技术上没有太多难点，但要注意的是Xfermode是2个Bitmap之间只使用，不像Shader那样可以单独使用。

Canvas resultCanvas = new Canvas(resultBitmap);

resultCanvas.drawBitmap(dstBitmap, paddingLeft + point.x, paddingTop, mSolidPaint);

mSolidPaint.setXfermode(mPorterDuffXfermode);

resultCanvas.drawBitmap(srcRoundBitmap, 0, 0, mSolidPaint);

canvas.drawBitmap(resultBitmap, 0, 0, null);

另外一点就是速度计算，利用了没有时间的逼近减速公式，当然你可以使用动画去实现

 float speed = Math.abs((mTargetZone - 1) * (contentWidth / mDivideNumber) - point.x) / mSpeed;

下面是速度控制逻辑

    @Override

    public void run() {

        //计算速度，先按照最大速度5变化，如果小于5，则表示该减速停靠

        float speed = Math.abs((mTargetZone - 1) * (contentWidth / mDivideNumber) - point.x) / mSpeed;
speed = (float) Math.max(1f, speed);

        float vPos = (mTargetZone - 1) * (contentWidth / mDivideNumber);

        if (point.x < vPos) {

            point.x += speed;

            if (point.x > vPos) {
point.x = vPos;

            }

        } else {

            point.x -= speed;

            if (point.x < vPos) {
point.x = vPos;

            }

        }

        if (point.x == vPos) {
isSliding = false;

        } else {
isSliding = true;

            postDelayed(this, 20);

        }

        postInvalidate();

    }

全部逻辑

public class TabBarView extends View implements Runnable {

    //画笔

    private Paint mSolidPaint;

    //中间竖线与边框间隙

    private int gapPadding = 0;

    //平分量

    private int mDivideNumber = 1;

    //边框大小

    private final float mBorderSize = 1.5f;

    //避免重复绘制Bitmap,短暂保存底色bitmap

    private Bitmap srcRoundBitmap;

    //图片混合模式

    private PorterDuffXfermode mPorterDuffXfermode;

    private PointF point;

    //内容区域大小

    private float contentWidth;

    private float contentHeight;

    //滑动到的目标区域

    private int mTargetZone;

    //滑动速度

    private float mSpeed;

    //主调颜色

    private int primaryColor;

    //默认字体颜色

    private int textColor;

    //焦点字体颜色

    private int selectedTextColor;

    //item

    private CharSequence[] mStringItems;

    //字体大小

    private float textSize;

    //是否处于滑动

    private boolean isSliding;


    Bitmap dstBitmap;

    Bitmap resultBitmap;


    private RectF rectBound = new RectF();


    public TabBarView(Context context) {

        super(context);

        init(null, 0);

    }


    public TabBarView(Context context, AttributeSet attrs) {

        super(context, attrs);

        init(attrs, 0);

    }


    public TabBarView(Context context, AttributeSet attrs, int defStyle) {

        super(context, attrs, defStyle);

        init(attrs, defStyle);

    }


    private void init(AttributeSet attrs, int defStyle) {

        // Load attributes

        final TypedArray a = getContext().obtainStyledAttributes(

                attrs, R.styleable.TabBarView, defStyle, 0);


        //参数值越大，速度越大，速度指数越小
mSpeed = Math.max(10 - Math.max(a.getInt(R.styleable.TabBarView_speed, 6), 6), 1);

mStringItems = a.getTextArray(R.styleable.TabBarView_tabEntries);
primaryColor = a.getColor(R.styleable.TabBarView_primaryColor, 0xFF4081);
textColor = a.getColor(R.styleable.TabBarView_textColor, primaryColor);
selectedTextColor = a.getColor(R.styleable.TabBarView_selectedTextColor, 0xffffff);
textSize = a.getDimensionPixelSize(R.styleable.TabBarView_textSize, 30);


        if (mStringItems != null && mStringItems.length > 0) {
mDivideNumber = mStringItems.length;

        }


        a.recycle();

mSolidPaint = new Paint();

        mSolidPaint.setFlags(Paint.ANTI_ALIAS_FLAG);
mPorterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
point = new PointF(0, 0);
mTargetZone = 1;


        invalidateTextPaintAndMeasurements();


    }


    private void invalidateTextPaintAndMeasurements() {

        mSolidPaint.setColor(primaryColor);

        mSolidPaint.setStrokeWidth(mBorderSize);

        mSolidPaint.setTextSize(textSize);

        mSolidPaint.setStyle(Paint.Style.STROKE);

        mSolidPaint.setXfermode(null);

    }




    @Override

    protected void onSizeChanged(int w, int h, int oldw, int oldh) {

        super.onSizeChanged(w, h, oldw, oldh);

        recycleBitmap();

    }


    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        int paddingLeft = getPaddingLeft();

        int paddingTop = getPaddingTop();

        int paddingRight = getPaddingRight();

        int paddingBottom = getPaddingBottom();

contentWidth = getWidth() - paddingLeft - paddingRight;
contentHeight = getHeight() - paddingTop - paddingBottom;

        float minContentSize = Math.min(contentWidth, contentHeight);


        rectBound.set(paddingLeft, paddingTop, paddingLeft + contentWidth, paddingTop + contentHeight);

        canvas.drawRoundRect(rectBound, minContentSize / 2F, minContentSize / 2F, mSolidPaint);

        for (int i = 1; i < mDivideNumber; i++) {

            canvas.drawLine(paddingLeft + 1F * contentWidth * i / mDivideNumber, paddingTop + gapPadding, paddingLeft + contentWidth * i / mDivideNumber, paddingTop + contentHeight - gapPadding, mSolidPaint);


        }


        if (srcRoundBitmap == null) {
srcRoundBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);

            Canvas srcCanvas = new Canvas(srcRoundBitmap);

            mSolidPaint.setStyle(Paint.Style.FILL_AND_STROKE);

            srcCanvas.drawRoundRect(rectBound, minContentSize / 2F, minContentSize / 2F, mSolidPaint);

        }


        if(dstBitmap == null) {
dstBitmap = Bitmap.createBitmap((int) (contentWidth / mDivideNumber), (int) contentHeight, Bitmap.Config.ARGB_8888);

        }

        dstBitmap.eraseColor(Color.TRANSPARENT);

        Canvas dstCanvas = new Canvas(dstBitmap);

        dstCanvas.drawColor(Color.YELLOW);


        if(resultBitmap == null) {
resultBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);

        }

        resultBitmap.eraseColor(Color.TRANSPARENT);

        Canvas resultCanvas = new Canvas(resultBitmap);

        resultCanvas.drawBitmap(dstBitmap, paddingLeft + point.x, paddingTop, mSolidPaint);

        mSolidPaint.setXfermode(mPorterDuffXfermode);

        resultCanvas.drawBitmap(srcRoundBitmap, 0, 0, mSolidPaint);

        canvas.drawBitmap(resultBitmap, 0, 0, null);


        invalidateTextPaintAndMeasurements();


        if (mStringItems != null) {


            for (int i = 0; i < mStringItems.length; i++) {

                String itemChar = mStringItems[i].toString();

                float textX = (contentWidth / mDivideNumber) * i / 2 + paddingLeft + (contentWidth * (i + 1) / mDivideNumber - mSolidPaint.measureText(itemChar)) / 2;

                float textY = paddingTop + (contentHeight - mSolidPaint.getFontMetrics().bottom - mSolidPaint.getFontMetrics().ascent) / 2;

                int color = mSolidPaint.getColor();

                mSolidPaint.setStyle(Paint.Style.FILL);

                if ((i + 1) == mTargetZone && !isSliding) {

                    mSolidPaint.setColor(selectedTextColor);

                } else {

                    mSolidPaint.setColor(textColor);

                }

                canvas.drawText(itemChar, textX, textY, mSolidPaint);

                mSolidPaint.setColor(color);

                mSolidPaint.setStyle(Paint.Style.STROKE);

            }

        }

    }



    @Override

    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {

            case MotionEvent.ACTION_DOWN:

                if (checkLocationIsOk(event) && !isSliding) {

                    return true;

                }

                break;

            case MotionEvent.ACTION_MOVE:

                return checkLocationIsOk(event);

            case MotionEvent.ACTION_UP:

            case MotionEvent.ACTION_CANCEL:

            case MotionEvent.ACTION_OUTSIDE:

                if (checkLocationIsOk(event) && !isSliding) {

                    float x = event.getX() - getPaddingLeft();
mTargetZone = (int) (x / (contentWidth / mDivideNumber)) + 1;

                    //规避区域超出范围
mTargetZone = Math.min(mTargetZone, mDivideNumber);

                    postToMove();

                }

                break;

        }

        return super.onTouchEvent(event);

    }


    private void postToMove() {

        if (point.x == (mTargetZone - 1) * (contentWidth / mDivideNumber)) {

            return;

        }

        postDelayed(this, 20);

    }


    /**

     * 检测位置是否可用

     *

     * @param event

     * @return

     */

    private boolean checkLocationIsOk(MotionEvent event) {

        float x = event.getX();

        float y = event.getY();

        if (x - getPaddingLeft() > 0 && (getPaddingLeft() + contentWidth - x) > 0 && y - getPaddingTop() > 0 && (getPaddingTop() + contentHeight - y) > 0) {

            return true;

        }

        return false;

    }


    private void recycleBitmap(Bitmap bmp) {

        if (bmp != null && !bmp.isRecycled()) {

            bmp.recycle();

        }

    }


    @Override

    protected void onDetachedFromWindow() {

        super.onDetachedFromWindow();

        getHandler().removeCallbacksAndMessages(null);

    }


    @Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);


        if (widthMode != MeasureSpec.EXACTLY) {
widthSize = getResources().getDisplayMetrics().widthPixels / 2;

        }


        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int heightSize = MeasureSpec.getSize(heightMeasureSpec);


        if (heightMode != MeasureSpec.EXACTLY) {
heightSize = widthSize / 2;

        }

        setMeasuredDimension(widthSize, heightSize);

    }


    @Override

    public void run() {

        //计算速度，先按照最大速度5变化，如果小于5，则表示该减速停靠

        float speed = Math.abs((mTargetZone - 1) * (contentWidth / mDivideNumber) - point.x) / mSpeed;
speed = (float) Math.max(1f, speed);

        float vPos = (mTargetZone - 1) * (contentWidth / mDivideNumber);

        if (point.x < vPos) {

            point.x += speed;

            if (point.x > vPos) {
point.x = vPos;

            }

        } else {

            point.x -= speed;

            if (point.x < vPos) {
point.x = vPos;

            }

        }

        if (point.x == vPos) {
isSliding = false;

        } else {
isSliding = true;

            postDelayed(this, 20);

        }

        postInvalidate();

    }


    public void setSelectedTab(int tabIndex) {
mTargetZone = Math.max(Math.min(mDivideNumber, tabIndex + 1), 1);

        recycleBitmap();

        postToMove();

    }


    public void setTabItems(CharSequence[] mStringItems) {
this.mStringItems = mStringItems;

        recycleBitmap();

        invalidate();

    }


    private void recycleBitmap() {

        if(dstBitmap != null && !dstBitmap.isRecycled()){

            dstBitmap.recycle();

        }

        if(resultBitmap != null && !resultBitmap.isRecycled()){

            resultBitmap.recycle();

        }
resultBitmap = null;
dstBitmap = null;

    }

}

我们需要自定义一些属性

<declare-styleable name="TabBarView">


    <attr name="speed" format="integer" />

    <attr name="tabEntries" format="reference"/>

    <attr name="primaryColor" format="color|reference"/>

    <attr name="textSize" format="dimension"/>

    <attr name="textColor" format="color|reference"/>

    <attr name="selectedTextColor" format="color|reference"/>


</declare-styleable>

还有部分需要引用的 string-array

<string-array name="tabEntries_array">
<item>A</item>
<item>B</item>
<item>C</item>
<item>D</item>

</string-array>

然后是布局文件（片段）

<com.android.jym.widgets.TabBarView

    android:layout_width="match_parent"

    android:layout_height="40dp"

    android:background="@android:color/transparent"

    android:padding="10dp"

    app:speed="4"

    app:tabEntries="@array/tabEntries_array"

    app:primaryColor="@color/colorAccent"

    app:textColor="@color/colorPrimaryDark"

    app:selectedTextColor="@android:color/white"

    />

三、总结

使用Xfermode + 蒙版进行抠图，是Android中重要的工具，本篇作为技术储备，后续会通过这种方式实现一些新的功能。