Pantalla de ajuste de imagen en WebView

En mi aplicación, visualizo imágenes gracias a un webView. Entonces, para cada imagen, creo un código HTML pequeño que cargo con webView. Entonces mi código html consiste básicamente en una etiqueta img (con la ruta a mi imagen).Pantalla de ajuste de imagen en WebView

Mis imágenes tienen diferentes tamaños, es por eso que me gustaría configurar mi zoom webView para que se ajuste al ancho de las imágenes para el ancho de la vista web. Por lo tanto, el usuario no tiene que acercarse o alejarse para poder ver la imagen completa.

¿Hay alguna manera de lograrlo?

Gracias.

Fuente

2010-07-23 Trox

Estoy enfrentando el mismo problema. ¿Ya lo resolvió? – JochenJung

Lo siento pero aún no lo he resuelto. Pensé que Tendría la solución aquí: http://developer.android.com/guide/webapps/targeting.html. Como dicen, agregué la etiqueta "width = device-width" en mi código HTML pero no funciona: (. Todavía estoy buscando una solución. – Trox

Excause me. ¿Has resuelto esto hasta ahora? – Yeung

¿Hay alguna razón por la que esté usando una WebView para lograr esto? Con ImageView puede configurar scaleType para que se ajuste a la imagen con el tamaño de ImageView.

Fuente

2010-07-23 21:52:55

Bueno, sé causa del zoom incorporado y desplazamiento horizontal/vertical. – Trox

o un cuadro de diálogo CON una vista de imagen? Es una locura, ¿verdad? Quién hace eso – JoxTraex

Que hizo el truco para mí:

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

Fuente

2011-01-15 15:25:48 JochenJung

Gracias por su respuesta. Si uso esto, ahora mi gran imagen (alrededor de 1000px * 2000px) está bien centrada, pero mis pequeñas imágenes (con un ancho de 320 px) se vuelven realmente pequeñas y tengo que acercarme para verlas. – Trox

Puede utilizar un poco de jQuery en la página Web para lograrlo también.

Algo así como:

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

Fuente

2011-02-18 21:16:16 user401183

Si está creaing el código HTML (que se dice que son), que puede engañar:

En el código html:

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

Fuente

2011-11-19 21:18:17

¡Qué hermoso y funcional truco ;-) –

Encontré una soulution.

utilice este cálculo.

dispositivo-width * (152/densidad)

recuperar dispositivo de anchura y utilizando displayMetrics.widthPixels densidad y displayMetrics.densityDpi

conjunto calculado como anchura en la etiqueta img

el valor 152 es originalmente era 160 pero cuando se usó 160, parece que la imagen es más grande que la pantalla.

el resultado es que la imagen se ajusta inicialmente a la pantalla y el zoom funciona bien.

Fuente

2012-01-21 13:33:15 lulumeya

¿Hay alguna razón por la que no solo utilice algunos javascript para pasar las imágenes a la aplicación de Android y aparezca un cuadro de diálogo personalizado con las imágenes en ese cuadro de diálogo para que se escale de acuerdo con el contenido.

Personalmente, creo que esta solución es más elegante para su enfoque.

Fuente

2012-01-21 13:36:26 JoxTraex

lo que funcionó para mí fue la siguiente: He leído que con el fin de ajustarse al ancho de la pantalla se debe añadir esto a su HTML o XML dentro del campo:

width="100%"

Así que lo que hice fue, en vez de escalar y hacer zoom en las imágenes, obtuve el xml, lo puse en un StringBuilder, encontré el src = "https://blablabla.com/image.png" que está dentro del campo y justo antes del '' subcadena insertar el 'src width =' 100% '', entonces y configurar mi web View con el StringBuilder, código de mi es la siguiente:

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

Esperanza esta ayuda, me tomó algunas horas encontrar la manera de resolver esto.

Fuente

2015-02-19 17:28:34

Pantalla de ajuste de imagen en WebView

Respuesta

Cuestiones relacionadas