Android Academy · Lección

Su primer composable

Cree y previsualice una función composable

Su primer composable es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.

Su primera función componible

Una función componible es simplemente una función de Kotlin marcada con @Composable. Escribamos una que salude a un usuario por su nombre.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

La anotación @Composable

La anotación @Composable indica al compilador que esta función puede emitir la interfaz y llamar a otras funciones componibles. Sin ella, no puede llamar a Text, Button ni a otras funciones de interfaz.

Convención de nombres

Las funciones componibles que emiten la interfaz se nombran con sustantivos en PascalCase, como Greeting o ProfileCard, de forma similar a una clase. Esto indica que «dibuja algo» en lugar de «devuelve un valor».

Los parámetros controlan la interfaz

Una función componible recibe parámetros, igual que cualquier función. Esos parámetros son sus entradas. Distintos argumentos producen interfaces diferentes.

@Composable
fun Greeting(name: String) {
    Text(text = "Welcome, $name")
}
// Greeting("Sam") and Greeting("Mia") render different text

Llamar a funciones componibles

Las funciones componibles solo se pueden llamar desde otras funciones componibles. Una pantalla se compone anidando llamadas.

@Composable
fun WelcomeScreen() {
    Greeting(name = "Ada")
    Greeting(name = "Grace")
}

Alojamiento con setContent

Para mostrar realmente las funciones componibles, una Activity llama a setContent { } en onCreate. La lambda es la raíz de su interfaz de Compose.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WelcomeScreen()
        }
    }
}

Las funciones componibles devuelven Unit

Observe que las funciones componibles no devuelven un objeto de interfaz. Su tipo de retorno es Unit y emiten la interfaz como efecto secundario de su llamada. La interfaz se crea llamando a funciones, no devolviendo valores.

Parámetros predeterminados

Los argumentos predeterminados de Kotlin funcionan muy bien en este caso. Asigne un valor predeterminado a un parámetro para que quien llame a la función pueda omitirlo.

@Composable
fun Greeting(name: String = "Guest") {
    Text(text = "Hello, $name!")
}
// Greeting() shows "Hello, Guest!"

Reutilizar funciones componibles

Como son funciones, las funciones componibles son reutilizables. Defina Greeting una vez y llámela desde cualquier lugar con distintos nombres. Así evita duplicar código de interfaz.

Manténgalas pequeñas

Las buenas funciones componibles son pequeñas y centradas. Una función componible debe describir un bloque lógico de la interfaz. Cree pantallas más grandes combinando funciones componibles pequeñas.

Unir todas las piezas

A continuación tiene una primera función componible completa conectada a una activity. Al ejecutarla en un dispositivo se muestra «Hello, Compose!».

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "Compose")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Comprobación rápida

¿Qué permite hacer a una función la anotación @Composable?

Repaso

Ha escrito su primera función componible. Recuerde:

Marque las funciones de interfaz con @Composable.
Use nombres en PascalCase.
Los parámetros son las entradas que dan forma a la interfaz.
setContent { } aloja las funciones componibles en una activity.

Preguntas frecuentes

¿La lección «Su primer composable» es gratis?

Sí — el texto completo de «Su primer composable» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Su primer composable»?

Cree y previsualice una función composable Practicas Android Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Android Academy?

No se requiere experiencia previa. Android Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Su primer composable»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Android Academy?

Sí. Cada lección de Android Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Android Academy