Android：给 webview 圆角？答案

【问题标题】：Android: give a webview rounded corners?Android：给 webview 圆角？
【发布时间】：2012-07-25 09:38:51
【问题描述】：

我正在尝试给我的 webView 圆角。

这是我的代码：

rounded_webview.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
 <solid android:color="#000"/>
    <corners
     android:bottomRightRadius="15dp"
     android:bottomLeftRadius="15dp"
  android:topLeftRadius="15dp"
  android:topRightRadius="15dp"/>
</shape>

这是我的 web 视图：

<WebView
        android:id="@+id/webView1"
        android:layout_width="293dp"
        android:layout_height="142dp"
        android:layout_gravity="center_horizontal"
        android:padding="5dip"
        android:background="@drawable/rounded_webview"/>

但这根本行不通！角不是圆角...

【问题讨论】：

您可以尝试在 webView 上添加一个圆形的虚拟视图...这样它就会保持在外面并且看起来是圆形的。
最干净的解决方案恕我直言是实现一个 WebView 类。我在这里发布了一个简单的复制粘贴解决方案：stackoverflow.com/a/60084819/990129

标签： java android rounded-corners

【解决方案1】：

试试这个

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
         android:shape="rectangle" >

    <corners 
       android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" 
       android:topLeftRadius="10dp" android:topRightRadius="10dp"/>

      <stroke
        android:color="@drawable/black"
        android:width="3dp"/>

</shape>

【讨论】：

【解决方案2】：

这是 Webview 的一个小怪癖，它有一个默认的白色背景颜色，绘制在任何可绘制对象的前面。您需要使用以下代码使其透明并显示您的可绘制背景：

WebView webview = (WebView)findViewById(R.id.webView1);        
webview.setBackgroundColor(0);

【讨论】：

【解决方案3】：

唯一的方法是用其他视图（例如FrameLayout）包裹WebView元素，并在外部视图上应用圆角背景。示例：

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="10dip"
        android:paddingBottom="10dip"
        android:paddingLeft="1dip"
        android:paddingRight="1dip"
        android:background="@drawable/white_rounded_area"
        >
    <WebView
            android:id="@+id/web_view"
            android:layout_width="300dip"
            android:layout_height="400dip"
            android:layout_gravity="center"
            />
</FrameLayout>

其中 paddingTop 和 paddingBottom 等于 drawable/white_rounded_area 的半径， paddingLeft 和 paddingRight 等于描边宽度drawable/white_rounded_area。

这种方法的缺点是顶部和底部的圆形面板可以与 WebView 内的网页具有不同的背景颜色，尤其是在页面滚动时。

【讨论】：

在 WebView 上简单地设置背景和填充在技术上是正确的方法，而这个建议的答案在技术上只是一种解决方法。但是，由于错误，这种“正确方法”不起作用：stackoverflow.com/questions/9170042/…

【解决方案4】：

我使用了一个看起来像相框的图像，我给相框加上了圆角。我把这个相框放在我试图给圆角的视图上。

这解决了the problem in iBog's solution 无法正常工作的背景面板。

诀窍是使用RelativeLayout；把你的布局放在里面。在您的布局下方，添加另一个ImageView，将其background 设置为合适的遮罩图像帧。这会将其绘制在您的其他布局之上。

在我的例子中，我制作了一个 9Patch 文件，它是一个灰色背景，并切出了一个透明的圆角矩形。

这为您的底层布局创建了完美的掩码。

XML 代码可能是这样的：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content" android:layout_width="fill_parent">

    <!-- ... INSERT ANY VIEW HERE ... -->

    <!-- FRAME TO MASK UNDERLYING VIEW -->
    <ImageView android:layout_height="fill_parent" 
        android:layout_width="fill_parent" 
        android:background="@drawable/grey_frame"
        android:layout_alignTop="@+id/mainLayout"
        android:layout_alignBottom="@+id/mainLayout" />

</RelativeLayout>

完整的细节可以在我的原始答案中找到：

Android XML rounded clipped corners

【讨论】：

【解决方案5】：

没有一个解决方案对我有用。它对我有用。在加载数据之前你需要设置

webView.getSettings().setUseWideViewPort(true);

并应用您在 XML 文件中可绘制。

它对我有用。

【讨论】：

【解决方案6】：

您可以使用 CardView 来包含 webview，您只需使用 app:cardCornerRadius 添加所需的圆角半径：

    <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:cardCornerRadius="10dp">                    // HERE

            <WebView
                android:id="@+id/webView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

    </android.support.v7.widget.CardView>

仅此而已

【讨论】：