Android：如何为Webview添加圆角？

Question

我试图给我的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>

这是我的webView：

<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"/>

但它根本不起作用！角落没有被圆润...

- Eamorr

---

你可以尝试在webView上添加一个圆角的虚拟视图... 这样它就会超出范围并呈现圆角效果。 - yahya

我认为最干净的解决方案是实现一个 WebView 类。我在这里发布了一个简单的复制粘贴解决方案：https://dev59.com/GJLea4cB1Zd3GeqPxxnc#60084819 - muetzenflo

Answer 1

这是Webview的一个小特点，它具有默认的白色背景色，会覆盖任何可绘制的内容。您需要使用以下代码使其变为透明并显示您的可绘制背景：

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

- georgiecasey

Answer 2

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

示例：

<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中，顶部和底部圆角面板可能与网页内部具有不同的背景颜色，特别是当页面滚动时。

- iBog

---

简单地在WebView上设置背景和填充技术上是正确的方法，而这个提议的答案技术上只是一个解决方法。然而，由于一个错误，这个“正确的方法”不起作用：https://dev59.com/xmox5IYBdhLWcg3wf0Xl - Benjamin Basmaci

Answer 3

您可以使用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>

就这些了

- SolArabehety

Answer 4

试一试

<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>

- MAC

Answer 5

对我都没有用。 它对我有用。在加载数据之前，您需要设置

webView.getSettings().setUseWideViewPort(true);

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

这对我有用。

- Harsh Shah

Answer 6

将WebView用FrameLayout包装，然后在其上设置background、clipToOutline和outlineProvider属性。

<FrameLayout
    android:layout_width="350dp"
    android:layout_height="400dp"
    android:background="@drawable/rounded_rectangle"
    android:clipToOutline="true"
    android:outlineProvider="background">

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

</FrameLayout>

- Alex Baryzhikov

Answer 7

我使用一个看起来像相框的图片，给这个相框加上圆角。我将这个相框覆盖在我想要添加圆角的视图上。

这解决了iBog解决方案中背景面板无法很好地工作的问题。

---

诀窍是使用一个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圆角剪裁

- Richard Le Mesurier