JOLANDA VERHOEF: Los modificadores
en Compose se pueden encadenar, y el orden en que lo
hacemos es importante. Pero, ¿cómo es exactamente lo que importa? En este episodio,
iremos más allá de su intuición y aprenderemos a razonar
sobre el encadenamiento de modificadores y cómo influye en el
tamaño de nuestros elementos componibles. [REPRODUCCIÓN DE MÚSICA] En el episodio anterior,
analizamos las tres fases de la transformación de datos en IU: composición,
diseño y dibujo. También aprendimos cómo los modificadores
pueden afectar diferentes fases. Utilizamos los modificadores de tamaño, relleno
y recorte para cambiar el tamaño, el espaciado
y la forma de un componible. En este episodio, me gustaría
acercarme un poco más a la
fase de diseño, porque cuando comenzamos a encadenar más modificadores
que influyen en las medidas de un nodo de diseño , y específicamente
cuando comenzamos a combinarlos, puede ser difícil
entender cuál es el los resultados serán realmente.
Echemos un vistazo
a algunos casos de uso. Digamos que dibujamos una imagen
y aplicamos esta cadena de modificadores. ¿ Cómo se verá la imagen
? ¿ Ocupará toda la pantalla,
como la opción A en la parte superior, o se limitará
a 50.dp, como la opción B? Ahora, digamos que agregamos un
modificador, wrapContentSize, en el medio. ¿ Cuál sería el
impacto de eso? ¿ O qué pasaría si usáramos esta
cadena de modificadores para la imagen, recortando la imagen,
agregando algo de relleno y luego configurando su tamaño? ¿ Resultaría esto en una bonita
imagen redonda, como la opción A? ¿ O la imagen estaría recortada
por los lados, como la opción B? Si aún no conoces las respuestas
a estas preguntas, no te preocupes.
En aproximadamente 10 minutos,
estará listo para responder estas y otras preguntas de diseño que
la gente pueda hacerle. ¿ Como dices? Aprendiendo acerca de las restricciones. Recuerde que en
el último episodio, discutimos la
fase de diseño y cómo sigue un
algoritmo de tres pasos para encontrar el
ancho, la altura y las coordenadas x-y de cada nodo de diseño. Las restricciones ayudan a encontrar los
tamaños correctos para nuestros nodos durante los dos primeros
pasos de este algoritmo. Las restricciones son
límites mínimos y máximos para el ancho y la altura de un nodo. Cuando el nodo
decide su tamaño, su tamaño medido debe estar
dentro de este rango de tamaño dado. Las restricciones se transmiten de
padres a hijos en el árbol de la interfaz de usuario durante la fase de diseño.
Cuando un nodo padre
mide a sus hijos, proporciona estas
restricciones a cada hijo para hacerles saber qué tan grandes o
pequeños pueden ser. Las restricciones se pueden delimitar,
indicando un ancho y una altura mínimos y máximos. En este caso, el
nodo de diseño debe elegir un ancho
entre 100 y 300 dp y una altura
entre 100 y 200. Las restricciones también pueden ser
ilimitadas, en cuyo caso, el nodo no está
restringido a ningún tamaño. Los límites máximos de ancho
y alto se establecen en infinito. O las restricciones pueden ser
exactas, pidiéndole a un nodo que siga un
requisito de tamaño exacto. Los límites mínimo y máximo
se establecen en el mismo valor, en este caso, 300 por 200 dp. Por supuesto, las combinaciones
de estos también son válidas, por ejemplo, delimitar
el ancho y permitir una altura máxima ilimitada,
o establecer un ancho exacto pero proporcionando una altura limitada. Como dije, las restricciones se
transmiten del nodo padre al hijo en el árbol de la interfaz de usuario
cuando el padre va a medir a su hijo. Cuando un nodo ha
decidido su propio tamaño, comunica ese
tamaño al árbol.
Veamos cómo
funciona esto para nuestro árbol de interfaz de usuario. Digamos que estamos representando esta
fila dentro de un contenedor de 300 por 200 dp. Las restricciones
pasadas a nuestro nodo de fila están limitadas y
dicen que puede tomar cualquier ancho entre 0 y 300 y
cualquier altura entre 0 y 200. Para decidir el tamaño que
realmente quiere ocupar, la fila medirá a
sus hijos. Reenvía las mismas
restricciones a su primer hijo. El modificador de recorte
no afecta la medición, por lo que simplemente envía
las restricciones al siguiente modificador. El modificador de tamaño se utiliza
para especificar un tamaño exacto.
Cambia las restricciones para que
sean límites exactos, en este caso, límites de 40 por 40 dp. Como el nodo de imagen
no tiene hijos, decidirá su propio tamaño
en función de las restricciones que se le pasaron. Escuchará las
restricciones modificadas e informará un
tamaño de 40 por 40 dp. El modificador de tamaño no
cambia ese tamaño medido, y tampoco lo hace
el modificador de clip. Ahora, la fila quiere colocar a
sus hijos uno al lado del otro, por lo que debe adaptarse
a las restricciones para asegurarse de que su
segundo hijo no se salga de los límites. Resta 40 dp de la
restricción de ancho máximo. El modificador de relleno ahora
quiere agregar 10 dp de espacio al comienzo de su elemento secundario,
por lo que reduce la restricción de ancho máximo en
otros 10 dp a 250. Para decidir su tamaño, la columna
debe medir sus elementos secundarios.
Primero reenvía las
restricciones a su primer hijo. Este modificador de relleno
agregará relleno vertical, por lo que disminuye la
altura máxima en 5 dp a 195. El texto decide su propio tamaño
e informa un tamaño de 140 por 15. El modificador de relleno
aumenta ese tamaño, ya que el relleno debe
incorporarse en el elemento de texto Informa un tamaño de 140 por 20. Ahora, recuerde que la
columna originalmente tenía límites máximos de 250 por 200. Debido a que una columna coloca a sus
elementos secundarios uno debajo del otro, la restricción de altura máxima que
se pasa al segundo elemento secundario se reduce en la
altura del primero. child, en este caso, 20 dp,
por lo que se convierte en 180. El segundo texto informa
un tamaño de 100 por 15 dp, por lo que ahora la columna sabe lo
suficiente para decidir su tamaño. Selecciona el
ancho máximo de sus hijos y la suma de sus alturas,
e informa un tamaño de 140 por 35. El relleno de inicio de la columna
agrega otros 10 dp al
ancho informado, y ahora la fila puede decidir qué tan grande
quiere ser .
Toma la suma de los
anchos de sus hijos y el máximo
de sus alturas. Esto se resuelve en un
tamaño total de 190 por 40. A estas alturas, debería tener
una buena comprensión de cómo las restricciones afectan
el tamaño de los componibles y cómo los modificadores afectan
esas restricciones. Echemos un vistazo más de cerca
a algunos modificadores y cómo adaptan las restricciones. Podemos comenzar con un
modificador de tamaño simple que adapta las restricciones a
valores mínimos y máximos fijos. En este caso, las
restricciones que entran son bastante flexibles, lo que permite
anchos entre 0 y 300 y alturas entre 0 y 200.
El modificador de tamaño
cambia esas restricciones a un ancho fijo y una altura de 40
antes de reenviarlas a su hijo. Pero, ¿qué pasa si el
tamaño que pasa cae fuera de las restricciones
que se pasaron? Entonces, por ejemplo, digamos que
pasamos un modificador de tamaño de 400 dp. En ese caso, el
modificador de tamaño intentará igualar las
restricciones pasadas lo más cerca posible. Todavía escuchará
las restricciones pasadas y no las anulará. En este caso,
aunque el modificador especifique un tamaño de 400 por 400,
las restricciones exactas resultantes serán de 300 por 200. Lo mismo sucede cuando
el tamaño solicitado es menor que los límites mínimos. Las restricciones se adaptarán
a los valores más bajos posibles sin dejar de adherirse a
las restricciones pasadas. Esto también explica por qué
encadenar varios modificadores de tamaño no hace nada. Este primer modificador de tamaño
establecerá los límites mínimo y máximo
en un valor fijo. Y aunque el
segundo modificador de tamaño solicita el tamaño
de 50 dp, debe cumplir con los valores límite mínimos
que se le pasaron.
Por lo tanto, aún se resolverá
a un tamaño de 100 dp. Si realmente no
desea que su nodo se adhiera a las
restricciones entrantes, puede reemplazar un modificador de tamaño
con otro modificador llamado tamaño requerido. Anulará las
restricciones entrantes y pasará el tamaño que
especifique, en este caso, 50 dp. Al pasar el tamaño de
nuevo al árbol, restablecerá el tamaño informado
a las restricciones entrantes, aquí, 100 por 100 dp. El nodo secundario se
centrará en ese espacio disponible. Ahora, ten en cuenta que en lugar
de usar el modificador de tamaño que adapta tanto el ancho como el alto,
también podemos usar el modificador de ancho para establecer un ancho fijo pero
dejar la altura sin decidir, o podemos usar el
modificador de altura para establecer una altura fija pero dejar el ancho sin decidir. O incluso podemos usar un
modificador sizeIn para un control aún más detallado. A continuación, puede especificar el
ancho y la altura mínimos y máximos individualmente. Ahora que aprendimos
sobre las restricciones y cómo influyen en las
mediciones, volvamos a nuestros casos de uso originales
y encontremos las soluciones correctas.
Esta imagen compuesta se aplica
a fillMaxSize y al modificador de tamaño, lo que significa que da como
resultado un nodo de diseño que se ve así. Digamos que las
restricciones entrantes son que la imagen puede estar en cualquier
lugar hasta 300 de ancho y hasta 200 dp de alto. El modificador fillMaxSize
cambia las restricciones para establecer tanto el ancho como el alto
en el valor máximo pasado, 300 dp de ancho y
200 dp de alto.
Entonces, aunque el modificador de tamaño
quiera usar un tamaño de 50 por 50 dp, aún
debe cumplir con estas
restricciones mínimas entrantes. Y, por lo tanto, el
modificador de tamaño también generará los
límites de restricción exactos de 300 por 200,
ignorando efectivamente el valor que proporcionó en el modificador de tamaño. La imagen sigue estos límites
e informa un tamaño de 300 por 200, que se
pasa por completo. Entonces, podemos ver que la
respuesta correcta fue la opción A. Ahora, ¿qué pasaría si
agregamos un modificador wrapContentSize a la mezcla? El modificador fillMaxSize
seguirá comportándose igual, pero el modificador wrapContent
restablece las restricciones mínimas. Entonces, mientras que fillMaxSize resultó
en restricciones fijas, el modificador wrapContent lo
restablece a restricciones limitadas. Los siguientes nodos ahora pueden
volver a ocupar todo el espacio o ser más pequeños que todo ese espacio. Y así, el modificador de tamaño
establece las restricciones en límites mínimos y
máximos de 50. La imagen, por lo tanto, se resuelve
en un tamaño de 50 por 50, y el modificador de tamaño
lo reenvía.
Ahora, wrapContentSize
tiene una propiedad especial. Toma a su hijo y
lo pone en el centro de los límites mínimos disponibles
que le fueron pasados. El tamaño que comunica
a sus padres es, por lo tanto, igual a
los límites mínimos que se le pasaron. Al combinar solo
estos tres modificadores, pudimos definir un
tamaño para nuestro componible y centrarlo en sus padres. La opción B es la respuesta correcta. Y ahora, si
observamos nuestro ejemplo final, es posible que ya pueda
resolverlo utilizando el conocimiento que hemos adquirido hasta ahora. Mirando nuestro árbol de interfaz de usuario, no
hay nada nuevo. El modificador de recorte no
cambia las restricciones, el modificador de relleno reduce
las restricciones máximas y el modificador de tamaño establece
todas las restricciones en 100 dp. La imagen se adhiere a
esas restricciones e informa un tamaño
de 100 por 100 dp. El modificador de relleno
agrega 10 dp en todos los tamaños, por lo que aumenta el
ancho y la altura informados en 20 dp. Ahora, veamos qué sucede
cuando comenzamos a dibujar los nodos. El modificador de clip actúa sobre
un lienzo de 120 por 120 dp.
Por lo tanto, crea una
máscara circular de ese tamaño. El modificador de relleno
luego inserta su contenido en 10 dp en todos los tamaños, por lo que
reduce el tamaño del lienzo a 100 por 100 dp. Luego, la imagen se
dibuja en ese lienzo. Puede ver que
la imagen está recortada según el
círculo original de 120 dp. Y así, vemos
este extraño resultado. La opción B era la respuesta correcta. Guau. Eso fue mucho. Aprendiste acerca de
las restricciones y las usaste para razonar sobre los
modificadores, cómo ordenarlos y las medidas. En el próximo episodio,
Simona le mostrará cómo puede usar esta información
para comenzar a implementar su propio diseño personalizado. Gracias por ver. [REPRODUCIENDO MÚSICA].