WebView 设置圆角,背景透明

文章学习地址：https://blog.csdn.net/u014544444/article/details/78107382

圆角.png

注意
我这个自定义圆角WebView是在原作者上面进行了一波修改

    <!--圆角WebView-->
    <declare-styleable name="ProgressCornersWebView">
        <attr name="leftTopCorner" format="boolean"></attr>
        <attr name="rightTopCorner" format="boolean"></attr>
        <attr name="leftBottomCorner" format="boolean"></attr>
        <attr name="rightBottomCorner" format="boolean"></attr>
        <!--圆角半径-->
        <attr name="cornerRadius" format="dimension"></attr>
    </declare-styleable>

leftTopCorner，rightTopCorner等控制是否圆角

  <com.qianti.mall.widget.ProgressCornersWebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            app:leftTopCorner="true"
            app:rightTopCorner="true"
            app:cornerRadius="@dimen/dp_5"
            android:layout_marginBottom="@dimen/dp_5"
            android:layerType="software" />

/**
* @date: 2019/5/31 0031
* @author: gaoxiaoxiong
* @description: 圆角WebView
**/
public class CornersWebView extends WebView {
    private int vWidth;
    private int vHeight;
    private int scrollX, scrollY = 0;
    private boolean leftTopCorner, rightTopCorner, leftBottomCorner, rightBottomCorner;
    private float[] radiusArray = {0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f};

    public CornersWebView(Context context) {
        this(context, null);
    }

    public CornersWebView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CornersWebView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ProgressCornersWebView);
        leftTopCorner = typedArray.getBoolean(R.styleable.ProgressCornersWebView_leftTopCorner, false);
        rightTopCorner = typedArray.getBoolean(R.styleable.ProgressCornersWebView_rightTopCorner, false);
        leftBottomCorner = typedArray.getBoolean(R.styleable.ProgressCornersWebView_leftBottomCorner, false);
        rightBottomCorner = typedArray.getBoolean(R.styleable.ProgressCornersWebView_rightBottomCorner, false);
        int radius = (int) typedArray.getDimension(R.styleable.ProgressCornersWebView_cornerRadius, getResources().getDimensionPixelSize(R.dimen.dp_5));
        if (leftTopCorner) {
            radiusArray[0] = radius;
            radiusArray[1] = radius;
        }

        if (rightTopCorner) {
            radiusArray[2] = radius;
            radiusArray[3] = radius;
        }

        if (leftBottomCorner) {
            radiusArray[4] = radius;
            radiusArray[5] = radius;
        }

        if (rightBottomCorner) {
            radiusArray[6] = radius;
            radiusArray[7] = radius;
        }
        typedArray.recycle();
    }


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

    @Override
    protected void onDraw(Canvas canvas) {
        scrollX = this.getScrollX();
        scrollY = this.getScrollY();
        Path path = new Path();
        RectF rectF = new RectF(scrollX, scrollY, scrollX + vWidth, scrollY + vHeight);
        path.addRoundRect(rectF,radiusArray, Path.Direction.CW);
        canvas.clipPath(path);
        super.onDraw(canvas);
    }
}

radiusArray 存储着左上角，右上角是否圆角

使用

     //关闭硬件加速
        webView.setLayerType(View.LAYER_TYPE_SOFTWARE,null);
        //设置透明色
        webView.setBackgroundColor(Color.parseColor("#00000000"));
        webView.setVerticalScrollBarEnabled(false); //垂直滚动条不显示
        String html="";//Html标签
        webView.loadDataWithBaseURL(null, getHtmlData(html), "text/html", "UTF-8", null);


 private String getHtmlData(String bodyHTML){
        String head = "<head>" +
                "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"> " +
                "<style> body{font-size:14px;} img{padding:0px,margin:0px;max-width:100px;max-height: 100px; width:auto; height:auto;}</style>" +
                "</head>";
        return  "<html>" + head + "<body>" + bodyHTML + "</body></html>";
    }

需要关闭硬件加速

最后编辑于：2019.06.18 14:07:27