Cambiar el tamaño de la imagen a todo el ancho y la altura fija con Picasso

Tengo un LinearLayout vertical donde uno de los elementos es un ImageView cargado usando Picasso. Necesito elevar el ancho de la imagen al ancho total del dispositivo y mostrar la parte central de la imagen recortada a una altura fija (150dp). Actualmente tengo el siguiente código:

 Picasso.with(getActivity()) .load(imageUrl) .placeholder(R.drawable.placeholder) .error(R.drawable.error) .resize(screenWidth, imageHeight) .centerInside() .into(imageView); 

¿Qué valores debo poner en screenWidth y imageHeight (= 150dp)?

Estás buscando:

 .fit().centerCrop() 

Lo que estos significan:

  • fit : espere hasta que se haya medido ImageView y cambie el tamaño de la imagen para que coincida exactamente con su tamaño.
  • centerCrop : escala la imagen centerCrop la relación de aspecto hasta llenar el tamaño. Recorte la parte superior e inferior o izquierda y derecha para que coincida exactamente con el tamaño.

Este blog explica las funciones de ajuste y ajuste de tamaño de Picasso en detalle: https://futurestud.io/tutorials/picasso-image-resizing-scaling-and-fit .

Redimensionamiento de la imagen con cambio de tamaño (x, y)

En general, es óptimo si su servidor o API entregan la imagen en las dimensiones exactas que necesita, que son una solución perfecta entre el ancho de banda, el consumo de memoria y la calidad de imagen.

Desafortunadamente, no siempre está bajo su control solicitar imágenes en las dimensiones perfectas. Si las imágenes tienen un tamaño extraño, puede usar la llamada de cambio de tamaño (horizontalSize, verticalSize) para cambiar las dimensiones de su imagen a un tamaño más adecuado. Esto redimensionará la imagen antes de mostrarla en ImageView.

 Picasso .with(context) .load(UsageExampleListViewAdapter.eatFoodyImages[0]) .resize(600, 200) // resizes the image to these dimensions (in pixel). does not respect aspect ratio .into(imageViewResize); 

Uso de scaleDown ()

Al usar la opción resize (), Picasso también mejorará su imagen. Dado que hacer una imagen pequeña más grande sin mejorar la calidad de la imagen puede ser un tiempo de cálculo desperdiciado, llame a scaleDown (verdadero) para aplicar solo el tamaño () cuando la imagen original tenga dimensiones mayores que el tamaño objective.

 Picasso .with(context) .load(UsageExampleListViewAdapter.eatFoodyImages[0]) .resize(6000, 2000) .onlyScaleDown() // the image will only be resized if it's bigger than 6000x2000 pixels. .into(imageViewResizeScaleDown); 

Evitar imágenes estiradas con escala

Ahora, como con cualquier manipulación de imagen, cambiar el tamaño de las imágenes realmente puede distorsionar la relación de aspecto y uglify la visualización de la imagen. En la mayoría de sus casos de uso, desea evitar que esto suceda. Picasso le da dos opciones de mitigación aquí, ya sea call centerCrop () o centerInside ().

CenterCrop

CenterCrop () es una técnica de recorte que escala la imagen para que llene los límites solicitados de ImageView y luego recorta el extra. ImageView se completará por completo, pero es posible que no se muestre toda la imagen.

 Picasso .with(context) .load(UsageExampleListViewAdapter.eatFoodyImages[0]) .resize(600, 200) // resizes the image to these dimensions (in pixel) .centerCrop() .into(imageViewResizeCenterCrop); 

CenterInside

CenterInside () es una técnica de recorte que escala la imagen para que ambas dimensiones sean iguales o menores que los límites solicitados de ImageView. La imagen se mostrará por completo, pero es posible que no complete todo el ImageView.

 Picasso .with(context) .load(UsageExampleListViewAdapter.eatFoodyImages[0]) .resize(600, 200) .centerInside() .into(imageViewResizeCenterInside); 

Por último, pero no menos importante: el ajuste de Picasso () Las opciones discutidas deben cubrir sus necesidades de funcionalidad con respecto al cambio de tamaño y escalado de la imagen. Hay una última funcionalidad auxiliar de Picasso, que puede ser muy útil: fit ().

 Picasso .with(context) .load(UsageExampleListViewAdapter.eatFoodyImages[0]) .fit() // call .centerInside() or .centerCrop() to avoid a stretched image .into(imageViewFit); 

fit () mide las dimensiones del objective ImageView e internamente usa resize () para reducir el tamaño de la imagen a las dimensiones de ImageView. Hay dos cosas que debe saber sobre fit (). En primer lugar, llamar a fit () puede retrasar la solicitud de imágenes, ya que Picasso deberá esperar hasta que se pueda medir el tamaño de ImageView. En segundo lugar, solo puedes usar fit () con un ImageView como objective (veremos otros objectives más adelante).

La ventaja es que la imagen está en la resolución más baja posible, sin afectar su calidad. Una resolución más baja significa menos datos para retener en el caché. Esto puede reducir significativamente el impacto de las imágenes en la huella de memoria de su aplicación. En resumen, si prefieres un menor impacto de memoria en tiempos de carga un poco más rápidos, fit () es una gran herramienta.