带有圆角的 Android 自定义 WebView

Question

我正在尝试制作一个与常规 WebView 完全相同的自定义 WebView，只是它具有圆角。圆角需要透明，因为我想把这个 WebView 放在一个对话框中。

我尝试像这样制作我的自定义类:

public class RoundedWebView extends WebView
{
    private Context context;

    private int width;

    private int height;

    public RoundedWebView(Context context)
    {
        super(context);

        initialize(context);
    }

    public RoundedWebView(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        initialize(context);
    }

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

        initialize(context);
    }

    private void initialize(Context context)
    {
        this.context = context;
    }

    // This method gets called when the view first loads, and also whenever the
    // view changes. Use this opportunity to save the view's width and height.
    @Override protected void onSizeChanged(int newWidth, int newHeight, int oldWidth, int oldHeight)
    {
        this.width = newWidth;

        this.height = newHeight;

        super.onSizeChanged(newWidth, newHeight, oldWidth, oldHeight);
    }

    @Override protected void onDraw(Canvas canvas)
    {
        int radius = Utilities.dpToPx(context, 5);

        Path clipPath = new Path();

        clipPath.addRoundRect(new RectF(0, 0, width, height), radius, radius, Path.Direction.CW);

        canvas.clipPath(clipPath);

        super.onDraw(canvas);
    }
}

并且这个实现在大多数情况下都有效。但是，一旦 url 完成加载并在屏幕上显示，我就会失去 WebView 的圆角。知道发生了什么吗？

Answer 1

这是我找到的解决方案。在我的 onDraw() 方法中，我创建了一个倒置的填充圆角矩形，然后使用 Porter Duff Xfer 模式从屏幕上“清除”该区域。这给我留下了一个边缘很好斜切的 WebView，包括 WebView 完成加载 url 的情况。

public class RoundedWebView extends WebView
{
    private Context context;

    private int width;

    private int height;

    private int radius;

    public RoundedWebView(Context context)
    {
        super(context);

        initialize(context);
    }

    public RoundedWebView(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        initialize(context);
    }

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

        initialize(context);
    }

    private void initialize(Context context)
    {
        this.context = context;
    }

    // This method gets called when the view first loads, and also whenever the
    // view changes. Use this opportunity to save the view's width and height.
    @Override protected void onSizeChanged(int newWidth, int newHeight, int oldWidth, int oldHeight)
    {
        super.onSizeChanged(newWidth, newHeight, oldWidth, oldHeight);

        width = newWidth;

        height = newHeight;

        radius = Utilities.dpToPx(context, 5);
    }

    @Override protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);

        Path path = new Path();

        path.setFillType(Path.FillType.INVERSE_WINDING);

        path.addRoundRect(new RectF(0, getScrollY(), width, getScrollY() + height), radius, radius, Path.Direction.CW);

        canvas.drawPath(path, createPorterDuffClearPaint());
    }

    private Paint createPorterDuffClearPaint()
    {
        Paint paint = new Paint();

        paint.setColor(Color.TRANSPARENT);

        paint.setStyle(Style.FILL);

        paint.setAntiAlias(true);

        paint.setXfermode(new PorterDuffXfermode(Mode.CLEAR));

        return paint;
    }
}