Únete a ⁠ #Android11: The Beta Launch Show el 3 de junio.

Cómo usar Android Studio con Jetpack Compose

Jetpack Compose es un kit de herramientas moderno para crear IU nativas de Android. Se basa en el modelo de programación declarativa, de modo que puedes describir cómo debería ser el aspecto de la IU, y Compose se ocupa del resto. Además, a medida que cambia el estado de la app, se actualiza automáticamente la IU. Dado que se compila a partir de Kotlin, es completamente interoperable con el lenguaje de programación Java y tiene acceso directo a todas las API de Android y Jetpack. Es compatible con el kit de herramientas de la IU existente, por lo que puedes mezclar y combinar vistas clásicas y nuevas, y está diseñado con material design y animaciones desde el principio.

Para disfrutar de la mejor experiencia de desarrollo con Jetpack Compose, tienes que descargar la versión Canary más reciente de Android Studio. Esto se debe a que, cuando utilizas Android Studio para desarrollar una app con Jetpack Compose, puedes beneficiarte de las funciones del editor inteligente, como las plantillas para proyectos nuevos y la capacidad de obtener de inmediato una versión de vista previa de la IU de Compose.

Obtener la versión Canary de Android Studio

Después de instalar Android Studio, sigue las instrucciones que se indican a continuación para probar una app de muestra de Jetpack Compose, crear un nuevo proyecto de app de Jetpack Compose o agregar compatibilidad con Jetpack Compose a un proyecto de app existente.

Cómo probar una app de muestra de Jetpack

Después de comenzar a ejecutar la versión más reciente de Android Studio, la manera más rápida de experimentar con las capacidades de Jetpack Compose es probar la app de muestra "Jetnews", que está alojada en GitHub. Para importar el proyecto de app de muestra de Android Studio, sigue estos pasos:

  1. Si te encuentras en la ventana Welcome to Android Studio, selecciona Import an Android code sample. Si ya tienes abierto un proyecto de Android Studio, selecciona File > New > Import Sample de la barra de menú.
  2. En la barra de búsqueda que se encuentra cerca de la parte superior del asistente Browse Samples, escribe "Jetnews".
  3. Selecciona la app de muestra Jetnews de los resultados de la búsqueda y haz clic en Next.
  4. Cambia los campos Application name y Project location, o bien mantén los valores predeterminados.
  5. Haz clic en Finish.

Android Studio descargará la app de muestra en la ruta especificada y abrirá el proyecto. Luego, puedes inspeccionar MainActivity.kt para ver ejemplos de animaciones de encadenado, de componentes personalizados, del uso de la tipografía y de cómo mostrar colores claros y oscuros en la versión de vista previa dentro del IDE.

Cómo crear una app nueva compatible con Jetpack Compose

Si quieres iniciar un proyecto nuevo que incluya compatibilidad con Jetpack Compose de manera predeterminada, Android Studio incluye plantillas para proyectos nuevos que te ayudarán a comenzar. Para crear un nuevo proyecto que incluya Jetpack Compose, sigue estos pasos:

  1. Si te encuentras en la ventana Welcome to Android Studio, haz clic en Start a new Android Studio project. Si ya tienes abierto un proyecto de Android Studio, selecciona File > New > New Project de la barra de menú.
  2. En la ventana Select a Project Template, elige Empty Compose Activity y haz clic en Next.
  3. En la ventana Configure your project, haz lo siguiente:
    1. Establece los campos Name, Package name y Save location como lo harías normalmente.
    2. Ten en cuenta que, en el menú desplegable Language, Kotlin es la única opción disponible porque Jetpack Compose funciona solo con clases escritas en Kotlin.
    3. En el menú desplegable Minimum API level, selecciona API nivel 21 o superior.
  4. Haz clic en Finish.
  5. Verifica que el archivo build.gradle del proyecto esté configurado correctamente, según se describe en Cómo configurar Gradle.

Ya está todo listo para que comiences a desarrollar una app con Jetpack Compose. Para ayudarte a comenzar y conocer lo que puedes hacer con el kit de herramientas, sigue el instructivo de Jetpack Compose.

Cómo agregar Jetpack Compose a un proyecto existente

Si quieres usar Jetpack Compose en un proyecto existente, tendrás que configurar el proyecto con las opciones de configuración y las dependencias requeridas.

Cómo configurar Gradle

Tienes que establecer el nivel mínimo de API de la app en 21 o más, y habilitar Jetpack Compose en el archivo build.gradle de la app, como se muestra a continuación: También debes configurar la versión para el complemento del compilador de Kotlin.

android {
        defaultConfig {
            ...
            minSdkVersion 21
        }

        buildFeatures {
            // Enables Jetpack Compose for this module
            compose true
        }
        ...

        // Set both the Java and Kotlin compilers to target Java 8.

        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_8
            targetCompatibility JavaVersion.VERSION_1_8
        }

        kotlinOptions {
            jvmTarget = "1.8"
        }

        composeOptions {
            kotlinCompilerExtensionVersion "0.1.0-dev08"
        }
    }
    

Cómo agregar dependencias del kit de herramientas de Jetpack Compose

Incluye las dependencias del kit de herramientas de Jetpack Compose en el archivo build.gradle de la app, como se muestra a continuación:

dependencies {
        // You also need to include the following Compose toolkit dependencies.
        implementation 'androidx.ui:ui-tooling:0.1.0-dev08'
        implementation 'androidx.ui:ui-layout:0.1.0-dev08'
        implementation 'androidx.ui:ui-material:0.1.0-dev08'
        ...
    }
    

Cómo usar las versiones de vista previa en vivo

Las versiones de vista previa en vivo de Android Studio te permiten probar y comparar las funciones que se pueden componer de la app en varias orientaciones, tamaños de fuente y temas, sin tener que implementar la aplicación.

Las versiones de vista previa en vivo, cada una con un ancho, un tema y una escala de fuente diferentes.

Figura 1: Uso se dimensiones, temas y escala de fuente diferentes para obtener una versión de vista previa de las funciones que se pueden componer

Como se muestra en la figura 1, puedes obtener varias versiones de vista previa de una determinada función que se puede componer, cada una con una restricción de ancho y altura, escala de fuente o tema diferentes. A medida que desarrolles la app y cambies los recursos o los colores, se actualizarán las versiones de vista previa para que puedas revisar los cambios. Además, puedes hacer clic en los elementos de la versión de vista previa para navegar rápidamente a la función que se puede componer para ese elemento en el editor de código.

Cómo crear una versión de vista previa básica en vivo

A continuación, se muestra un ejemplo de una función que se puede componer llamada TutorialPreviewTemplate().

@Composable
    fun TutorialPreviewTemplate(
        colors: MaterialColors = lightThemeColors,
        typography: MaterialTypography = themeTypography
    ) {
        val context = +ambient(ContextAmbient)
        val previewPosts = getPostsWithImagesLoaded(posts.subList(1, 2), context.resources)
        val post = previewPosts[0]
        MaterialTheme(colors = colors, typography = typography) {
            Surface {
                PostCardTop(post)
            }
        }
    }
    

Para crear una versión de vista previa en vivo, crea una nueva función que se pueda componer y que no tome parámetros e incluya una anotación @Preview antes de @Composable, como se muestra a continuación:

/// This is the original composable function.
    @Composable
    fun TutorialPreviewTemplate( ... ) { ... }

    // A new composable function that applies the @Preview annotation and does not
    // take any parameters.
    @Preview
    @Composable
    fun TutorialPreview() {
        // Call the composable function that you would like to
        // create a live preview for.
        TutorialPreviewTemplate()
    }
    

Cuando creas o modificas una versión de vista previa en vivo, tienes que volver a compilar tu proyecto para ver los cambios. Para volver a compilar tu proyecto, haz clic en la opción Build del banner que se encuentra en la parte superior del editor o selecciona Build > Make Project en la barra de menú.

Versión de vista previa en vivo básica de una función que se puede componer.

Figura 2: Versión de vista previa en vivo básica de una función que se puede componer en Android Studio

Puedes crear varias versiones de vista previa en vivo, que aparecen una junto a la otra en la ventana Preview del IDE, como se muestra a continuación. Esto resulta útil para comparar cómo se comportan tus funciones que se pueden componer cuando, por ejemplo, se les dan diferentes argumentos.

/// This is the original composable function.
    @Composable
    fun TutorialPreviewTemplate( ... ) { ... }

    @Preview
    @Composable
    fun TutorialPreview() { ... }

    // This live preview uses the app's dark theme.
    @Preview
    @Composable
    fun TutorialPreviewDark() {
        // Although you can't pass arguments to the live preview function itself,
        // you can pass arguments to the composable function that it calls.
        TutorialPreviewTemplate(colors = darkThemeColors)
    }

    

Versiones de vista previa en vivo que usan diferentes temas.

Figura 3: Dos versiones de vista previa en vivo de una función que se puede componer, cada una con diferentes temas

Cómo pasar argumentos a la anotación @Preview

La anotación @Preview proporciona ciertos parámetros que puedes usar para cambiar la forma en que el IDE procesa una función que se puede componer en la ventana Preview. Por ejemplo, como se muestra a continuación, puedes pasar una string a una versión de vista previa en vivo para que te ayude a identificarla mejor.

// Pass a name for the preview to easily identify it in the Preview window.
    @Preview("Default colors")
    @Composable
    fun TutorialPreview() {
        TutorialPreviewTemplate()
    }

    @Preview("Dark colors")
    @Composable
    fun TutorialPreviewDark() {
        TutorialPreviewTemplate(colors = darkThemeColors)
    }
    

Los parámetros de @Preview adicionales para los que puedes pasar argumentos son los siguientes:

  • widthDp: Es el ancho máximo, medido en píxeles independientes de la densidad (dp), que puede usar el IDE para procesar la versión de vista previa en vivo. Resulta útil cuando quieres obtener una versión de vista previa de la función que se puede componer en tamaños de pantalla limitados.
  • heightDp: Es la altura máxima, medida en dp, que puede usar el IDE para procesar la versión de vista previa en vivo. Resulta útil cuando quieres obtener una versión de vista previa de la función que se puede componer en tamaños de pantalla limitados.
  • fontScale: Es el factor de escala para las fuentes relativo a la escala de densidad base (1f). Resulta útil cuando quieres probar la función que se puede componer para varias preferencias de tamaño de fuente del usuario.

En el siguiente ejemplo, se cambia el factor de escala predeterminado y la altura máxima para una versión de vista previa en vivo.

@Preview("Font scaling 1.5, height 300", fontScale = 1.5f, heightDp = 300)
    @Composable
    fun TutorialPreviewFontscale() {
        TutorialPreviewTemplate()
    }
    

Una versión de vista previa en vivo que usa una escala de fuente modificada y altura máxima.

Figura 4: Versión de vista previa en vivo que usa una escala de fuente modificada y altura máxima