Nota de actualización: Joey deVilla actualizó este tutorial para Android Studio Giraffe, Kotlin 1.9 y Android 14. Alex Sullivan escribió el original. Estamos en un punto emocionante en el desarrollo de Android. Según una encuesta del ecosistema de desarrollo móvil realizada a finales de 2022 por Mobile Native Foundation, la mitad de los desarrolladores de Android están creando aplicaciones con Jetpack Compose. La otra mitad los está construyendo “a la antigua usanza”. Los sistemas operativos evolucionan y Android, el sistema operativo más popular del mundo, no es una excepción. Cuando una plataforma del tamaño de Android realiza un cambio tan grande, los primeros desarrolladores que adoptan el cambio obtienen una ventaja significativa. Con la mitad de los desarrolladores de Android todavía esperando dar el salto, ahora es el momento de aprender Jetpack Compose. ¿Qué es Jetpack Compose? Lanzado en julio de 2021, Jetpack Compose es un conjunto de herramientas de interfaz de usuario que actualiza el proceso de creación de aplicaciones de Android. En lugar de XML, se utiliza código Kotlin para especificar de forma declarativa cómo debe verse y comportarse la interfaz de usuario en varios estados. No tienes que preocuparte por cómo se mueve la interfaz de usuario entre esos estados: Jetpack Compose se encarga de eso. Le resultará familiar si está familiarizado con marcos web declarativos como React, Angular o Vue. El enfoque Jetpack Compose es una desviación significativa del kit de herramientas XML UI original de Android, ahora llamado Vistas. Views se modeló a partir de antiguos marcos de interfaz de usuario de escritorio y se remonta a los inicios de Android. En Vistas, se utiliza un mecanismo como findViewById() o enlace de vista para conectar elementos de la interfaz de usuario al código. Este enfoque imperativo es simple pero requiere definir cómo se mueve el programa entre estados y cómo debe verse y comportarse la interfaz de usuario en esos estados. Jetpack Compose está construido con Kotlin y aprovecha las características y la filosofía de diseño del lenguaje Kotlin. Está diseñado para usarse en aplicaciones escritas en Kotlin. Con Jetpack Compose, ya no tendrás que cambiar de contexto a XML al diseñar la interfaz de usuario de tu aplicación; haces todo en Kotlin. En este tutorial, creará dos aplicaciones Jetpack Compose: Una aplicación de ejecución de prueba simple, que creará desde cero, comenzando con Archivo → Nuevo. Una aplicación de libro de cocina más compleja que mostrará una lista de tarjetas de recetas que contienen imágenes y texto. Construirás esto usando un proyecto inicial. Su primera aplicación Jetpack Compose Asegúrese de estar ejecutando la última versión estable de Android Studio. Ambas aplicaciones de este tutorial (la aplicación sencilla que estás a punto de crear y la aplicación de libro de cocina que crearás después) se crearon utilizando la versión Flamingo de Android Studio. Últimamente, Google ha estado actualizando Android Studio a un ritmo vertiginoso y es posible que el siguiente código no funcione en versiones anteriores. Nota: ¡”Buscar actualizaciones” es tu amigo! En la versión macOS de Android Studio, lo encontrará en el menú de Android Studio. Si es usuario de Android Studio basado en Windows o Linux, lo encontrará en el menú Ayuda. Una vez que hayas confirmado que tu Android Studio está actualizado, ejecútalo y selecciona Archivo → Nuevo → Nuevo proyecto…. Dependiendo de cómo cambiaste el tamaño de la ventana Nuevo proyecto por última vez, verás algo como esto: o esto: De cualquier manera, verás que la primera plantilla en la lista es para un proyecto de actividad vacía con el ícono Jetpack Compose: En el En el mundo de la programación, donde hay que indicar las cosas explícitamente para que un compilador pueda entenderlas, esto se considera una pista sutil. Debe inferir que se espera que Jetpack Compose sea la forma preferida para crear interfaces de usuario de Android en el futuro, y cuanto antes lo aprenda, mejor. Seleccione la plantilla Actividad vacía Jetpack Compose y haga clic en Siguiente. En la siguiente ventana Nuevo proyecto, asigne al proyecto el nombre Mi primera aplicación de composición y haga clic en el botón Finalizar. ¡Hola Androide! Una vez que Android Studio haya terminado de crear el proyecto, ejecute la aplicación. Deberías ver algo como esto: Para ver qué hay detrás de esta pantalla particularmente aburrida, abre MainActivity.kt. Todavía contiene una clase MainActivity y un método onCreate(), y onCreate() todavía llama a su contraparte en la superclase de MainActivity, ComponentActivity. Lo que es diferente es el resto del código en onCreate(). Al crear interfaces de usuario de Android a la antigua usanza, que se llama Vistas, onCreate() llama al método setContentView() y le pasa el ID del archivo XML de la vista, que Android usa para representar los elementos en pantalla. En Jetpack Compose, onCreate() llama a un método llamado setContent(), y en el proyecto predeterminado, se ve así: setContent { MyFirstComposeAppTheme { // Un contenedor de superficie que usa el color de ‘fondo’ del tema Surface( modificador = Modifier. fillMaxSize(), color = MaterialTheme.colorScheme.background ) { Greeting(«Android») } } } setContent() toma una lambda como parámetro, y cerca del final de esa lambda hay una llamada a un método llamado Greeting(). Encontrarás su definición inmediatamente después de la clase MainActivity: @Composable fun Greeting(nombre: String, modificador: Modifier = Modifier) ​​{ Text( text = «¡Hola $nombre!», modificador = modificador ) } Como ves, Greeting( ) es el método que determina lo que aparece en pantalla cuando ejecutas la aplicación. También deberías notar los siguientes elementos de este método: Está anotado con @Composable. Esto informa al compilador que Greeting() es una función componible (o componible para abreviar), lo que significa que recibe datos y genera un elemento de interfaz de usuario en respuesta. Una razón para dejar claro que una función es componible es que las funciones componibles solo pueden ser llamadas por otras funciones componibles. setContent() que llama a Greeting() es un elemento componible. Tiene parámetros. Como función, tiene parámetros (o, si lo prefieres, toma argumentos). Eso hace que los elementos componibles sean flexibles, permitiéndole pasarles el estado. Si está familiarizado con la programación en React, los parámetros componibles son la versión de accesorios de Jetpack Compose. Es una función de unidad. No tiene valor de retorno. En cambio, hace que se dibuje en pantalla un elemento de la interfaz de usuario. Los puristas del lenguaje de programación funcional llamarían a esto un efecto secundario; Nosotros, los Jetpack Composers, preferimos decir que los elementos componibles emiten elementos de interfaz de usuario. Su nombre es un sustantivo en mayúscula. La convención es que los nombres de funciones componibles son sustantivos en mayúscula en PascalCase. Ayuda a distinguir los elementos componibles de las funciones y métodos ordinarios, donde la convención es convertir sus nombres en verbos que usan mayúsculas camelCase. Contiene una llamada a un método llamado Texto(). Text() es uno de los elementos componibles integrados de Jetpack Compose y, dada una cadena, emite una vista de texto que contiene esa cadena.

Source link