WebView设置圆角

>i **问题**： webView设置了圆角背景，然后又设置了LayoutParam ，最后圆角不生效。

这是一个在 Android 开发中非常经典的问题。
你遇到的情况是：**WebView 的内容绘制在了它的背景层之上，并且其内容本身是不透明的矩形，这会覆盖掉你为 WebView 容器设置的圆角背景。**

简单来说，想象一下你有一个圆角的相框（你的背景），然后你把一张方形的照片（WebView 的网页内容）放了进去，照片的四个尖角会把相框的圆角给遮住。
`setLayoutParams`  本身不会直接导致圆角失效，但它会触发视图的重新测量和布局`measure/layout`最终在绘制`draw`时，问题就显现出来了。

------

### 问题根源

`WebView` 继承自 `View`，但它的内部渲染机制非常复杂。它使用自己的渲染引擎（Blink）来绘制网页内容。这个引擎默认在一个矩形的画布上绘制，并且通常会自带一个不透明的背景色（比如白色）。当你给 `WebView` 这个 `View` 本身设置一个圆角背景时，你只是改变了 `View` 的背景层，但并没有告诉 Blink 引擎把它绘制的内容也裁剪成圆角。

### 解决方案

有几种高效且常用的方法可以解决这个问题，推荐程度由高到低排列：

#### 方法一：使用 `clipToOutline` (推荐，API 21+)

这是 Android 5.0 (Lollipop) 及以上版本最现代、最简单的解决方案。它告诉视图系统根据其轮廓（Outline）来裁剪其内容。而视图的轮廓通常是由它的背景 `Drawable` 决定的。

**步骤：**

1. 创建一个圆角背景 Drawable XML 文件

在 res/drawable/ 目录下创建一个 XML 文件，例如 rounded_background.xml:

```xml
   <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android">
       <solid android:color="@android:color/white" /> <corners android:radius="16dp" /> </shape>
   ```

2. 在布局文件中应用背景并启用裁剪

在你的 WebView 控件上，设置背景并添加 clipToOutline 属性。

```xml
   <WebView
       android:id="@+id/my_webview"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@drawable/rounded_background"
       android:clipToOutline="true" />
   ```

3. （可选）在代码中设置

如果你是动态创建 WebView，也可以在代码中实现：

```
   // Java
   WebView webView = findViewById(R.id.my_webview);
   webView.setBackgroundResource(R.drawable.rounded_background);
   webView.setClipToOutline(true);

// Kotlin
   val webView = findViewById<WebView>(R.id.my_webview)
   webView.setBackgroundResource(R.drawable.rounded_background)
   webView.clipToOutline = true
	```

优点： 官方推荐，性能好，代码简洁。

缺点： 只支持 Android 5.0 (API 21) 及以上版本。

------

#### 方法二：使用父容器包裹（兼容性最好）

这是最常用、兼容性最好的方法。将 `WebView` 放入一个本身支持圆角的父布局中（例如 `CardView` 或一个设置了圆角背景的 `FrameLayout`），然后由父布局来负责裁剪。

**步骤：**

1. 在布局文件中使用 CardView 包裹 WebView

CardView 是专门为此类场景设计的，自带圆角和阴影效果。

```xml
   <androidx.cardview.widget.CardView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       app:cardCornerRadius="16dp"
       app:cardElevation="0dp"> <WebView
           android:id="@+id/my_webview"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />

</androidx.cardview.widget.CardView>
   ```

**注意：** 你需要添加 `CardView` 的依赖库：`implementation 'androidx.cardview:cardview:1.0.0'`

2. （重要）将 WebView 背景设置为透明

为了让 CardView 的圆角能够“透”出来，你需要确保 WebView 本身是透明的。

```java
   // Java
   WebView webView = findViewById(R.id.my_webview);
   // 禁用硬件加速的滚动条可能会导致渲染问题，通常保持默认即可
   // webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null); // 只有在特定渲染问题时才尝试
   webView.setBackgroundColor(0); // 或者 Color.TRANSPARENT

// Kotlin
   val webView = findViewById<WebView>(R.id.my_webview)
   webView.setBackgroundColor(Color.TRANSPARENT)
   ```

优点： 兼容性极佳，可以兼容到很低版本的 Android 系统。

缺点： 增加了一层布局嵌套。

------

#### 方法三：自定义 WebView 并重写 `onDraw` (不推荐，过于复杂)

你可以创建一个继承自 `WebView` 的自定义类，重写它的 `onDraw` 或 `dispatchDraw` 方法，在绘制内容前，手动用 `canvas.clipPath()` 来裁剪画布。

这种方法非常灵活，但也很复杂，容易引发性能问题或在不同系统版本上出现兼容性问题，对于仅仅实现圆角的需求来说，有点“杀鸡用牛刀”。**通常不推荐**使用此方法。

### 总结与建议

| **方法**                    | **优点**                       | **缺点**                   | **推荐场景**                        |
| --------------------------- | ------------------------------ | -------------------------- | ----------------------------------- |
| **`clipToOutline`**         | **性能好，代码简洁，官方推荐** | 仅支持 API 21+             | **项目最低支持版本 >= Android 5.0** |
| **父容器包裹 (`CardView`)** | **兼容性最好，简单可靠**       | 增加布局层级               | **需要兼容旧版本或所有场景**        |
| **自定义 View**             | 灵活性最高                     | 复杂，易出错，可能影响性能 | 极少数需要高度自定义绘制逻辑的场景  |

**给你的建议：**

1. **首选方法一 (`clipToOutline`)**：如果你的 App 的 `minSdkVersion` 大于等于 21，这是最理想的方案。
2. **备选方法二 (`CardView`)**：如果你的 App 需要兼容 Android 5.0 以下的设备，或者方法一因某些未知原因不生效，那么使用 `CardView` 包裹是万无一失的选择。