Ecran d'ajustement d'image dans un WebView

Question

Dans mon application, j'affiche des images grâce à un WebView. Donc, pour chaque image, je crée un petit code HTML que je charge avec le webView. Donc mon code html consiste essentiellement en une balise img (avec le chemin vers ma photo).

Mes images ont des tailles différentes, c'est pourquoi je souhaite configurer mon zoom Web pour ajuster la largeur des images à la largeur de la page Web. L'utilisateur n'a donc pas besoin de faire un zoom avant ou arrière pour pouvoir voir l'image entière.

Existe-t-il un moyen de l'atteindre?

Merci.

Answer 1

Y a-t-il une raison pour laquelle vous utilisez un WebView pour ce faire? Avec un ImageView, vous pouvez définir le scaleType pour adapter l'image à la taille de l'ImageView.

Answer 2

qui a fait l'affaire pour moi:

webView.setInitialScale(30); 
WebSettings webSettings = webView.getSettings(); 
webSettings.setUseWideViewPort(true); 

Answer 3

Vous pouvez utiliser un peu jQuery dans la page Web pour l'accomplir aussi bien.

Quelque chose comme:

$(document).ready(function(){ 
    var windowWidth = $(window).width()+"px"; 
    $("#imagID").width(windowWidth); 
}); 

Answer 4

Si vous creaing le code HTML (que vous dites que vous êtes), vous pouvez tricher:

Dans le code html:

img src="xxx" width="100% > 

Answer 5

J'ai trouvé une soulution.

utiliser ce calcul.

* (152/densité) Dispositif de largeur

récupérer appareil de largeur et de densité en utilisant displayMetrics.widthPixels et displayMetrics.densityDpi

ensemble calculé en largeur dans img tag

la valeur 152 est à l'origine était de 160 mais quand 160 utilisé, il semble que l'image est plus grande que l'écran.

le résultat est, l'image initialement apte à l'écran et, zoom avant fonctionne correctement.

Answer 6

Y a-t-il une raison pour laquelle vous n'utilisez pas simplement du javascript pour transmettre les images dans l'application android et afficher une boîte de dialogue personnalisée avec les images dans cette boîte de dialogue pour qu'elle évolue en fonction du contenu.

Personnellement, je pense que cette solution est plus élégante à votre approche.

Answer 7

Ce qui a fonctionné pour moi était le suivant: je lis que pour la largeur de l'écran, vous devez ajouter à votre HTML ou XML dans le champ: au lieu

width="100%" 

Alors ce que je faisais était, de mise à l'échelle et de zoom sur les images, j'ai obtenu le xml, le mettre dans un StringBuilder, a trouvé le src = "https://blablabla.com/image..png » qui est à l'intérieur du terrain et juste avant le "" sous-chaîne I inséré le "src width =" 100% "", puis y tournai ma webView avec le StringBuilder, le code mi est la suivante:

public void setWebViewWithImageFit(String content){ 

     // content is the content of the HTML or XML. 
     String stringToAdd = "width=\"100%\" "; 

     // Create a StringBuilder to insert string in the middle of content. 
     StringBuilder sb = new StringBuilder(content); 

     int i = 0; 
     int cont = 0; 

     // Check for the "src" substring, if it exists, take the index where 
     // it appears and insert the stringToAdd there, then increment a counter 
     // because the string gets altered and you should sum the length of the inserted substring 
     while(i != -1){ 
      i = content.indexOf("src", i + 1); 
      if(i != -1) sb.insert(i + (cont * stringToAdd.length()), stringToAdd); 
      ++cont; 
     } 

     // Set the webView with the StringBuilder: sb.toString() 
     WebView detailWebView = (WebView) findViewById(R.id.web_view); 
     detailWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null); 
} 

Hope this aide, il m'a fallu quelques heures pour trouver comment résoudre ce problème