Android:给webview圆角?

时间:2012-07-26 18:12:22

标签: java android rounded-corners

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

但它根本行不通!角落不圆......

6 个答案:

答案 0 :(得分:19)

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

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

答案 1 :(得分:14)

唯一的方法是通过其他视图(例如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内的网页具有不同的背景颜色,尤其是在页面滚动时。

答案 2 :(得分: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>

答案 3 :(得分:0)

我使用的图像看起来像一个相框,我在框架中给出了圆角。我把这个相框放在我试图给圆角的视图。

这会让the problem in iBog's solution个背景面板效果不佳。


诀窍是使用RelativeLayout;将您的布​​局放在其中。 在布局下方添加另一个ImageView,将其background设置为合适的遮罩图像框。这将在您的其他布局之上绘制。

就我而言,我制作了一个灰色背景的9Patch文件,并从中剪下了透明的圆角矩形。

frame

这为您的底层布局创建了完美的遮罩。

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>

完整的详细信息可以在我的原始答案中找到:

答案 4 :(得分:0)

这些解决方案都不适合我。 它对我有用。在加载数据之前,您需要设置

webView.getSettings().setUseWideViewPort(true);

并将您应用于XML文件中。

它对我有用。

答案 5 :(得分:0)

您可以使用CardView来包含Web视图,而只需要使用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>

就这些