Normalmente cuando se posicione un elemento UI con su Rect Transform, su posición y tamaño es especificado manualmente (opcionalmente incluyendo un comportamiento para estirarlo con el parent Rect Transform).
Sin embargo, a veces usted quiere que el tamaño del rectángulo sea configurado de manera automática para que encaje con el contenido del elemento UI. Esto se puede hacer al agregar un componente llamado Content Size Fitter.
Con el fin de hacer un Rect Transform con un componente Text en él para que se ajuste al contenido del texto, agregue un componente Content Size Fitter al mismo Game Object que tiene el componente Texto. Luego configure ambos los despegables Horizontal Fit y Vertical Fit a los ajustes Preferidos.
Lo que sucede aquí es que el componente Text funciona como un Layout Element (Elemento de diseño) que puede proporcionar información acerca de qué tan grande es su tamaño mínimo y preferido. En un diseño manual esta información no es utilizada. Un Content Size Fitter es un tipo del Layout Controller, el cual escucha a la información del diseño proporcionado por Layout Elements y controla el tamaño del Rect Transform de acuerdo a esto.
Cuando los elementos UI cambian de tamaño de manera automática para que se ajuste a su contenido, usted debería prestar una atención extra al pivote del Rect Transform. El pivote va a quedarse en su lugar cuando el elemento cambie de tamaño, por lo que al ajustar la posición de pivote usted puede controlar en qué dirección el elemento se va a expandir o encoger. Por ejemplo, si el pivote está en el centro, entonces el elemento va a expandirse de manera igual en todas las direcciones, y si el pivote está en la esquinas superior izquierda, luego el elemento va a expandiese a la derecha y abajo.
Si usted tiene un elemento UI, tal como un botón, que tiene una imagen de fondo y un Game Object hijo con un componente Text en él, usted probablemente quiere que el elemento Ui entero encaje al tamaño del texto - de pronto con algo de relleno.
Para hacer esto, primero agregue un Horizontal Layout Group al elemento UI, luego agregue un Content Size Fitter también. Configure el Horizontal Fit, el Vertical Fit, o ambos a los ajustes Preferred (preferidos). Usted puede agregar y ajustar el relleno utilizando la propiedad padding en el Horizontal Layout Group.
Por qué utilizar un Horizontal Layout Group? Bueno, puede ser también un Vertical Layout Group también - siempre y cuando solo haya un solo hijo, estos producen el mismo resultado.
El Horizontal (o Vertical) Layout Group funciona como un Layout Controller y un Layout Element. Primero escucha a la información del diseño proporcionada por el hijo en el grupo - en este caso el texto hijo. Luego determina qué tan grande el grupo debe ser (en minimum (mínimo), y preferrably (preferiblemente)) con el fin de ser capaz de contener todos los hijos, y funciona como un Layout Element que proporciona esta información acerca de su tamaño mínimo y preferido.
El Content Size Fitter escucha a la información de diseño proporcionada por cualquier Layout Element en el mismo Game Object - en este caso proporcionado por el Horizontal (o Vertical) Layout Group. Dependiendo en sus ajustes, luego controla el tamaño del Rect Transform basándose en esta información.
Una vez el tamaño del Rect Transform haya sido configurado, el Horizontal (o Vertical) Layout Group se asegura en posicionar y dimensionar sus hijos de acuerdo al espacio disponible. Ver la página acerca del Horizontal Layout Group para más información acerca de cómo controla la posición y el tamaño de sus hijos.
Si usted tiene un Layout Group (horizontal o vertical) y quiere que cada uno de los elementos UI en el grupo se ajusten a sus contenidos respectivos, qué es lo que usted hace?
Usted puede colocar un Content Size Fitter en cada hijo. La razón es que el Content Size Fitter quiere control sobre su propio Rect Transform, pero el Layout Group padre también quiere control sobre el Rect Transform hijo. Esto crea un conflicto y el resultado es un comportamiento indefinido.
Sin embargo, no es necesario tampoco. El Layout Group padre ya puede hacer que cada hijo encaje con el tamaño de su contenido. Lo que usted necesita hacer es desactivar los toggles Child Force Expand en el Layout Group. Si los hijos en sí son Layout Groups también, usted podría necesitar desactivar los toggles Child Force Expand de ellos también.
Una vez los hijos no se expandan más con la anchura flexible, su alineamiento puede ser especificado en el Layout Group utilizando los ajustes Child Alignment.
Qué pasa si usted quiere que algunos de los hijos se expanda para llenar el espacio adicional disponible, pero no los otros hijos? Usted puede de manera fácil controlar esto al agregar un componente Layout Element a los hijos que usted quiere expandir y habilitar las propiedades Flexible Width o Flexible Height en esos Layout Elements. El Layout Group padre debería todavía tener las toggles Child Force Expand desactivadas, de lo contrario, todos los hijos expandirán de manera flexible.
Un Game Object puede tener múltiples componentes que proporciona información del diseño acerca de sus tamaños mínimos, preferidos y flexibles. Un sistema de prioridad determina qué valores toman efecto sobre otros. El Componente Layout Element tiene una prioridad mayor que los componentes Text, Image y Layout Group, por lo que pueden ser utilizados para anular cualquier información del diseño acerca de valores que proporciona.
Cuando el Layout Group escucha a la información de diseño proporcionada por los hijos, éste va a tomar los tamaños flexibles anulados en cuenta. Luego, cuando se controle el tamaño de los hijos, no los volverá más grandes que sus tamaños preferidos. No obstante, si el Layout Group tiene la opción Child Force Expand habilitada, siempre hará que el tamaño flexible de todos los hijos sea al menos 1.
Esta página ha explicado soluciones a unos pocos casos comunes de uso. Para una explicación con más detalles acerca del sistema auto layout, ver la página UI Auto Layout.