当前位置： 文江博客话题详情

删除 Android WebView 中不需要的空白

发布于 2024-12-23 19:14:12 字数 1399 浏览 4 评论 0原文

我已经开始使用 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);
    }

}
原文

I have started developing an App using WebView. Actually I am loading an Image with Webview (I like to use the built-in zoom controls of the class). I can successfully load the Image but I can see some irritating white spaces. I can't find the way to remove it. My Images are 750 * 1000 in size. I have attached my code below.

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);
    }

}

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（12）

追星践月 2024-12-30 19:14:12

默认情况下，webview 在正文中有一些边距/填充。如果您想删除该填充/边距，请覆盖正文标签并添加边距，如下所示：

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

By default webview has some margin/padding in body. If you want to remove that padding/margin then override body tag and add margin like:

<body style="margin: 0; padding: 0">
回复 原文
执妄 2024-12-30 19:14:12

如果您所说的空白位于右侧，您可以将其添加到网络视图中。

mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

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

If the white space you're talking about is on the right side, you can add this to the webview.

mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

That should make the white space go away, provided it's on the right side where the scroll bar would be.

回复 原文
避讳 2024-12-30 19:14:12

默认情况下，HTML 网页的内边距和边距为 10 像素；你必须在你的 head 部分或 css 文件中进行设置：

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

这对我来说很有效。

By Defualt HTML web pages have a padding and margin of 10px; You have to set in your head section or or css file:

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

That did the trick for me.

回复 原文
那请放手 2024-12-30 19:14:12

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

user3241873 上面展示了如何调整 WebView 本身的填充，但我发现当 Eclipse 创建的默认 Android 应用程序生成布局文件（RelativeLayout“容器”而不是“LinearLayout”）时，它将这些属性添加到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 时，它删除了难看的空白:)

如果有人用 WebView 替换默认的（Hello World）TextView，则父relativeLayout的填充会像房子里令人讨厌的亲戚一样粘在一起。

I had irritating white space bordering the rendered HTML content in my WebView (no images in that content though). At first I thought it was related to CSS issues as mentioned above. But by using a style sheet to change the background for HTML, BODY, etc. it looked more and more like padding around the WebView.

user3241873 shows above how to adjust the padding on the WebView itself, but what I found was when the default Android application created by Eclipse generated the layout file (RelativeLayout "container" rather than "LinearLayout"), it added these attributes to the 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"

If you look up those padding values in res/values/dimens.xml, you'll see that they're set to 16dp. When I changed to 0dp, it removed the unsightly white space :)

If someone replaces the default (Hello World) TextView with a WebView, the padding for the parent RelativeLayout sticks around like an obnoxious relative in the house.

回复 原文
魔法少女 2024-12-30 19:14:12

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

不容错过的关键行是

使用它作为模板：(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();
       }

}

This is an example that you can test that uses a html template, then you can replace the "body" text with whatever you would like... in your case, the html for an image. You can use the css to style the html as needed. Hope this helps you understand more how to use local assets. Post a comment if you need more help.

One key line to not miss is <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,target-densityDpi=device-dpi" />

Use this as a template: (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>

Use css like this: (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;
}

Then in your WebView class: (your class that extends 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();
       }

}
回复 原文
Bonjour°[大白 2024-12-30 19:14:12

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

Use WebView's setScrollBarStyle method and provide parameter as View.SCROLLBARS_INSIDE_OVERLAY.

回复 原文
天生の放荡 2024-12-30 19:14:12

我有这个[这是我的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中的填充

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

我尝试了上面的所有解决方案，但它们对我来说效果不太好。
这个对我有用。

I had this [this is my 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">

I just deleted the padding in the relativeLayout

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

I tried all the solutions above but they didn't go very well for me.
this one worked for me.

回复 原文
与风相奔跑 2024-12-30 19:14:12

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

i don't really know which whitespace you are referring to ( maybe the image has padding or so), but usually if you have any layout issues in a WebView you would try to fix them by providing a proper (inline) css-stylesheet.

回复 原文
静谧幽蓝 2024-12-30 19:14:12

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

Set the padding in your webview.xml to 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" />

回复 原文
別甾虛僞 2024-12-30 19:14:12

我已经拿到了。

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

这里是我的代码

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

希望您能接受我的代码和我的答案:)适用于任何设备，甚至选项卡:)

I already got it .

here my logic code, When the application open the website you must get the size of your webview then set it on height

here my code

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

Hope you will take my code and my answer to :) works on any devices even tabs too :)

回复 原文
温馨耳语 2024-12-30 19:14:12

我的情况是，我的网络视图顶部有很大的填充。因此，设置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"
/>

My case, top of my webview has big padding. So, set scrollbarSize="0dp". In 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"
/>
回复 原文
噩梦成真你也成魔 2024-12-30 19:14:12

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

Kotlin Answer

For example, I removed space between iFrame and WebView in this way:

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")
回复 原文
~没有更多了~

关于作者

叹倦

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

十二

文章 0 评论 0

飞烟轻若梦

文章 0 评论 0

OPleyuhuo

文章 0 评论 0

wxb0109

文章 0 评论 0

旧城空念

文章 0 评论 0

-小熊_

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文