Introducción a Jetpack Compose

Jetpack Compose es un conjunto de herramientas de interfaz de usuario moderno lanzado recientemente por Google que se utiliza para crear una interfaz de usuario de Android nativa. Simplifica y acelera el desarrollo de la interfaz de usuario con menos código, API de Kotlin y herramientas potentes.

Jetpack compose nos brinda la oportunidad de crear una interfaz de usuario diferente que se llama Declarative Framework y hacer que esta transacción sea nativa.

Podrías haber visto que los códigos que se escribieron con Flutter y React Native crearon una interfaz de usuario, y ahora puedes hacer todo esto con Jetpack Compose.

Nota : Jetpack Compose se lanzó en marzo de 2021. Necesitas Android Studio Artic Fox para usar Compose que funciona como mínimo sdk 21 .

¿Por qué deberíamos usar Jetpack Compose?

• Declarativo: es totalmente declarativo para que pueda describir los componentes de la interfaz de usuario llamando a algunas funciones predefinidas.
• Compatible: Es fácilmente compatible con las vistas existentes presentes en Android.
• Aumentar la velocidad de desarrollo: anteriormente, los desarrolladores tenían que trabajar en el archivo XML y el archivo Kotlin. Pero con la ayuda de jetpack compose, esto se vuelve fácil y los desarrolladores solo tienen que trabajar en los archivos de Kotlin, por eso ayudará a los desarrolladores a aumentar la velocidad de desarrollo.
• Kotlin conciso e idiomático: Jetpack Compose creó la interfaz de usuario con el beneficio que brinda Kotlin.
• Fácil de mantener: ya que el código base de cualquier aplicación está presente en un solo archivo. Se vuelve fácil de administrar y manejar el código base de la aplicación.
• Escrito en Kotlin: La aplicación escrita con jetpack compose utiliza el 100 % del lenguaje de programación Kotlin.

Con la nueva función que viene con Compose, puede ver la salida sin emulador.

Cree un proyecto eligiendo una nueva actividad de composición vacía y examine la estructura principal de Jetpack Compose.

Cuando elegimos Actividad de redacción vacía, la clase MainActivity aparecerá como se muestra a continuación.

Lo primero que nota es que Main Activity se heredó de ComponentActivity , no de AppCompatActivity.

Revise para gradle, con Jetpack Compose verá que el campo se ha agregado justo como se muestra a continuación.

Si abre el proyecto como EmptyActivity, debe agregar dependencias como se muestra a continuación.

Dijimos que puede ver el diseño sin construir en tiempo de ejecución.

Cuando elegimos la vista dividida , podemos ver una vista previa de los códigos Kotlin que escribimos.

@Anotación de vista previa: puede agregar parámetros manualmente en su código para personalizar la forma en que Android Studio muestra la anotación de vista previa.

Al mismo tiempo que queremos ver toda la pantalla o elemento, podemos agregar elementos debajo de la anotación.

Las funciones componibles son los bloques de construcción fundamentales de una aplicación creada con Compose.
Componible se puede aplicar a una función o lambda para indicar que la función/lambda se puede usar como parte de una composición para describir una transformación de los datos de la aplicación en un árbol o jerarquía.

El siguiente código crea un objeto TextView que está en xml, como Composable.

La clase de texto es una clase componible que recibe demasiados parámetros.

Si comenzamos una actividad normal, le damos un diseño al interior de setContentView pero ahora para componer usamos setContent .

En la clase setContent, puede ver que quiere parámetros componibles de nosotros escritos como se muestra a continuación.

El saludo es una composición. Podemos darle esa composición al interior de setContent cuando se abre la aplicación.

¿Qué funciones simples hemos aprendido en este artículo por ahora?

• Función componible: la función componible se representa en el código mediante el uso de la anotación @Composable en el nombre de la función. Esta función le permitirá definir la interfaz de usuario de su aplicación mediante programación describiendo su forma y dependencias de datos en lugar de centrarse en el proceso de construcción de la interfaz de usuario.
• Función de vista previa: el nombre de la función en sí nos dice que la función se usa para generar la vista previa de la función componible. Se utiliza para mostrar una vista previa de nuestras funciones componibles dentro de nuestro IDE en lugar de instalar nuestro APK en un emulador o dispositivo virtual.

Si está interesado en SwitfUI en iOS, le recomiendo que consulte el artículo de Pınar Koçak .

Recursos