Efecto espejo con Jetpack Compose | de Pankaj Rai | junio 2022

¿Alguna vez has pensado en tener un efecto espejo para las imágenes en una lista o en general? Es simple y fácil con el poderoso kit de herramientas Jetpack Compose UI.Como puede ver, este efecto incluye las siguientes cosas1. Imagen inversa2. 50% de visibilidad de la imagen invertida3. Imagen invertida borrosa4. Mismos bordes que la imagen original. Ahora veamos cómo se hace cada uno de ellos con Jetpack ComposeEsta es la imagen compuesta original que contiene una imagen con una altura fija de 300 dp. Ahora veamos cómo podemos crear una imagen especular para esto.imagen inversaEl primer paso es rotar la imagen 180 grados, y la mejor parte es que está asistido directamente por el modificador.50% de visibilidad de la imagen invertidaAhora veamos cómo podemos recortar esta imagen rotada al 50% de la altura. Bueno, para esto también usaremos un modificador, pero como no hay un soporte directo disponible para recortar al 50% de la altura, crearemos un modificador de forma personalizado.HalfSizeShape se llama con el modificador Clip de la siguiente maneraImagen invertida borrosaAhora viene la parte difícil, se proyecta un desenfoque sobre una imagen invertida para que parezca un efecto de espejo, pero no solo se agrega un desenfoque, sino también un degradado para proporcionar una textura suave como la siguiente.Mismos bordes que la imagen originalPor lo tanto, como se vuelve a llamar al mismo componible para dibujar el efecto de espejo, la misma propiedad del modificador continuará junto a él, es decir, si la imagen original tiene una esquina redondeada, la imagen de espejo también tendrá la misma propiedad. Ahora, cada vez que necesite un efecto espejo para uno de los elementos componibles como una imagen aquí en este ejemplo, puede llamar al elemento espejo componible como esteConsigue un efecto espejo con tan solo unas pocas líneas gracias al potente kit de herramientas Jetpack Compose.

Deja una respuesta

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