【Android】 自定义View那点事（二）Xfermode篇

回顾

上一节我们学会了使用Canvas和Paint实现自定义View的绘制，我们已经知道如何简单实现自定义View的方法。这一节我们主要来说说Paint的setXfermode方法，对于Android开发中碰到最多是实现圆角图片或是圆形图片显示，只要掌握了setXfermode的使用就能够实现我们想要的图片显示效果。

setXfermode知多少

想了解Xfermode是什么，当然先去翻翻Android官方开发文档啦。文档中Xfermode提供了三个Subclasses:AvoidXfermode,PixelXorXfermode,PorterDuffXfermode而这节我们先介绍PorterDuffXfermode，这也是和本节要讲的内容相关。其他的放在下次再讲吧。

说说PorterDuffXfermode

既然要说PorterDuffXfermode，它是实现图形混合模式，当要实现复杂显示多个图形重叠时呈现特别的显示方式PorterDuffXfermode就派上用处。PorterDuffXfermode的构造方法需要传递一个PorterDuff.Mode 参数。再查查文档吧，一看吓一跳，Enum Values不少，一共有18种mode。具体每一种模式的实现效果是什么样的？把代码敲起来就知道结果了啊。

public class PorterDuffView extends View {

    Paint mPaint;
    Context mContext;
    int BlueColor;
    int PinkColor;
    int mWith;
    int mHeight;
    public PorterDuffView(Context context) {
        super(context);
        init(context);
    }
    public PorterDuffView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public PorterDuffView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mHeight = getMeasuredHeight();
        mWith = getMeasuredWidth();
    }

    private void init(Context context) {
        mContext = context;
        BlueColor = ContextCompat.getColor(mContext, R.color.colorPrimary);
        PinkColor = ContextCompat.getColor(mContext, R.color.colorAccent);
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);
    }
    private  Bitmap drawRectBm(){
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(BlueColor);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);
        Bitmap bm = Bitmap.createBitmap(200,200, Bitmap.Config.ARGB_8888);
        Canvas cavas = new Canvas(bm);
        cavas.drawRect(new RectF(0,0,70,70),paint);
        return bm;
    }
    private  Bitmap drawCircleBm(){
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(PinkColor);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);
        Bitmap bm = Bitmap.createBitmap(200,200, Bitmap.Config.ARGB_8888);
        Canvas cavas = new Canvas(bm);
        cavas.drawCircle(70,70,35,paint);
        return bm;
    }
    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setFilterBitmap(false);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setTextSize(20);
        RectF recf = new RectF(20,20,60,60);
        mPaint.setColor(BlueColor);
        canvas.drawRect(recf,mPaint);
        mPaint.setColor(PinkColor);
        canvas.drawCircle(100,40,20,mPaint);
        int sc = canvas.saveLayer(0, 0,mWith,mHeight, null, Canvas.MATRIX_SAVE_FLAG |
                Canvas.CLIP_SAVE_FLAG |
                Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
                Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
                Canvas.CLIP_TO_LAYER_SAVE_FLAG);
        int y = 180;
        int x = 50;
            for(PorterDuff.Mode mode : PorterDuff.Mode.values()){
                if(y >= 900){
                    y = 180;
                    x += 200;
                }
                mPaint.setXfermode(null);
                canvas.drawText(mode.name(),x + 100,y,mPaint);
                canvas.drawBitmap(drawRectBm(),x,y,mPaint);
                mPaint.setXfermode(new PorterDuffXfermode(mode));
                canvas.drawBitmap(drawCircleBm(),x,y,mPaint);
                y += 120;
            }
        mPaint.setXfermode(null);
        // 还原画布
        canvas.restoreToCount(sc);
    }
}

图片描述
实现效果图，每个模式的效果一目了然。

实践求真知

知道PorterXfermode的使用模式下面我们实践到实际开发中，我们来绘制圆形图片和微信聊天图片。在设计自定义ImageView之前先简单回顾一下Canvas的绘制，对于Canvas的onDraw每执行一次就是在屏幕上增加一个Bitmap覆盖在原来的图层上。绘制自定义形状图片是通过将自定义图形图层和图片资源图层的内容使用PorterDuffXfermode绘制合并而成，那在图层之间PorterDuffXfermode绘制之前。需要使用 canvas.saveLayerAlpha将原图层的内容保存，使得图形图层是和图片资源图层进行绘制操作。在图层绘制结束之后再使用canvas.restoreToCount恢复保存的原图层内容。若不使用原图层保存和恢复的方法的情况肯定达不到原来所想要的效果，但也可以试试了解canvas的绘制原理，看看结果会是怎样。

绘制圆形图片

//
public class CircleImgView extends ImageView {

    private int mWidth;
    private int mHeight;
    private Paint mPaint;
    private Bitmap CircleBitmap;

    public CircleImgView(Context context) {
        super(context);
    }

    public CircleImgView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CircleImgView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void ImgCircle(){
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setColor(Color.GRAY);
        paint.setStrokeWidth(5);
        paint.setStyle(Paint.Style.FILL);
        CircleBitmap = Bitmap.createBitmap(mWidth,mHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(CircleBitmap);
        canvas.drawCircle(mWidth/2,mHeight/2,mWidth/2,paint);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setFilterBitmap(true);
        ImgCircle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int count = canvas.saveLayerAlpha(0, 0, mWidth, mHeight, 250, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG);
        super.onDraw(canvas);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        canvas.drawBitmap(CircleBitmap,0,0, mPaint);
        canvas.restoreToCount(count);
    }
}

绘制微信聊天图片

public class ImgCustView extends ImageView{

    private int mWidth;
    private int mHeight;
    private Paint mPaint;
    private Bitmap canvasBitmap;
    public ImgCustView(Context context) {
        super(context);
    }

    public ImgCustView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ImgCustView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void ImgShape(){
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setColor(Color.GRAY);
        paint.setStyle(Paint.Style.FILL);
        canvasBitmap = Bitmap.createBitmap(mWidth,mHeight, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(canvasBitmap);
        Path path = new Path();
        path.moveTo(mWidth - 25,50);
        path.lineTo(mWidth - 25,80);
        path.lineTo(mWidth,65);
        path.close();
        RectF rectF = new RectF(0,0,mWidth - 25,mHeight);
        canvas.drawRoundRect(rectF,20,20,paint);
        canvas.drawPath(path,paint);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setFilterBitmap(true);
        ImgShape();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int count = canvas.saveLayerAlpha(0, 0, mWidth, mHeight, 250, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG);
        super.onDraw(canvas);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        canvas.drawBitmap(canvasBitmap,0,0, mPaint);
        canvas.restoreToCount(count);
    }

}

主程序

public class ImgCustActivity extends BaseActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(500,500);
        layoutParams.setMargins(20,20,20,20);
        //实例化ImageView并加载图片资源
        ImageView imageView = new ImageView(this);
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        imageView.setImageResource(R.drawable.background);
        imageView.setLayoutParams(layoutParams);
        //实例化圆形ImageView并加载图片资源
        ImgCustView imgCustView = new ImgCustView(this);
        imgCustView.setScaleType(ImageView.ScaleType.FIT_XY);
        imgCustView.setImageResource(R.drawable.background);
        imgCustView.setLayoutParams(layoutParams);
        //实例化聊天ImageView并加载图片资源
        CircleImgView circleView = new CircleImgView(this);
        circleView.setScaleType(ImageView.ScaleType.FIT_XY);
        circleView.setImageResource(R.drawable.background);
        circleView.setLayoutParams(layoutParams);

        llContent.setBackgroundColor(Color.LTGRAY);
        llContent.addView(imageView);
        llContent.addView(imgCustView);
        llContent.addView(circleView);
    }
}

图片描述
最后的效果呈现

写在最后

这节主要学习PorterDuffXfermode模式并通过几个简单例子实践了一下。结合简单例子我们还可以深入学习绘制更为复杂有趣的自定义图形。本节只做到了抛砖迎玉的作用，以后我还会结合其他内容绘制更有意思和创造性的图形。之后还会讲讲关于View的动画，下次见 see you！

【Android】自定义View那点事（二）Xfermode篇

回顾

setXfermode知多少

说说PorterDuffXfermode

实践求真知

绘制圆形图片

绘制微信聊天图片

主程序

写在最后

一个无

引用和评论

【前端】CSS盒子模型

如何使用JavaScript开发AR(增强现实)移动应用 (一)

使用JavaScript调用手机平台上的原生API

如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）

通过Java代码实现图片的放大和缩小

只要200行JavaScript代码，就能把特斯拉汽车带到您身边

如何使用Java代码给图片增加倒影效果

【Android】 自定义View那点事（二）Xfermode篇

回顾

setXfermode知多少

说说PorterDuffXfermode

实践求真知

绘制圆形图片

绘制微信聊天图片

主程序

写在最后

一个无

引用和评论

【前端】CSS盒子模型

如何使用JavaScript开发AR(增强现实)移动应用 (一)

使用JavaScript调用手机平台上的原生API

如何用JavaScript判断前端应用运行环境（移动平台还是桌面环境）

通过Java代码实现图片的放大和缩小

只要200行JavaScript代码，就能把特斯拉汽车带到您身边

如何使用Java代码给图片增加倒影效果

【Android】自定义View那点事（二）Xfermode篇