(16) unity4.6 learn Ugui Chinese Document ------- tips-Making UI elements fit the size of their content

(16) unity4.6 learn Ugui Chinese Document ------- tips-Making UI elements fit the size of their content

 

 

 

2. Making UI elements fit the size of their content

 

Generally, when the UI element is located on the RectTransform, its position and size are manually specified (options include stretch and parent Rect Transform ).

 

However, sometimes you may want the rectangle to automatically adjust the size to adapt to the content of the UI element. This can be done by adding a component called Content Size Fitter.

 

Fit to size of Text

 

To make the Rect Transform and Text components suitable for the Text Content, add the Content Size Fitter component to the same game object with the Text components. Set Horizontal Fit, Vertical Fit, or both.

 

How does it work?

 

What happened here is the Text component function as a LayoutElement layout element, which provides information about its minimum value and preferred size. This information is not used in manual layout. Content Size Fitter is a type of Layout Controller. It listens to the Layout elements provided by Layout information and the Rect Transform Size of the control.

 

Remember the role

 

When the UI element is automatically adjusted to fit its content, you should pay extra attention to the Rect Transform of the Transform. When you adjust the size of an element, you can set the position of the element to control which parts will expand or contract. For example, if the cursor is in the center, the element is expanded in all directions. If the cursor is in the upper left corner, the element is expanded to the right and down.

 

Fit to size of UI element with child Text

 

If you have a user interface element such as a button that has background images and text components for a child game object, you may want the entire UI element, to adapt to text-maybe with some margin size.

 

To do this, add the horizontal layout Group of HorizontalLayout Group to the UI element, and then add the Content Size Fitter. Select horizontal and vertical. You can add and adjust the padding in a Horizontal Layout Group using the padding attribute Horizontal Layout Group.

 

Why use a HorizontalLayout Group horizontal layout Group? Well, it may be a vertical layout group and-as long as there is only one child, they produce the same results.

 

How does it work?

 

The Horizontal (orVertical) Layout Group Horizontal (or vertical) Layout Group function serves as a LayoutController and Layout Element. It listens to the layout information provided by sub-objects in the group for the first time-in this case, sub-object text. It then determines how a large group must provide information about its minimum and preferred size to include all the children and a Layout Element.

 

Content SizeFitter listens to Layout information provided by any game object with the same Layout elements-Horizontal (or Vertical) Layout Group in this case. Then, according to its settings, the RectTransform size of this control is based on this information.

 

Once the Rect Transform size is set, the Horizontal (or Vertical) Layout Group ensures the location and size, and its sub-objects are based on available space. See the horizontal layout group page for details about how to control the location and its child size.

 

Make children of a Layout Group fit their respectivesizes

 

What do you do if you have a layout group (horizontal or vertical) and want each UI element group to fit in their respective content?

 

For each sub-object, you cannot set ContentSize to Fitter. The reason is that Content Size Fitter wants to control the control Content beyond the Rect Transform Content, but the parent layout group wants to control the Content beyond the sub-object Rect Transform. This produces a conflict and the result is undefined.

 

However, it is not necessary. The parent layout group can make each child fit the content size. What you need to do is to add the layout element component to each child, and set the attributes of Flexible Width and Flexible Height to 0.

 

As you can see, by default, layout elements will be expanded to fill in additional available space. To prevent them from doing this, the layout element component can be added, where to override settings for Flexible Width and Height.

 

Once the Child object is no longer extended and flexiblewidth, you can use the Child Alignment sub-Alignment to specify its Alignment in the layout group.

 

How does it work?

 

A game object can have multiple components each providing layout information about the smallest minimum, preferred, and flexible sizes. The priority system determines which values take over others' influences. Layout element components have higher priority than text, images, and layout group components, so they can be used to override them to provide any layout information value.

 

When the layout group listens to the layout information provided by the sub-object, it will consider the flexible size of the rewritten flexible (it has been set to 0 ). Then, when controlling the size of the child, it will not have them any larger than its preferred size.

 

More information

 

This page describes several common use cases for resolution. For more details about the automatic Layout system, see the UI Auto Layout page.

 

??