Java/Android: ¿Cómo mostrar serie de imágenesVers sin cortar las vistas de borde?

Estoy tratando de mostrar una serie de 4 avatares en un diseño reutilizable. Mi diseño test_layout.xml Parece que esto:

xml version="1.0" encoding="utf-8"?

Voy a reutilizar este diseño en varios lugares (a veces varias veces en la misma pantalla) por lo que necesita ser su propio diseño incorporado a través de include etiqueta (o tal vez merge).

Cuando el marco es demasiado ancho / corto, este diseño se ve muy bien y exactamente como pretendía, con los avatares en la formación 'envasado': Four avatars side by side in 'packed' formation with no extra whitespace between, just extra whitespace on the side

Sin embargo, cuando el marco es demasiado estrecho/tall, el diseño comienza a cortar las imágenes en el exterior: Four avatars side by side, but the frame is not wide enough to accommodate all of them at full height so instead it cuts off parts of the images on the side

¿Cómo obtengo esto para que en lugar de cortar los lados de las imágenes, las redimensione para que todos se ajusten horizontalmente y añada espacio blanco a la parte superior e inferior? Estoy abierto a cualquier tipo de diseño, no sólo constraintlayout. ¡Gracias!

Pregunta hecha hace 3 años, 4 meses, 28 días - Por nasean

6 Respuestas:

  • Lo que haría es probablemente configurar los Params de diseño para esos cuatro ImageView programáticamente:

    int totalWidth = yourConstraintLayout.getWidth();
yourImageView1.setLayoutParams(new  ConstraintLayout.LayoutParams(totalWidth / 4, totalWidth / 4));

// And the same thing for the rest of your imageViews, or just use a for loop

    Esto siempre establecería el ancho de las imágenes para ser una cuarta parte de sus padres (el ConstraintLayout.) Creo que esto es lo que estás pidiendo? ¡Avísame si funciona para ti!

    Respondida el Dec 18, 2020 a las 02:21 - por logicluminary3c42

    Votos positivos: 0 | Votos negativos: 0

  • Establezca todos los anchos para combinar la restricción y todas las alturas para envolver contenido

    Respondida el Dec 18, 2020 a las 02:26 - por binarybard

    Votos positivos: 0 | Votos negativos: 0

  • Creo que hacerlo programáticamente como dice @Zuo Wang, su mejor opción. Pero si no quieres hacerlo de esa manera y sigue haciéndolo por XML. Aquí tienes tal vez un enfoque. Configuración de un maxAltura, y sin embargo eso no encajaría en todas las pantallas del dispositivo.

    Aquí usted hace una vista previa por Altura de 250dp

    enter image description here

    Y aquí lo tienes por la altura de 50dp

    enter image description here

    Respondida el Dec 18, 2020 a las 02:35 - por scriptsorcererf493

    Votos positivos: 0 | Votos negativos: 0

  • establecer su altura test_layout.xml wrap_content ancho match_constraints

    y luego si usas incluye añadir a otro diseño que necesitas establecer la altura wrap_content para mantener el tamaño orginal

    xml version="1.0" encoding="utf-8"?

    Respondida el Dec 18, 2020 a las 02:40 - por logiclinguist

    Votos positivos: 0 | Votos negativos: 0

  • Una forma de lograr que las imágenes se redimensionen y se ajusten horizontalmente en lugar de cortar los lados, es utilizando un LinearLayout con android:layout_weight para distribuir el espacio disponible de manera proporcional entre las imágenes. También puedes utilizar la propiedad android:scaleType con el valor fitXY en las ImageView para que las imágenes se ajusten al tamaño del contenedor.

    Aquí te muestro un ejemplo de cómo podrías modificar tu diseño test_layout.xml utilizando un LinearLayout:

    ```xml 

    <ImageView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:src="@drawable/avatar1"
    android:scaleType="fitXY"
    android:layout_weight="1"/>

<ImageView
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:src="@drawable/avatar2"
    android:scaleType="fitXY"
    android:layout_weight="1"/>

<ImageView

    Respondida el Dec 19, 2020 a las 02:22 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución:

    Para evitar que las imágenes se recorten en el diseño, puedes utilizar el atributo android:layout_aspectRatio para establecer la relación de aspecto deseada para las imágenes. Esto garantiza que las imágenes se escalen proporcionalmente, manteniendo su relación de aspecto original.

    Código actualizado:

    xml

    Explicación:

    El atributo android:layout_aspectRatio establece la relación de aspecto de las vistas de imagen en 1, lo que significa que serán cuadradas. El atributo android:scaletype se establece en fitCenter para escalar las imágenes al centro de la vista, manteniendo su relación de aspecto.

    Resultado:

    Ahora, cuando el diseño sea demasiado estrecho/alto, las imágenes se redimensionarán para ajustarse horizontalmente y se agregará espacio blanco en la parte superior e inferior para mantener su relación de aspecto.

    Respondida el Dec 19, 2020 a las 02:30 - por Gemini

    Votos positivos: 0 | Votos negativos: 0