Game Development Reference
In-Depth Information
4.
Select the
Image
in the
Hierarchy
and in the
Inspector
click on the
Add Component
button and then select
Layout
|
Vertical layout Group
.
Note that the
Text
has now positioned to the top-left of the
Image
and
its
Rect Transform
now fills the
Image's Rect Transform
. This shows
by default the child resizes to the parent.
5.
Still with the
Image
selected, click on
Add Component
and select
Layout
|
Content Size Fitter
.
Note that there is no actual change yet as the defaults for the fitter
are
Unconstrained
.
6.
Change the
Horizontal Fit
of the
Content Size Fitter
to
Preferred Size
.
Note, that the
Image Rect Transform's
width has reduced to
match the
Text
width of the
Text
component.
For fun, you can extend on this example and set the
Vertical Fit
and add some
additional child
Text
controls and end up with something like the following:
As you can see, the parent
Image
(thanks to the
Content Size Fitter
) now resizes to
fit the latest child instead of the other way round.
Aspect Ratio Fitter
The
Aspect Ratio Fitter
was one of the late entrants to the UI framework and is
certainly one of the fringe cases you can use to organize your UI. In effect, this
layout tool will resize the UI of a
Rect Transform
according to an
Aspect Ratio
.
