9. El entorno de diseño de interfaces¶
Instalación¶
Los pasos están en el apartado 4. Dos detalles importantes: elige la instalación Standard y no instales aparte ni el JDK (Android Studio trae uno embebido) ni Jetpack Compose (el asistente de proyectos lo añade solo).
Partes del entorno¶
| Elemento | Para qué sirve |
|---|---|
| Toolbar | Acciones generales: sincronizar Gradle, gestor de SDK, emulador, botón Run ▶ y selector de dispositivo |
| Vistas Code / Split / Design | Code: solo código. Design: solo previsualización. Split: las dos a la vez, y lo que escribes se redibuja en vivo |
Autocompletado (Ctrl+Espacio) |
En Compose hace de «paleta de componentes»: escribes But, aceptas Button y se inserta con sus parámetros |
| Component Tree | Árbol con la jerarquía de la interfaz; al hacer clic salta a su línea de código |
| Alt+Enter | Arregla errores: añade import que faltan, sugiere cambios |
En Compose el código manda
A diferencia de los editores visuales de otras épocas, la vista Design no genera código que no puedas tocar: el código es la fuente de la verdad y la previsualización solo lo refleja. Todo se puede editar a mano.
Actividad frente a función composable¶
Actividad (ComponentActivity) |
Función @Composable |
|
|---|---|---|
| Qué es | Una clase que representa la pantalla del sistema | Una función que describe un trozo de interfaz |
| Quién la gestiona | Android, con su ciclo de vida (onCreate…) |
Compose, que la vuelve a ejecutar si cambia el estado |
| ¿Dibuja? | No: solo aloja la interfaz | Sí: describe lo que se ve |
Las conecta setContent { }:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MiApp()
}
}
}
Una analogía: la actividad es el edificio, los composables son la decoración de una habitación y setContent es la puerta que los une.
Importar librerías¶
Para usar un componente de Material 3 hay que importarlo. Puedes importar uno o todos:
import androidx.compose.material3.Button // solo Button
import androidx.compose.material3.* // todo Material 3
Lo habitual es dejar que Android Studio los añada con Alt+Enter.