Restricciones y orden de los modificadores

En Compose, puedes encadenar varios modificadores para cambiar el aspecto de un elemento componible. Estas cadenas de modificadores pueden afectar las restricciones que se pasan a los elementos componibles, que definen los límites de ancho y altura.

En esta página, se describe cómo los modificadores encadenados afectan las restricciones y, a su vez, la medición y la ubicación de los elementos componibles.

Modificadores en el árbol de la IU

Para comprender cómo se influyen entre sí los modificadores, es útil visualizar cómo aparecen en el árbol de IU, que se genera durante la fase de composición. Para obtener más información, consulta la sección Composición.

En el árbol de la IU, puedes visualizar los modificadores como nodos de wrapper para los nodos de diseño:

Si agregas más de un modificador a una función de componibilidad, se crea una cadena de modificadores. Cuando encadenas varios modificadores, cada nodo modificador unifica el resto de la cadena y el nodo de diseño dentro de ella. Por ejemplo, cuando encadenas un modificador clip y un modificador size, el nodo modificador clip une el nodo modificador size, que, a su vez, une el nodo de diseño Image.

En la fase de diseño, el algoritmo que recorre el árbol sigue siendo el mismo, pero también se visita cada nodo modificador. De esta manera, un modificador puede cambiar los requisitos de tamaño y la posición del modificador o del nodo de diseño que une.

Como se muestra en la Figura 2, la implementación de los elementos componibles Image y Text consiste en una cadena de modificadores que une un solo nodo de diseño.

Las implementaciones de Row y Column son nodos de diseño que describen cómo disponer sus elementos secundarios.

En síntesis:

• Los modificadores unen un solo modificador o nodo de diseño.
• Los nodos de diseño pueden organizar varios nodos secundarios.

En las siguientes secciones, se describe cómo usar este modelo mental para razonar sobre el encadenamiento de modificadores y cómo influye en el tamaño de los elementos componibles.

Restricciones en la fase de diseño

La fase de diseño sigue un algoritmo de tres pasos para encontrar el ancho, la altura y las coordenadas x, y de cada nodo de diseño:

1. Medir elementos secundarios: Un nodo mide sus elementos secundarios, si los hay.
2. Decide su propio tamaño: En función de esas mediciones, un nodo decide su propio tamaño.
3. Coloca los elementos secundarios: Cada nodo secundario se coloca en relación con la posición de un nodo.

Constraints ayudan a encontrar los tamaños adecuados para los nodos durante los primeros dos pasos del algoritmo. Las restricciones definen los límites mínimos y máximos para el ancho y el alto de un nodo. Cuando el nodo decide su tamaño, el tamaño medido debe estar dentro de este rango de tamaño.

Tipos de restricciones

Una restricción puede ser una de las siguientes:

• Bounded: El nodo tiene un ancho y una altura máximos y mínimos.

• Sin límites: El nodo no está restringido a ningún tamaño. Los límites de ancho y altura máximos se establecen en infinito.

• Exact: Se le pide al nodo que siga un requisito de tamaño exacto. Los límites mínimo y máximo se establecen en el mismo valor.

• Combinación: El nodo sigue una combinación de los tipos de restricciones anteriores. Por ejemplo, una restricción podría limitar el ancho y, al mismo tiempo, permitir una altura máxima ilimitada, o bien establecer un ancho exacto, pero proporcionar una altura limitada.

En la siguiente sección, se describe cómo se pasan estas restricciones de un elemento superior a uno secundario.

Cómo se pasan las restricciones del elemento superior al secundario

Durante el primer paso del algoritmo que se describe en Restricciones en la fase de diseño, las restricciones se pasan del elemento superior al secundario en el árbol de la IU.

Cuando un nodo superior mide sus elementos secundarios, proporciona estas restricciones a cada uno de ellos para que sepan qué tan grandes o pequeños pueden ser. Luego, cuando decide su propio tamaño, también se adhiere a las restricciones que pasaron sus propios elementos superiores.

En términos generales, el algoritmo funciona de la siguiente manera:

1. Para decidir el tamaño que realmente quiere ocupar, el nodo raíz del árbol de la IU mide sus elementos secundarios y reenvía las mismas restricciones a su primer elemento secundario.
2. Si el elemento secundario es un modificador que no afecta la medición, reenvía las restricciones al siguiente modificador. Las restricciones se pasan por la cadena de modificadores tal como están, a menos que se alcance un modificador que afecte la medición. Luego, se cambia el tamaño de las restricciones según corresponda.
3. Una vez que se alcanza un nodo que no tiene elementos secundarios (lo que se conoce como "nodo hoja"), este decide su tamaño en función de las restricciones que se pasaron y devuelve este tamaño resuelto a su elemento superior.
4. El elemento superior adapta sus restricciones según las mediciones de este elemento secundario y llama a su siguiente elemento secundario con estas restricciones ajustadas.
5. Una vez que se miden todos los elementos secundarios de un elemento superior, el nodo superior decide su propio tamaño y se lo comunica a su propio elemento superior.
6. De esta manera, se recorre todo el árbol en profundidad. Con el tiempo, todos los nodos deciden sus tamaños y se completa el paso de medición.

Para ver un ejemplo detallado, consulta el video Restricciones y orden de los modificadores.

Modificadores que afectan las restricciones

En la sección anterior, aprendiste que algunos modificadores pueden afectar el tamaño de la restricción. En las siguientes secciones, se describen los modificadores específicos que afectan las restricciones.

El modificador size

El modificador size declara el tamaño preferido del contenido.

Por ejemplo, el siguiente árbol de IU se debe renderizar en un contenedor de 300dp por 200dp. Las restricciones están limitadas, lo que permite anchos entre 100dp y 300dp, y alturas entre 100dp y 200dp:

El modificador size adapta las restricciones entrantes para que coincidan con el valor que se le pasa. En este ejemplo, el valor es 150dp:

Si el ancho y la altura son menores que el límite de restricción más pequeño o mayores que el límite de restricción más grande, el modificador coincide con las restricciones pasadas lo más cerca posible, sin dejar de cumplir con las restricciones pasadas:

Ten en cuenta que encadenar varios modificadores size no funciona. El primer modificador size establece las restricciones mínima y máxima en un valor fijo. Incluso si el segundo modificador de tamaño solicita un tamaño más pequeño o más grande, debe cumplir con los límites exactos que se pasaron, por lo que no anulará esos valores:

El modificador requiredSize

Usa el modificador requiredSize en lugar de size si necesitas que tu nodo anule las restricciones entrantes. El modificador requiredSize reemplaza las restricciones entrantes y pasa el tamaño que especificas como límites exactos.

Cuando el tamaño se pasa de vuelta al árbol, el nodo secundario se centrará en el espacio disponible:

Los modificadores width y height

El modificador size adapta el ancho y la altura de las restricciones. Con el modificador width, puedes establecer un ancho fijo, pero dejar la altura sin decidir. Del mismo modo, con el modificador height, puedes establecer una altura fija, pero dejar el ancho sin decidir:

El modificador sizeIn

El modificador sizeIn te permite establecer restricciones exactas de mínimo y máximo para el ancho y la altura. Usa el modificador sizeIn si necesitas un control detallado de las restricciones.

Ejemplos

En esta sección, se muestra y explica el resultado de varios fragmentos de código con modificadores encadenados.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

Este fragmento produce el siguiente resultado:

• El modificador fillMaxSize cambia las restricciones para establecer el ancho y la altura mínimos en el valor máximo: 300dp de ancho y 200dp de altura.
• Aunque el modificador size quiera usar un tamaño de 50dp, debe cumplir con las restricciones mínimas entrantes. Por lo tanto, el modificador size también generará los límites de restricción exactos de 300 por 200, lo que ignorará de manera efectiva el valor proporcionado en el modificador size.
• El Image sigue estos límites y, luego, informa un tamaño de 300 por 200, que se pasa por todo el árbol.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .wrapContentSize()
        .size(50.dp)
)
ConstraintsModifiersSnippets.kt

Este fragmento produce el siguiente resultado:

• El modificador fillMaxSize adapta las restricciones para establecer el ancho y la altura mínimos en el valor máximo: 300dp de ancho y 200dp de altura.
• El modificador wrapContentSize restablece las restricciones mínimas. Por lo tanto, mientras que fillMaxSize generó restricciones fijas, wrapContentSize las restablece a restricciones limitadas. El siguiente nodo ahora puede volver a ocupar todo el espacio o ser más pequeño que todo el espacio.
• El modificador size establece las restricciones en los límites mínimo y máximo de 50.
• El Image se resuelve en un tamaño de 50 por 50, y el modificador size lo reenvía.
• El modificador wrapContentSize tiene una propiedad especial. Toma su elemento secundario y lo coloca en el centro de los límites mínimos disponibles que se le pasaron. Por lo tanto, el tamaño que comunica a sus elementos superiores es igual a los límites mínimos que se le pasaron.

Si combinas solo tres modificadores, puedes definir un tamaño para el elemento componible y centrarlo en su elemento superior.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .clip(CircleShape)
        .padding(10.dp)
        .size(100.dp)
)
ConstraintsModifiersSnippets.kt

Este fragmento produce el siguiente resultado:

• El modificador clip no cambia las restricciones.
• El modificador padding reduce las restricciones máximas.
• El modificador size establece todas las restricciones en 100dp.
• El Image se adhiere a esas restricciones y, luego, informa un tamaño de 100dp por 100dp.
• El modificador padding agrega 10dp en todos los lados al tamaño que informa Image, por lo que el diseño con padding informa un ancho y una altura de 120dp.
• Ahora, en la fase de dibujo, el modificador clip actúa en un lienzo de 120dp por 120dp. Se creará una máscara circular de ese tamaño.
• Luego, el modificador padding inserta su contenido en 10dp en todos los lados, lo que reduce el tamaño del lienzo para el Image a 100dp por 100dp.
• El Image se dibuja en ese lienzo más pequeño. La imagen se recorta según el círculo original de 120dp, por lo que el resultado no es redondo.