How can I make scalable(contracting) EditorWindow UI(not in-game UI) like in inspector example?
-
\$\begingroup\$ Can you clarify for us where your new UI lives? Is it also in the inspector, or in a standalone editor window, or in-game? Showing us a target visual or what you have now could help too. \$\endgroup\$– DMGregory ♦Commented Nov 21, 2018 at 14:56
-
\$\begingroup\$ Could you provide some more details on what you've tried? My experience with custom editor window isn't that great, but last time I tried it I believe all fields scale automatically. \$\endgroup\$– Tom TsagkatosCommented Nov 21, 2018 at 15:54
1 Answer
When speaking about the UI, all objects have a RectTransform
instead of a Transform
. One of it's values is the Anchors
one. An anchor basically defines where the child is "attached" in relation to it's parent. Each object has 2 anchors, Min (for bottom-left corner) and Max (for top-right). Their values go from 0 to 1, which signifies the percentage of the screen width/height.
If for example you've set both anchors like this:
anchorMin.x = 0.1;
anchorMax.x = 0.9;
anchorMin.y = 0.1;
anchorMax.y = 0.9;
And the RectTransform
's positions are all 0, then all edges of that object will be 10% away from the edge of the screen, regardless of screen size (The object basically stretches from 10% to 90% of screen size).
Keep in mind that if both x
or y
of both anchors are the same value, the Inspector changes, and gives you a new "width" or "height" field, which you can use to give a specific size to your element. So with this example:
anchorMin.x = 0.1;
anchorMax.x = 0.9;
anchorMin.y = 0.5;
anchorMax.y = 0.5;
This object is now stretching only horizontally from 10% to 90% of screen space, and it's also anchored vertically in the middle of the screen, but on a single point. This means you can give it your own height (for example 100px) and the object will now stretch to fit the screen horizontally, while keeping itself at 100px height.
See also, Unity: Basic Layout and Unity: Designing UI for Multiple Resolutions
-
\$\begingroup\$ Thank you for a great answer, but I was talking about EditorWindow UI. \$\endgroup\$ Commented Nov 21, 2018 at 15:43
-
\$\begingroup\$ @GuardFromUA Sorry but you tagged your post with
unity
and this being a game development community, I assumed it's a video game made usingunity
. If that's not the case could you provide some more details about what platform/tools you use? In general you'd use the same technique, but with some tools you may have to do it manually. \$\endgroup\$ Commented Nov 21, 2018 at 15:47 -
1\$\begingroup\$ I am developing Unity EditorWindow(docs.unity3d.com/ScriptReference/EditorWindow.html), so my tag is right. \$\endgroup\$ Commented Nov 21, 2018 at 15:49