Android Academy · Lección

Alineación y distribución

Coloque los elementos hijos con precisión

Alineación y distribución es una lección gratuita de Android Academy en CoddyKit. Esta es la lección 3 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.

Colocar elementos secundarios

Dentro de un Column o un Row, dos ajustes controlan dónde se sitúan los elementos secundarios: la alineación (a través del diseño) y la distribución (a lo largo del diseño).

Alineación de Column

En un Column, los elementos secundarios se apilan verticalmente. horizontalAlignment controla su posición horizontal: izquierda, centro o derecha.

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Text("Centered")
    Text("Also centered")
}

Distribución de Column

verticalArrangement controla cómo se distribuyen los elementos secundarios verticalmente: arriba, en el centro, abajo o con un espaciado uniforme.

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

Alineación de Row

En un Row, los ejes se invierten. verticalAlignment controla la posición vertical de los elementos secundarios y horizontalArrangement los distribuye horizontalmente.

Row(verticalAlignment = Alignment.CenterVertically) {
    Text("Left")
    Text("Right")
}

Recordar la pareja

Consejo: la alineación corresponde al eje secundario y la distribución al eje principal. En un Column, el eje principal es vertical, por lo que se utilizan verticalArrangement y horizontalAlignment.

Opciones de distribución

Valores habituales de Arrangement:

Top / Bottom / Center
SpaceBetween — espacios entre los elementos.
SpaceAround / SpaceEvenly

SpaceBetween

SpaceBetween coloca el primer y el último elemento secundario en los extremos y distribuye uniformemente los demás. Es perfecto para una barra superior con un título a la izquierda y un icono a la derecha.

Row(horizontalArrangement = Arrangement.SpaceBetween) {
    Text("Title")
    Text("Action")
}

Arrangement.spacedBy

Arrangement.spacedBy(8.dp) añade un espacio fijo entre cada elemento secundario: es la forma más sencilla de espaciar uniformemente los elementos de una lista.

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    Text("One")
    Text("Two")
    Text("Three")
}

Combinar spacedBy con Alignment

Puede combinar la distribución y la alineación para controlar completamente el diseño.

Column(
    verticalArrangement = Arrangement.spacedBy(12.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Title")
    Button(onClick = {}) { Text("Go") }
}

Alineación de Box

Para Box, utilice contentAlignment para colocar los elementos secundarios o Modifier.align() en elementos secundarios individuales para colocarlos de forma independiente.

Box(modifier = Modifier.fillMaxSize()) {
    Text(
        text = "Bottom",
        modifier = Modifier.align(Alignment.BottomCenter)
    )
}

Cómo unirlo todo

Una fila de encabezado junto con una lista distribuida uniformemente.

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    Row(horizontalArrangement = Arrangement.SpaceBetween) {
        Text("Inbox")
        Text("Edit")
    }
    Text("Message 1")
    Text("Message 2")
}

Comprobación rápida

En un Column, ¿qué parámetro controla la posición horizontal de los elementos secundarios?

Resumen

Posicionamiento:

Alineación = eje secundario; distribución = eje principal.
Column: horizontalAlignment + verticalArrangement.
Row: verticalAlignment + horizontalArrangement.
Arrangement.spacedBy() añade espacios uniformes.

Preguntas frecuentes

¿La lección «Alineación y distribución» es gratis?

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

¿Qué aprenderé en «Alineación y distribución»?

Coloque los elementos hijos con precisión 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 3 de 4.

¿Cuánto tiempo toma la lección «Alineación y distribució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 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