具有圆角的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);
    }
}

这个实现大部分都有效。但是，只要网址完成加载并在屏幕上显示自己，我就会丢失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;
    }
}

Answer 2

在onDraw(Canvas canvas)，你最后称之为super方法。这意味着您在自定义绘制方法中执行的任何操作都将通过super方法撤消。尝试先调用super，然后再进行自定义绘图。

Answer 3

它可能会帮助别人。在加载数据之前，您需要进行设置

webView.getSettings().setUseWideViewPort(true);

并应用你在XML文件中绘制。

它对我有用。

Answer 4

这是解决方案。经过三天的研究。

public class RoundedWebView extends WebView
{
private final static float CORNER_RADIUS = 100.0f;

private Bitmap maskBitmap;
private Paint paint, maskPaint;
private float cornerRadius;

public RoundedWebView(Context context) {
    super(context);
    init(context, null, 0);
    initView(context);
}

public RoundedWebView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs, 0);
    initView(context);
}

public RoundedWebView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(context, attrs, defStyle);
    initView(context);
}

private void init(Context context, AttributeSet attrs, int defStyle) {
    DisplayMetrics metrics = context.getResources().getDisplayMetrics();
    cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS, metrics);

    paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    maskPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

    setWillNotDraw(false);
}

@Override
public void draw(Canvas canvas) {
    Bitmap offscreenBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas offscreenCanvas = new Canvas(offscreenBitmap);

    super.draw(offscreenCanvas);

    if (maskBitmap == null) {
        maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
    }

    offscreenCanvas.drawBitmap(maskBitmap, 0f, 0f, maskPaint);
    canvas.drawBitmap(offscreenBitmap, 0f, 0f, paint);
}

private Bitmap createMask(int width, int height) {
    Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ALPHA_8);
    Canvas canvas = new Canvas(mask);

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(Color.WHITE);

    canvas.drawRect(0, 0, width, height, paint);

    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    canvas.drawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint);

    return mask;
}

void initView(Context context){
    // i am not sure with these inflater lines
    LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    // you should not use a new instance of MyWebView here
    // MyWebView view = (MyWebView) inflater.inflate(R.layout.custom_webview, this);
    this.getSettings().setUseWideViewPort(true);
    this.getSettings().setLoadWithOverviewMode(true);

}
}