Difference between revisions of "ContentSizeFitter (Component)"
Line 11: | Line 11: | ||
== Intoduction == | == Intoduction == | ||
− | The '''ContentSizeFitter''' resizes the | + | The '''ContentSizeFitter''' resizes the slots's [[RectTransform (Component)|RectTransform]] to fit the minimum or preferred size of its other ''layout'' components in width or height. In effect, it kind of shrink-wraps its contents. |
− | Note that this does not include its children | + | Note that this does not include its children slots, and only works on slots that have a layout component. For working with children, the parent with the ContentSizeFitter needs to also have a [[HorizontalLayout (Component)|HorizontalLayout]], [[VerticalLayout (Component)|VerticalLayout]], or [[GridLayout (Component)|GridLayout]] component. [[LayoutElement (Component)|LayoutElement]] is also a layout component, as is [[Text (Component)|Text]] and [[Image (Component)|Image]]. |
<!--T:3--> | <!--T:3--> | ||
Line 29: | Line 29: | ||
<!--T:4--> | <!--T:4--> | ||
== Behavior == | == Behavior == | ||
+ | |||
+ | The ContentSizeFitter functions as a layout controller that controls the size of its own layout component. The size is determined by the minimum or preferred sizes provided by layout components its own slot. Such layout components can be Image or Text components, VerticalLayout, HorizontalLayout, or a LayoutElement component. | ||
<!--T:5--> | <!--T:5--> | ||
== Examples == | == Examples == | ||
+ | |||
+ | In this example, we'll "shrink-wrap" the example from the [[VerticalLayout (Component)|VerticalLayout]] page. We do this by adding a ContentSizeFitter to the slot with the VerticalLayout, and setting its HorizontalFit mode to PreferredSize. Since the preferred width of the vertical layout is simply the maximum of its children's preferred widths plus the left and right spacing, the vertical layout shrinks horizontally to equal that preference: | ||
+ | |||
+ | [[File:Content Size Fitter Example 1 Horizontal Result.jpeg|800px]] | ||
+ | |||
+ | If, however, we now also attempt to shrink-wrap vertically by setting the ContentSizeFitter's VerticalFit to PreferredSize, we end up with no colored boxes. This is because the children have their preferred heights set to -1, and that means the heights will simply be set to zero. | ||
+ | |||
+ | [[File:Content Size Fitter Example 1 Vertical Result with no preferred height.jpeg|800px]] | ||
+ | |||
+ | We can fix this by assigning each child's LayoutElement a preferred height. For example: | ||
+ | |||
+ | [[File:Content Size Fitter Example 1 Vertical Result with preferred height.jpeg|800px]] | ||
<!--T:6--> | <!--T:6--> |
Latest revision as of 23:16, 15 May 2021
This article or section is a Stub. You can help the Neos Wiki by expanding it.
Intoduction
The ContentSizeFitter resizes the slots's RectTransform to fit the minimum or preferred size of its other layout components in width or height. In effect, it kind of shrink-wraps its contents.
Note that this does not include its children slots, and only works on slots that have a layout component. For working with children, the parent with the ContentSizeFitter needs to also have a HorizontalLayout, VerticalLayout, or GridLayout component. LayoutElement is also a layout component, as is Text and Image.
Usage
Fields | ||
---|---|---|
Name | Type | Description |
persistent
|
Bool | Determines whether or not this item will be saved to the server. |
UpdateOrder
|
Int | Controls the order in which this component is updated |
Enabled
|
Bool | Controls whether or not this component is enabled |
HorizontalFit
|
SizeFit | The fit mode to use to determine the width. |
VerticalFit
|
SizeFit | The fit mode to use to determine the height. |
Fit modes are:
- Disabled: Don't perform any resizing.
- MinSize: Resize to the minimum size of the content.
- PreferredSize: Resize to the preferred size of the content.
Behavior
The ContentSizeFitter functions as a layout controller that controls the size of its own layout component. The size is determined by the minimum or preferred sizes provided by layout components its own slot. Such layout components can be Image or Text components, VerticalLayout, HorizontalLayout, or a LayoutElement component.
Examples
In this example, we'll "shrink-wrap" the example from the VerticalLayout page. We do this by adding a ContentSizeFitter to the slot with the VerticalLayout, and setting its HorizontalFit mode to PreferredSize. Since the preferred width of the vertical layout is simply the maximum of its children's preferred widths plus the left and right spacing, the vertical layout shrinks horizontally to equal that preference:
If, however, we now also attempt to shrink-wrap vertically by setting the ContentSizeFitter's VerticalFit to PreferredSize, we end up with no colored boxes. This is because the children have their preferred heights set to -1, and that means the heights will simply be set to zero.
We can fix this by assigning each child's LayoutElement a preferred height. For example: