1

I need a row of GUI elements with equal spacing between them and on each side. The width of all “?” below should be the same.

This spacing must be dynamic to support different screen widths at run-time.

In the past this was done with GUILayout.FlexibleSpace() between each element. How is equidistant spacing between several elements in the same horizontal row done in the new GUI system?

Note, I’ve read all the docs, this is not possible with the horizontal layout component since its left/right/spacing can only be hard coded at edit-time. Also tried nesting horizontal layout controls but the middle space never stays the same as the side spaces.

Trying to avoid scripting this if the new GUI supports it natively.

39219-flexible.jpg

2

The manual has entries for this:

http://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html

http://docs.unity3d.com/Manual/HOWTO-UIFitContentSize.html

Also watch the tutorials unity provides:

3

Okie, solved my dynamic spacing issue by:

  1. adding the Canvas Scalar component to the main parent canvas
  2. using “Scale with screensize” mode
  3. set the reference resolution to the smallest possible resolution I support (480px by 320px)
  4. Add an empty parent UI rect inside the Canvas object and hard code its width/height to the same minimal resolution and center it on the screen.

Once this is setup you just build out the UI underneath this parent entering in hard coded spacing values (horizontal or vertical) at edit time for that minimum resolution. The scalar component handles any bigger screen size or pixel depth and keeps the spacing exactly the same. Hard coding the parent ensures any child stretching is always confined proportionately to the screen resolution.

Admittedly using “scaling” is super obvious, but what took a while was to re-think UI design as more like an expanding UI snapshot (including text), nothing like CSS web responsive design using % widths and font EMs! Luckily. I still use the “best fit” feature on every text component but more to allow for easy changing later or for dynamic text fields. Starting small also gives the advantage to set the max font size so it doesn’t end up ginormous as the layout scales up.

Hope this helps someone re-approach spacing with Unity new gui!