删除 WebView Android 中不需要的空白答案

【问题标题】：Remove unwanted White Space in WebView Android删除 WebView Android 中不需要的空白
【发布时间】：2012-01-01 16:39:20
【问题描述】：

我已经开始使用 WebView 开发应用程序。实际上，我正在使用 Webview 加载图像（我喜欢使用该类的内置缩放控件）。我可以成功加载图像，但我可以看到一些恼人的空白。我找不到删除它的方法。我的图像大小为 750 * 1000。我在下面附上了我的代码。

webview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    <WebView
        android:id="@+id/webView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

ImageViewer.java

package com.android.test;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class ImageViewer extends Activity {

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);

        String loadUrl = "file:///android_res/drawable/splash_001.jpg";

        WebView image = (WebView) findViewById(R.id.webView);
        image.clearView();
        image.clearCache(true);
        image.getSettings().setBuiltInZoomControls(true);
        image.getSettings().setSupportZoom(true);
        image.getSettings().setLoadWithOverviewMode(true);
        image.getSettings().setUseWideViewPort(true);
        image.loadUrl(loadUrl);
    }

}

【问题讨论】：

您用于测试的手机/标签的尺寸是多少？
尝试将您的 layout_xx 更改为 'fill parent'
嗨。你有什么解决方案吗？我在这里遇到了同样的问题。你能帮帮我吗

标签： android image android-webview padding space

【解决方案1】：

默认情况下，webview 在正文中有一些边距/填充。如果要删除该填充/边距，请覆盖正文 tag 并添加边距，例如：

<body style="margin: 0; padding: 0">

【讨论】：

是的，这对我有用。必须确保边距和内边距均为 0。
@John：您的 HTML 可能有一些其他边距/填充。请查看您的 HTML
这是 SCROLLBAR_INSIDE_OVERLAY 问题。使用 Ben 的解决方案解决：webview.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY).
但是如何将此样式应用于webview，请帮助
关于如何将它应用到 web 视图： String what = "youtube.com/embed/dQw4w9WgXcQ?feature=oembed\" frameborder=\"0\" allowfullscreen> "; mWebView.loadDataWithBaseURL("", 什么, "text/html", "UTF-8", "");

【解决方案2】：

如果您正在谈论的空白在右侧，您可以将其添加到 webview。

mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

这应该会使空白消失，前提是它位于滚动条所在的右侧。

【讨论】：

THx，这对我有用。显然，如果您的内容比您的 webview 大，因此需要滚动视图，则滚动视图默认情况下不会超过内容。所以它需要它在 webview 的右边缘的空间
只是添加image 是WebView 的一个实例，以防有人想知道
就这么简单...在一个项目上工作和返工近 6 个月了，这个问题经常弹出，我从没想过它会通过这样一个简单的命令得到解决...谢谢你！！！
本优摇滚 ::::::: 非常感谢

【解决方案3】：

默认 HTML 网页有 10px 的内边距和外边距；您必须在 head 部分或 css 文件中设置：

<style type="text/css">
html, body {
width:100%;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>

这对我有用。

【讨论】：

但是如何将此样式应用于webview，请帮助
@ShirishHerwade 。您需要修改您在 webview 中调用的 html。
其实我不调用任何html，我使用.loadUrl(String)来显示图片
谢谢！您传递给 WebView 的 loadData 的完整字符串可能是："" + 你的 HTML 在这里 + ""
Op 所说的是 webView 问题！答案是关于 html。如果我们正在使用 somw others 网页怎么办？或者无论我们正在加载如何控制 html？

【解决方案4】：

我的 WebView 中呈现的 HTML 内容边界上有令人讨厌的空白（尽管该内容中没有图像）。起初我认为这与上面提到的 CSS 问题有关。但是通过使用样式表来更改 HTML、BODY 等的背景，它看起来越来越像 WebView 周围的填充。

user3241873 上面显示了如何调整 WebView 本身的填充，但我发现当 Eclipse 创建的默认 Android 应用程序生成布局文件（RelativeLayout“容器”而不是“线性布局”）时，它将这些属性添加到相对布局：

android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"

如果您在 res/values/dimens.xml 中查找这些填充值，您会发现它们被设置为 16dp。当我更改为 0dp 时，它删除了难看的空白 :)

如果有人将默认 (Hello World) TextView 替换为 WebView，则父 RelativeLayout 的填充会像房子里令人讨厌的亲戚一样粘在周围。

【讨论】：

【解决方案5】：

这是一个您可以使用 html 模板进行测试的示例，然后您可以将“正文”文本替换为您想要的任何内容……在您的情况下，是图像的 html。您可以根据需要使用 css 来设置 html 的样式。希望这可以帮助您更多地了解如何使用本地资产。如果您需要更多帮助，请发表评论。

一个不容错过的关键行是<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,target-densityDpi=device-dpi" />

将此用作模板：(assets/template.html)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,target-densityDpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
[CONTENT]
</body>
</html>

像这样使用 css：(assets/style.css)

@font-face {
  font-family: Roboto;
  src: url(file:///android_asset/fonts/Roboto.ttf);
}

html, div {
    margin: 0;
    padding: 0;
}

body {
    font-family: Roboto;
    font-size: 1.0em;
    color: rgb(61,61,61);
    text-align: left;
    position:relative;
    padding: 40px;
    background-color: #eeeeee;
}

然后在您的 WebView 类中：（您的扩展 WebView 的类）

public void setText(CharSequence text, int color){

       try {

           InputStream is = getResources().getAssets().open("article_view.html");
           int size = is.available();
           byte[] buffer = new byte[size];
           is.read(buffer);
           is.close();

           loadDataWithBaseURL("file:///android_asset/",
               new String(buffer).replace("[CONTENT]", text.toString()),
               "text/html", "UTF-8", null);

       } catch (IOException e) {
           e.printStackTrace();
       }

}

【讨论】：

【解决方案6】：

使用WebView的setScrollBarStyle方法并提供参数为View.SCROLLBARS_INSIDE_OVERLAY。

【讨论】：

【解决方案7】：

我有这个 [这是我的 activity.xml]

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

我刚刚删除了 relativeLayout 中的 padding

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" 
tools:context=".MainActivity">

我尝试了上述所有解决方案，但对我来说效果并不好。这个对我有用。

【讨论】：

【解决方案8】：

我真的不知道您指的是哪个空白（也许图像有填充等），但通常如果您在 WebView 中有任何布局问题，您会尝试通过提供适当的（内联）css 来修复它们-样式表。

【讨论】：

【解决方案9】：

将 webview.xml 中的填充设置为 0dp

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<WebView
    android:id="@+id/webView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="0dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp" />

【讨论】：

有android:padding属性，不需要单独指定。而且，顺便说一句，删除所有填充属性与将它们设置为 0dp 的效果相同。

【解决方案10】：

Kotlin 答案

比如我是这样去掉iFrame和WebView之间的空格的：

val url = "www.stackoverflow.com"

val iframeExample = "<html><body style=\"margin: 0; padding: 0\"><iframe width=\"100%\" src=\"$url\" frameborder=\"0\" allowfullscreen></iframe></body></html>"

webView.loadData(iframeExample, "text/html", "utf-8")

【讨论】：

【解决方案11】：

我已经拿到了。

这是我的逻辑代码，当应用程序打开网站时，您必须获取 webview 的大小，然后将其设置为高度

这是我的代码

 ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) webpage.getLayoutParams();
        p.height = webpage.getHeight();
        Log.e(" webpage.getHeight()", String.valueOf(webpage.getHeight()));
        webpage.setLayoutParams(p);

希望你能接受我的代码和我的回答 :) 适用于任何设备，甚至标签页 :)

【讨论】：

【解决方案12】：

我的情况，我的 webview 顶部有很大的填充。因此，设置 scrollbarSize="0dp"。在 AS 2.2.3 中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

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

【讨论】：