自定义WebView实现圆角4个可单独控制大小的圆角

自定义WebView实现圆角4个可单独控制大小的圆角

自定义WebView圆角，解决在遇到使用webview时，有圆角的场景下无法实现的问题，此自定义WebView圆角可灵活单独设置4个角的圆角，也可一键设置4个角的圆角。

效果如下图：

实现方式：

创建自定义WebView：

第一步，我门先创建一个资源文件attrs.xml 用于添加属性供在布局文件中使用；

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RoundedWebView">
        <attr name="isAllRounded" format="boolean" />
        <attr name="outBackground" format="color" />
        <!-- Defines the radius of the four corners. -->
        <attr name="radius" format="dimension" />
        <!-- Radius of the top left corner. -->
        <attr name="topLeftRadius" format="dimension" />
        <!-- Radius of the top right corner. -->
        <attr name="topRightRadius" format="dimension" />
        <!-- Radius of the bottom left corner. -->
        <attr name="bottomLeftRadius" format="dimension" />
        <!-- Radius of the bottom right corner. -->
        <attr name="bottomRightRadius" format="dimension" />
    </declare-styleable>
</resources>

第二步，我们创建一个名为RoundedWebView的类，并且继承WebView，通过重写onSizeChanged和onDraw方法，onSizeChanged方法可以帮我们获取到view的宽和高，onDraw方法用于绘制圆角。

class RoundedWebView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : WebView(context, attrs) {
    private var mWidth = 0
    private var mHeight = 0
    var isAllRounded = false
    var radius: Float = 0f
    var topLeftRadius: Float = 0f
    var topRightRadius: Float = 0f
    var bottomLeftRadius: Float = 0f
    var bottomRightRadius: Float = 0f
    var backColor: Int = 0

    init {
        val typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundedWebView)
        radius = typedArray.getDimension(R.styleable.RoundedWebView_radius, radius)
        topLeftRadius =
            typedArray.getDimension(R.styleable.RoundedWebView_topLeftRadius, topLeftRadius)
        topRightRadius =
            typedArray.getDimension(R.styleable.RoundedWebView_topRightRadius, topRightRadius)
        bottomLeftRadius =
            typedArray.getDimension(R.styleable.RoundedWebView_bottomLeftRadius, bottomLeftRadius)
        bottomRightRadius =
            typedArray.getDimension(R.styleable.RoundedWebView_bottomRightRadius, bottomRightRadius)
        backColor = typedArray.getColor(R.styleable.RoundedWebView_outBackground, backColor)
        isAllRounded = typedArray.getBoolean(R.styleable.RoundedWebView_isAllRounded, isAllRounded)
        typedArray.recycle()
    }

    override fun onSizeChanged(
        newWidth: Int,
        newHeight: Int,
        oldWidth: Int,
        oldHeight: Int
    ) {
        super.onSizeChanged(newWidth, newHeight, oldWidth, oldHeight)
        mWidth = newWidth
        mHeight = newHeight
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val path = Path()
        path.setFillType(Path.FillType.INVERSE_WINDING)
        //顺时针自定义圆角
        val radii = if (isAllRounded) {
            floatArrayOf(
                radius,
                radius,
                radius,
                radius,
                radius,
                radius,
                radius,
                radius
            )
        } else {
            floatArrayOf(
                topLeftRadius,
                topLeftRadius,
                topRightRadius,
                topRightRadius,
                bottomRightRadius,
                bottomRightRadius,
                bottomLeftRadius,
                bottomLeftRadius
            )
        }
        path.addRoundRect(
            RectF(0f, getScrollY().toFloat(), mWidth.toFloat(), (getScrollY() + mHeight).toFloat()),
            radii,
            Path.Direction.CW
        )
        canvas.drawPath(path, createPorterDuffClearPaint())
    }

    //使用Porter Duff Xfer模式从屏幕"清除"该区域
    private fun createPorterDuffClearPaint(): Paint {
        val paint = Paint()
        paint.setColor(backColor)
        paint.setStyle(Paint.Style.FILL)
        paint.setAntiAlias(true)
        paint.setXfermode(PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP))
        return paint
    }
}

属性表：

xml中对应的属性	代码中对应的属性	属性说明
isAllRounded	isAllRounded	设置4个角是否都是圆角，值为Boolean，默认为false
outBackground	backColor	设置背景颜色，如果不设置背景颜色则圆角不生效，如何设置背景颜色为透明，则圆角与底层的view覆盖的地方为黑色，要想先是圆角的效果需要设置与背景色一致
radius	radius	设置四个圆角的大小，只有isAllRounded值为true时生效
topLeftRadius	topLeftRadius	设置左上角的圆角大小，只要isAllRounded值为false时生效
topRightRadius	topRightRadius	设置右上角的圆角大小，只要isAllRounded值为false时生效
bottomLeftRadius	bottomLeftRadius	设置左下角的圆角大小，只要isAllRounded值为false时生效
bottomRightRadius	bottomRightRadius	设置右下角的圆角大小，只要isAllRounded值为false时生效

使用方式：

第一步，在xml中使用：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F8F6F6"
    tools:context=".MainActivity4"
    tools:ignore="MissingDefaultResource">

    <com.example.myapplication.RoundedWebView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_marginStart="30dp"
        android:layout_marginEnd="30dp"
        android:layout_marginTop="50dp"
        app:isAllRounded="true"
        app:radius="30dp"
        app:outBackground="#F8F6F6"
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/web"/>
</androidx.constraintlayout.widget.ConstraintLayout>

第二步，在代码中调用

package com.example.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebViewClient

class MainActivity4 : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main4)

        val webView=findViewById<RoundedWebView>(R.id.web)
        webView.settings.javaScriptEnabled = true
        webView.webViewClient = WebViewClient()
        webView.loadUrl("https://ditu.amap.com/")
    }
}

***注意：***我这里加载的是地图，如果要操作地图，如放大、移动等，需要设置webView.settings.javaScriptEnabled = true，webView.webViewClient = WebViewClient() 这两个属性。

效果图如下：

背景色设置为透明：app:outBackground=“@android:color/transparent”，4个圆角不生效，效果图如下：

​

背景色设置为红色：app:outBackground=“@android:color/holo_red_dark”，效果图如下：

设置上半部分圆角，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#F8F6F6"
    tools:context=".MainActivity4"
    tools:ignore="MissingDefaultResource">

    <com.example.myapplication.RoundedWebView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_marginStart="30dp"
        android:layout_marginEnd="30dp"
        android:layout_marginTop="50dp"
        app:outBackground="#F8F6F6"
        app:topLeftRadius="30dp"
        app:topRightRadius="30dp"
        app:layout_constraintTop_toTopOf="parent"
        android:id="@+id/web"/>
</androidx.constraintlayout.widget.ConstraintLayout>

效果图如下：

其他的就不在多举例了！

谢谢观看！ 编写不易，觉得写的好的可以给个赞，谢谢！