Cómo comenzar a usar Jetpack Compose

Jetpack Compose es el kit de herramientas moderno para compilar IU de Android, lo que simplifica el desarrollo de apps que se adaptan a cualquier tamaño de pantalla.

• Descripción general: Consulta los recursos disponibles para los desarrolladores de Compose.
• Instructivo: Comienza a usar Compose compilando una IU básica.
• Guías rápidas: Prueba nuestras guías rápidas y enfocadas, diseñadas para ayudarte a alcanzar tu objetivo lo más rápido posible.

Base

• Acerca de Compose: Cómo el enfoque declarativo de Compose difiere del enfoque basado en vistas que quizás hayas usado antes. Crea un modelo mental para trabajar con Compose.
• Administración del estado: Cómo configurar y usar el estado en tu app de Compose
• Ciclo de vida de los elementos componibles: Ciclo de vida de un elemento componible y cómo Compose determina si debe volver a dibujarse.
• Modificadores: Usa modificadores para aumentar o decorar tus elementos componibles.
• Efectos secundarios en Compose: Formas de administrar los efectos secundarios
• Fases de Jetpack Compose: Los pasos que sigue Compose para renderizar la IU de tu app y cómo usar esa información para escribir código eficiente
• Capas de arquitectura: Las capas de arquitectura que componen Jetpack Compose y los principios básicos que conforman el diseño de Compose
• Rendimiento: Evita los problemas comunes de programación que pueden degradar el rendimiento de la app.
• Semántica en Compose: El árbol de semántica, que organiza tu IU de una manera que pueden usar los servicios de accesibilidad y los frameworks de prueba.
• Datos de alcance local con CompositionLocal: Usa CompositionLocal para pasar datos a través de la composición.

IU adaptativa

• Compila apps adaptables: Aprende los principios básicos para crear diseños optimizados para cualquier tamaño de pantalla, incluidos teléfonos, tablets, dispositivos plegables y mucho más.
• Aplica diseños comprobados: Usa diseños canónicos, como el de lista-detalles y el de panel complementario, para optimizar las apps en pantallas grandes.
• Navegación adaptable: Implementa patrones de navegación que se ajusten automáticamente al espacio de pantalla disponible.

Entorno de desarrollo

• Android Studio con Compose: Cómo configurar tu entorno de desarrollo para usar Compose
• Herramientas para Compose: Nuevas funciones de Android Studio para admitir Compose.
• Kotlin para Compose: Los modismos específicos de Kotlin funcionan con Compose.
• Compara Compose y consulta las métricas: Descubre cómo la migración a Compose puede afectar el tamaño del APK de tu app y el rendimiento del tiempo de ejecución.
• Lista de materiales: Administra todas tus dependencias de Compose especificando solo la versión de la BoM.

Diseño

• Diseños: Componentes de diseño de Compose y cómo diseñar uno propio
  • Conceptos básicos sobre el diseño: Los componentes fundamentales para una IU de app sencilla.
  • Componentes y diseños de Material: Componentes y diseños de Material en Compose
  • Diseños personalizados: Toma el control del diseño de tu app y crea uno personalizado por tu propia cuenta.
  • Líneas de alineación: Crea guías de alineación personalizadas para alinear y posicionar con precisión los elementos de la IU.
  • Mediciones intrínsecas: Cómo consultar información sobre elementos secundarios antes de medirlos, ya que Compose mide los elementos de la IU solo una vez por pase.
  • ConstraintLayout: Usa ConstraintLayout en tu IU de Compose.
• Sistemas de diseño: Implementa un sistema de diseño y dale a tu app un aspecto coherente.
  • Material Design 3: Implementa Material You con la implementación de Material Design 3 de Compose.
  • Cómo migrar de Material 2 a Material 3: Migra tu app de Material Design 2 a Material Design 3 en Compose.
  • Material Design 2: Personaliza la implementación de Material Design 2 de Compose para que se adapte a la marca de tu producto.
  • Sistemas de diseño personalizado: Implementa un sistema de diseño personalizado en Compose y adapta los elementos componibles existentes de Material Design para el nuevo sistema de diseño.
  • Anatomía de un tema: Construcciones de nivel inferior y APIs que usan MaterialTheme y los sistemas de diseño personalizado.
• Listas y cuadrículas: Opciones de Compose para administrar y mostrar listas y cuadrículas de datos.
• Texto: Opciones principales en Compose para mostrar y editar texto.
• Gráficos: Funciones de Compose para compilar y trabajar con gráficos personalizados.
• Animación: Opciones de Compose para animar los elementos de tu IU.
• Gestos: Compila una IU de Compose que detecte gestos del usuario e interactúe con ellos.
• Controla las interacciones del usuario: Descubre cómo Compose abstrae las entradas de nivel bajo en interacciones de nivel alto para que puedas personalizar la manera en que tus componentes responden a las acciones del usuario.

Cómo adoptar Compose

• Migra apps basadas en View: Migra tu app basada en View a Compose.
  • Estrategia de migración: Cómo incorporar Compose de forma segura y progresiva a tu base de código
  • APIs de interoperabilidad: APIs de Compose para ayudarte a combinar Compose con una IU basada en vistas.
  • Otras consideraciones: Temas, arquitectura, pruebas y otras consideraciones al migrar tu app basada en vistas a Compose.
• Compose y otras bibliotecas: Cómo usar bibliotecas basadas en vistas en tu contenido de Compose
• Arquitectura de Compose: Implementa el patrón de flujo unidireccional en Compose, implementa eventos y contenedores de estados, y trabaja con ViewModel en Compose.
• Navigation: Usa NavController para integrar el componente de Navigation con tu IU de Compose.
• Recursos: Trabaja con los recursos de tu app en tu código de Compose.
• Accesibilidad: Atiende a los usuarios con requisitos de accesibilidad.
• Pruebas: Prueba tu código de Compose.
  • Hoja de referencia para pruebas: Una referencia rápida de las APIs de prueba de Compose útiles.

Recursos adicionales

• Iniciar configuración
• Programa de aprendizaje seleccionado
• Lineamientos de la API de Compose
• Referencia de la API
• Codelabs
• Apps de ejemplo
• Videos

Recomendaciones para ti

• Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
• Datos de alcance local con CompositionLocal
• Otras consideraciones
• Anatomía de un tema en Compose