web-dev-qa-db-ja.com

WebViewの不要な空白を削除Android

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

}
androidimageandroid-webviewpaddingspace
38
Manimaran

デフォルトでは、webviewには本文にマージン/パディングがあります。そのパディング/マージンを削除する場合は、body tagをオーバーライドし、次のようなマージンを追加します。

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

話している空白が右側にある場合は、これをWebビューに追加できます。

mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

スクロールバーがある右側にある場合、空白は消えます。

21
Ben

デフォルトでは、HTML Webページのパディングとマージンは10pxです。ヘッドセクションまたはcssファイルで設定する必要があります。

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

それは私のためにトリックをしました。

18
Blake Loizides

WebViewでレンダリングされたHTMLコンテンツの境界にある刺激的な空白がありました（ただし、そのコンテンツには画像がありません）。最初は、前述のようにCSSの問題に関連していると思いました。しかし、スタイルシートを使用してHTML、BODYなどの背景を変更することにより、WebViewの周囲のパディングのようになりました。

user3241873は上記でWebView自体のパディングを調整する方法を示していますが、デフォルトのAndroidアプリケーションがレイアウトファイル（「LinearLayout」ではなく「RelativeLayout」 、これらの属性を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のパディングは、家の中の不快な親類のように動き回ります。

8
gcbound

WebViewのsetScrollBarStyleメソッドを使用し、パラメーターをView.SCROLLBARS_INSIDE_OVERLAY。

3
Aniruddh Ambarkar

これは、htmlテンプレートを使用してテストできる例です。次に、「body」テキストを好きなものに置き換えることができます。この場合、画像の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();
       }

}
2
Codeversed

私はこれを持っていました[これは私の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">

上記のすべてのソリューションを試してみましたが、うまくいきませんでした。これは私のために働いた。

1
Su4p

どの空白を参照しているのか実際にはわかりません（おそらく画像にパディングがあるなど）が、通常、WebViewでレイアウトの問題がある場合は、適切な（インライン）CSSスタイルシートを提供して修正しようとします。

0
P.Melch

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