自定义 Drawable 边框与 App Bar Layout Header 重叠

Question

这是我的自定义可绘制对象的默认外观。

但是当滚动时，它与 AppBarLayout 重叠。

Drawable 的代码如下：

@Override
public void draw(@NonNull Canvas canvas) {

    // get drawable dimensions
    Rect bounds = getBounds();

    float width = bounds.right - bounds.left;
    float height = bounds.bottom - bounds.top;
    float w2 = width / 2;
    float h2 = height / 2;
    float radius = Math.min(w2, h2) - mStrokeWidth / 2;

    mPath.reset();
    mPath.addCircle(width / 2, height / 2, radius, Path.Direction.CW);
    canvas.clipPath(mPath);

    // draw background gradient

    float barHeight = height / themeColors.length;
    mRectF.left = 0;
    mRectF.top = 0;
    mRectF.right = width;
    mRectF.bottom = height;
    for (int i = 0; i < themeColors.length; i++) {
        mPaint.setColor(themeColors[i]);

        canvas.drawRect(0, i * barHeight, width, (i + 1) * barHeight, mPaint);
    }

    mRectF.set(0, 0, width, height);
    canvas.clipRect(mRectF, Region.Op.REPLACE);

    if (mStrokeWidth != 0)
        canvas.drawCircle(width / 2, height / 2, width / 2 - mStrokeWidth / 2, mStrokePaint);

}

支持库版本：25.3.1、26.1.0

我尝试过的： - 剪切路径的不同区域值而不是替换 - 先裁剪路径矩形再裁剪圆

我该如何解决这个问题？

Answer 1

我正在发布我的解决方案作为答案。

重叠的原因是 canvas 在没有保存的情况下被剪切了两次。

我删除了这条语句：

canvas.clipRect(mRectF, Region.Op.REPLACE);

并且在第一次剪辑 canvas 之前我使用

保存了它的状态

canvas.save();
canvas.clipPath(mPath);

然后当我画笔画的时候，我需要原来的canvas所以我恢复了它

canvas.restore();
if (mStrokeWidth != 0)
    canvas.drawCircle(width / 2, height / 2, width / 2 - mStrokeWidth / 2, mStrokePaint);

这解决了问题。

最终可绘制代码：

@Override
public void draw(@NonNull Canvas canvas) {

    // get drawable dimensions
    Rect bounds = getBounds();

    float width = bounds.right - bounds.left;
    float height = bounds.bottom - bounds.top;
    float w2 = width / 2;
    float h2 = height / 2;
    float radius = Math.min(w2, h2) - mStrokeWidth / 2;

    mPath.reset();
    mPath.addCircle(width / 2, height / 2, radius, Path.Direction.CW);
    canvas.save();
    canvas.clipPath(mPath);

    // draw background gradient

    float barHeight = height / themeColors.length;
    mRectF.left = 0;
    mRectF.top = 0;
    mRectF.right = width;
    mRectF.bottom = height;
    for (int i = 0; i < themeColors.length; i++) {
        mPaint.setColor(themeColors[i]);

        canvas.drawRect(0, i * barHeight, width, (i + 1) * barHeight, mPaint);
    }

    mRectF.set(0, 0, width, height);
    //canvas.clipRect(mRectF, Region.Op.REPLACE);
    canvas.restore();

    if (mStrokeWidth != 0)
        canvas.drawCircle(width / 2, height / 2, width / 2 - mStrokeWidth / 2, mStrokePaint);

}

自定义 Drawable 边框与 App Bar Layout Header 重叠

Custom Drawable border overlaps with App Bar Layout Header

android

android-custom-drawable