Relación de aspecto con referencia en Jetpack Compose | de Jonathan Mercandalli | marzo 2023

Componer Jetpack – Relación de aspecto

Relación de aspecto con referencia basada en la dimensión principal: ancho, alto, mínimo, máximo Sobrecargue el modificador de relación de aspecto.

Desbloquear imagen de Komárov Egor 🇺🇦Si es un desarrollador de Android, escritorio, web o iOS que trabaja con Jetpack Compose para el diseño de UI, es importante saber cómo cambiar el tamaño de sus vistas para admitir ventanas de forma libre o cualquier factor de forma. En este artículo, examinaremos cómo lograr los efectos visuales deseados utilizando la sobrecarga de relación de aspecto de Jetpack Compose Modifier. El objetivo es usar las dimensiones de los padres como referencia para cambiar el tamaño de la función componible. La solución está en GitHub y JitPack. Para obtener una vista cuadrada con un tamaño dinámico basado en el tamaño principal, ingrese una relación de aspecto con un valor de 1f. Si desea mostrar una miniatura de un video de YouTube, ingrese ratio = 16f / 9f y deje que matchHeightConstraintsFirst seleccione. Por defecto es falso. Si lo establece en verdadero, la altura del niño será la misma que la del padre, y el ancho del niño se ajustará de acuerdo con la relación de aspecto.

  • ¿Qué sucede si desea tener min (anchura de los padres, altura de los padres) como referencia para que al niño le guste el centro de ImageView dentro del padre?
  • ¿Qué sucede si desea tener max (anchura de los padres, altura de los padres) como referencia para que el elemento secundario esté centrado y recortado dentro del elemento principal, como CenterCrop de ImageView?

El objetivo será poder escribir: con la siguiente AspectRatioReference: con esta API, todos los escenarios son posibles en el lado del cliente. Todavía se puede usar la alineación del padre y podemos seleccionar la referencia. Tenga en cuenta que ya no hay 1 proporción en flotante, sino 2 flotantes para mostrar la proporción fácilmente. En lugar de ‘aspectRatio = 16f / 9f’, ‘aspectRatioWidth = 16f’, ‘aspectRatioHeight = 9f’ para separar el numerador del denominador. Aquí es donde comienza la diversión. 0, escribiremos nuestra propia función de extensión para sobrecargar los modificadores. La principal diferencia radica en la función Constraints.findSize(). Aquí es donde se realiza la lógica de «redimensionamiento». Aquí está el método que queremos: Y aquí está la implementación completa de la solución: Para asegurarse de que el código funcione, la vista previa de Android Studio es excelente. Aquí, el código debería tener la siguiente vista previa.Jetpack Compose vista previa de la solución de jonathanJetpack Compose es una gran herramienta porque podemos agregar fácilmente nuevos comportamientos. Ver cómo funciona detrás de escena es una excelente manera de tener claro «cómo» podemos «hacerlo mejor» o al menos «hacer algo que satisfaga nuestras necesidades». No dude en comentar sobre el proyecto Github o problemas abiertos. Para contactarme, visita mercandalli.com.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.