Ejemplo práctico 2: Limitar al 50% del espacio disponible usando Modifier.layout

Objetivo

Se creará un modificador personalizado llamado limitarAnchoAl50Porciento() que limite el ancho del hijo al 50% del ancho máximo disponible. Además, colocará el hijo centrado horizontalmente dentro del espacio total y mantendrá la altura original del hijo.

Modificador personalizado

 1fun Modifier.limitarAnchoAl50Porciento(): Modifier = this.then(
 2    Modifier.layout { measurable, constraints ->
 3        // Se calcula el 50% del ancho disponible.
 4        val anchoDisponible = constraints.maxWidth
 5        val anchoLimitado = anchoDisponible / 2
 6
 7        // Se crean nuevas restricciones con ancho máximo reducido.
 8        val newConstraints = constraints.copy(maxWidth = anchoLimitado)
 9
10        // Se mide el hijo con esas restricciones.
11        val placeable = measurable.measure(newConstraints)
12
13        // La altura del padre será la del hijo, ancho será el original.
14        layout(anchoDisponible, placeable.height) {
15            // Se centra horizontalmente
16            val x = (anchoDisponible - placeable.width) / 2
17            placeable.place(x, 0)
18        }
19    }
20)

A continuación, se creará el método composable:

 1@Composable
 2fun LayoutAnchoLimitadoDemo() {
 3    Box(
 4        modifier = Modifier
 5            .fillMaxHeight()
 6            .background(Color(0xFFEFEFEF))
 7            .limitarAnchoAl50Porciento()
 8    ) {
 9        Text(
10            text = "Ancho limitado al 50%",
11            fontSize = 16.sp,
12            color = Color.Black,
13            modifier = Modifier
14                .background(Color.Yellow)
15                .padding(8.dp)
16        )
17    }
18}

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

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