Ejemplo práctico 1: Centrar un Text usando Modifier.layout

Objetivo

Aprende a crear un layout personalizado que centre un composable hijo (en este caso, un Text) manualmente, sin usar Box o Arrangement.Center.

Estructura del Modifier.layout

 1Modifier.layout { measurable, constraints ->
 2    // Se mide el hijo con las restricciones.
 3    val placeable = measurable.measure(constraints)
 4
 5    // Se calcula el tamaño total del padre.
 6    val width = constraints.maxWidth
 7    val height = constraints.maxHeight
 8
 9    // se calcula la posición centrada.
10    val x = (width - placeable.width) / 2
11    val y = (height - placeable.height) / 2
12
13    // Se devuelve el layout y se coloca el hijo.
14    layout(width, height) {
15        placeable.place(x, y)
16    }
17}

Ejemplo completo

Se crea el método composable:

 1@Composable
 2fun LayoutPersonalizadoDemo() {
 3    Box(
 4        modifier = Modifier
 5            .wrapContentHeight() // Se ajusta al contenido
 6            .background(Color(0xFFEFEFEF)) // Fondo gris claro
 7            .centroManual() // Modificador personalizado
 8    ) {
 9        Text(
10            text = "Texto centrado con layout personalizado",
11            fontSize = 18.sp,
12            color = Color.Black
13        )
14    }
15}

A continuación, se crea el modificador personalizado centroManual():

 1fun Modifier.centroManual(): Modifier = this.then(
 2    Modifier.layout { measurable, constraints ->
 3        val placeable = measurable.measure(constraints)
 4
 5        val width = constraints.maxWidth
 6        val height = constraints.maxHeight
 7
 8        val x = (width - placeable.width) / 2
 9        val y = (height - placeable.height) / 2
10
11        layout(width, height) {
12            placeable.place(x, y)
13        }
14    }
15)

Para visualizar el ejemplo en la vista previa de Android Studio añade el siguiente método:

1@Preview(showBackground = true)
2@Composable
3fun VistaPreviaLayoutPersonalizado() {
4    LayoutPersonalizadoDemo()
5}