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 de la interfaz de usuario se cambian de tamaño automáticamente para ajustarse a su contenido, debe prestar más atención al pivote del Rect Transform. El pivote permanecerá en su lugar cuando se cambie el tamaño del elemento, por lo que al establecer la posición de pivote puede controlar en qué dirección se expandirá o reducirá el elemento. Por ejemplo, si el pivote está en el centro, entonces el elemento se expandirá igualmente en todas las direcciones, y si el pivote está en la esquina superior izquierda, entonces el elemento se expandirá hacia la derecha y hacia 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 (grupo de diseño horizontal) al elemento de la interfaz de usuario, luego agregue un Content Size Fitter (ajustador de tamaño de contenido) también. Establezca el Horizontal Fit (ajuste horizontal), el Vertical Fit (ajuste vertical) o ambos en la configuración preferida. Puede agregar y modificar el padding (relleno) utilizando la propiedad ppadding 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 (grupo de diseño horizontal (o vertical)) funciona como un Layout Controller (controlador de diseño) y como un Layout Element (elemento de diseño). Primero, escucha la información de diseño proporcionada por los hijos del grupo, en este caso, el texto hijo. Luego determina qué tan grande debe ser el grupo (como mínimo, y preferiblemente) para poder contener a todos los hijos, y funciona como un Layout Element que proporciona esta información sobre 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.