android 按钮去掉弧度

背景

项目中测试反馈在Android P以下图片边黑了。看了一下项目代码发现是自定义圆角图片View造成的，review 代码发现实现原理很简单。就是如下图绘制出四个黄色的角，盖在图片上就行了。(PS：图画的比较粗糙，大家见谅)

先上代码

package com.wzc.xfermodedemo.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;

import androidx.annotation.Nullable;
import androidx.appcompat.widget.AppCompatImageView;

/**
 * Author: Wuzuchang
 * Date: 2020/4/4 12:24
 * Description: Test
 */
public class RoundImageView extends AppCompatImageView {

    private Paint mPaint;
    private RectF mRoundRectF;
    private Path mRoundPath;
    private Path mRectanglePath;
    private int mViewWidth;
    private int mViewHeight;
    private float[] mCornerRadius = new float[]{50, 50, 50, 50, 50, 50, 50, 50};
    private PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)

    public RoundImageView(Context context) {
        super(context);
        initView();
    }

    public RoundImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public RoundImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    private void initView() {
        mRoundRectF = new RectF();
        mRoundPath = new Path();
        mRectanglePath = new Path();
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.BLUE);
        mPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mViewWidth = w;
        mViewHeight = h;
        mRoundRectF.set(0, 0, w, h);
        mRoundPath.reset();
        mRoundPath.addRoundRect(mRoundRectF, mCornerRadius, Path.Direction.CW);
        mRectanglePath.reset();
        mRectanglePath.addRect(mRoundRectF, Path.Direction.CW);
        mRectanglePath.op(mRoundPath, Path.Op.DIFFERENCE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setXfermode(xfermode);
        canvas.drawPath(mRectanglePath, mPaint);
        mPaint.setXfermode(null);
    }
}

运行复现一下

如下图，左边是在android9.0以下的效果，中间是android9.0及以上的效果，右边是想要的效果。中间的只要把蓝色改为Activity背景色就是想要的效果了。

解决办法：

1.去掉setXfermode

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(mRectanglePath, mPaint);
    }

为什么不使用setXfermode也能实现？因为 我们继承的是AppCompatImageView在调用super.onDraw(canvas)的时候画布上已经有图片了，我们再通过canvas.drawPath(mRectanglePath, mPaint)继续画4个角就行了。
2.使用离屏缓冲 (Off-screen Buffer) ，也就是调用canvas.saveLayer。它的作用就相当于开启了另外一块画布，在我们现在这个缓冲层绘制，绘制完成之后得到的图形，再绘制到原始画布上。

//第一种
 	@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int sc = canvas.saveLayer(0, 0, mViewWidth, mViewHeight, null, Canvas.ALL_SAVE_FLAG);
        //去掉setXfermode或者PorterDuff.Mode.SRC_IN改为PorterDuff.Mode.SRC
        //mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC)); 
        canvas.drawPath(mRectanglePath, mPaint);
        mPaint.setXfermode(null);
        canvas.restoreToCount(sc);
    }
    //第二种
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int sc = canvas.saveLayer(0, 0, mViewWidth, mViewHeight, null, Canvas.ALL_SAVE_FLAG);
        //如果不设置canvas.drawColor，只能是去掉setXfermode或者PorterDuff.Mode.SRC_IN改为PorterDuff.Mode.SRC
        canvas.drawColor(Color.RED);
        //如果设置了canvas.drawColor，PorterDuffXfermode可以是SRC_IN或者SRC，也可以是DST_IN(但是此时四个角的颜色是canvas.drawColor(XXX)设置的颜色
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawPath(mRectanglePath, mPaint);
        mPaint.setXfermode(null);
        canvas.restoreToCount(sc);
    }

但就官方不建议使用该方法，具体可以看官方文档

3.关闭硬件加速

根据上面的提示，google建议我们使用 hardware layer。就是使用setLayerType，这个方法也是开启一个离屏缓冲

private void initView() {
        ...
         //通过软件加速的离屏缓冲来关闭硬件加速，如果应用已经关闭的硬件加速设置LAYER_TYPE_HARDWARE和LAYER_TYPE_SOFTWARE效果是相同的
        setLayerType(LAYER_TYPE_SOFTWARE, null); //注意，不要在onDraw中调用，每次调用会导致界面刷新
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawPath(mRectanglePath, mPaint);
        mPaint.setXfermode(null);
    }

注意：你是无法在视图级别开启硬件加速的，如果你的应用已经关闭了硬件加速，那么设置LAYER_TYPE_HARDWARE和LAYER_TYPE_SOFTWARE 效果是相同的。可以看官方文档 视图级别关闭硬件加速 和 hardware layer

出现黑色的原因

按照逻辑我们会认为，在画圆角的时候，只是单纯的画四个角。但实际上，却是四个角连成的矩形都参与计算，并且由于底层view自身的底色并不是透明色，出于不知名的原因，导致除了四个角其他部分否变成了黑色。

可以参考这篇文章中对setXfermode的讲解