Jetpack Compose Academy · Lección

Distribución y alineación

Coloque y espacie los elementos secundarios con precisión.

Distribución y alineación es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 4 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 Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Two Words, Two Jobs

Layout control comes down to arrangement and alignment. They sound similar but they do different jobs. Let's untangle them. 🧭

Arrangement: Along the Main Axis

Arrangement controls spacing along the layout's main axis: vertical for a Column, horizontal for a Row.

Alignment: Across the Cross Axis

Alignment controls position on the other axis: horizontal in a Column, vertical in a Row. It lines children up sideways.

Grouping at One End

Arrangement.Top, Center, and Bottom pack children together at one end of a Column, leaving the rest as empty space.

Column(verticalArrangement = Arrangement.Center) {
    Text("A")
    Text("B")
}

Spreading Children Out

Use SpaceBetween, SpaceAround, or SpaceEvenly to distribute extra space among children instead of bunching them up.

Row(horizontalArrangement = Arrangement.SpaceEvenly) {
    Text("A")
    Text("B")
    Text("C")
}

SpaceBetween vs SpaceEvenly

SpaceBetween hugs the edges with no outer gaps, while SpaceEvenly adds equal gaps everywhere, including before the first and after the last child.

Fixed Gaps with spacedBy

For a consistent gap, use Arrangement.spacedBy. It inserts the exact distance you give between every adjacent child.

Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
    Text("A")
    Text("B")
}

Column's Cross-Axis Alignment

In a Column the cross axis is horizontal, so horizontalAlignment chooses Start, CenterHorizontally, or End for the children.

Column(horizontalAlignment = Alignment.End) {
    Text("Right side")
}

Row's Cross-Axis Alignment

In a Row the cross axis is vertical, so verticalAlignment picks Top, CenterVertically, or Bottom for the children.

Row(verticalAlignment = Alignment.Bottom) {
    Text("Aligned bottom")
}

Combine Both for Layout

You usually set both at once: arrangement spaces children along the main axis while alignment positions them on the cross axis.

Column(
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) { Text("Dead center") }

Effect Needs Extra Space

Arrangement only shows when the container is bigger than its children. A wrap-content Column has no spare room to redistribute.

Quick Check

Let's confirm which axis each setting controls.

Recap: Arrangement & Alignment

You learned the split: arrangement spaces children along the main axis, alignment positions them on the cross axis. Combine both for precise layouts.

Preguntas frecuentes

¿La lección «Distribución y alineación» es gratis?

Sí — el texto completo de «Distribución y alineación» 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 Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Distribución y alineación»?

Coloque y espacie los elementos secundarios con precisión. Practicas Jetpack Compose 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 Jetpack Compose Academy?

No se requiere experiencia previa. Jetpack Compose 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 4 de 4.

¿Cuánto tiempo toma la lección «Distribución y alineación»?

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 Jetpack Compose Academy?

Sí. Cada lección de Jetpack Compose 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 Jetpack Compose Academy