web-dev-qa-db-fra.com

Supprimez les espaces blancs indésirables dans WebView Android

J'ai commencé à développer une application à l'aide de WebView. En fait, je charge une image avec Webview (j'aime utiliser les commandes de zoom intégrées de la classe). Je peux charger l'image avec succès mais je peux voir des espaces blancs irritants. Je ne trouve pas le moyen de le supprimer. Mes images mesurent 750 * 1000. J'ai joint mon code ci-dessous.

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

Par défaut webview a une marge/un remplissage dans le corps. Si vous souhaitez supprimer ce remplissage/marge, remplacez le corps tag et ajoutez une marge comme:

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

Si l'espace blanc dont vous parlez se trouve sur le côté droit, vous pouvez l'ajouter à la vue Web.

mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

Cela devrait faire disparaître l'espace blanc, à condition qu'il soit sur le côté droit où la barre de défilement serait.

21
Ben

Par défaut, les pages Web HTML ont un remplissage et une marge de 10 pixels; Vous devez définir dans votre section head ou ou fichier css:

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

Cela a fait l'affaire pour moi.

18
Blake Loizides

J'avais un espace blanc irritant bordant le contenu HTML rendu dans ma WebView (cependant aucune image dans ce contenu). Au début, je pensais que c'était lié aux problèmes CSS comme mentionné ci-dessus. Mais en utilisant une feuille de style pour changer l'arrière-plan de HTML, BODY, etc., cela ressemblait de plus en plus à un remplissage autour de WebView.

user3241873 montre ci-dessus comment ajuster le rembourrage sur la WebView elle-même, mais ce que j'ai trouvé était lorsque l'application par défaut Android créée par Eclipse a généré le fichier de mise en page (RelativeLayout "conteneur" plutôt que "LinearLayout")) , il a ajouté ces attributs à 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"

Si vous recherchez ces valeurs de remplissage dans res/values ​​/ dimens.xml, vous verrez qu'elles sont définies sur 16dp. Lorsque je suis passé à 0dp, cela a supprimé l'espace blanc disgracieux :)

Si quelqu'un remplace le TextView par défaut (Hello World) par un WebView, le remplissage du RelativeLayout parent reste comme un parent désagréable dans la maison.

8
gcbound

Utilisez la méthode setScrollBarStyle de WebView et fournissez le paramètre comme View.SCROLLBARS_INSIDE_OVERLAY.

3
Aniruddh Ambarkar

Ceci est un exemple que vous pouvez tester en utilisant un modèle html, puis vous pouvez remplacer le texte "body" par ce que vous voulez ... dans votre cas, le html pour une image. Vous pouvez utiliser le CSS pour coiffer le HTML selon vos besoins. J'espère que cela vous aidera à mieux comprendre comment utiliser les actifs locaux. Postez un commentaire si vous avez besoin de plus d'aide.

Une ligne clé à ne pas manquer est <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,target-densityDpi=device-dpi" />

Utilisez-le comme modèle: (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>

Utilisez css comme ceci: (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;
}

Puis dans votre classe WebView: (votre classe qui étend 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

J'ai eu ceci [c'est mon 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">

Je viens de supprimer le rembourrage dans la mise en page relative

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

J'ai essayé toutes les solutions ci-dessus mais elles ne se sont pas très bien passées pour moi. celui-ci a fonctionné pour moi.

1
Su4p

je ne sais pas vraiment à quel espace vous faites référence (peut-être que l'image a un rembourrage), mais généralement si vous avez des problèmes de mise en page dans une WebView, vous devriez essayer de les résoudre en fournissant une feuille de style CSS (en ligne) appropriée.

0
P.Melch

Définissez le remplissage dans votre 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