UI Design: Constraining UI Size in Regards to Grid-like Layout

Help and Feedback Art Design Support
, ,
#1

I am currently working on an inventory-esque UI system. To make this, I have started with the traditional square boxes where items will sit. Unfortunately, I’ve come across an error with regards to UI constraining. At first, I tried grid layouts. Only then did I realize you can’t set a size constraint relative to the Y axis (YY). I am currently using scale in certain areas and NOT offset. I could use offset and adjust according to devices but that’s a pain to setup and seems pointless if I can find a simple UI solution.

Examples:

My Screen in Studio:
https://gyazo.com/95c3c67153fd0dbfb5973aa1eb918a80

My Screen after Removing the Property & Explorer Tabs from the Sides:
https://gyazo.com/21cf73014ba2a061175f703c7c83aca2

My Screen with Output Opened at the Bottom:
https://gyazo.com/098820c69858b0312480a8434bfe55cd

Notes: I have tried using UIAspectRatio and it has only succeeded in more failure. If anyone has solutions to a perfectly adjusting, square grid layout UI, please point me towards it.

EDIT: The text works just like I want it to. It’s just the squares that I need fixed.

#2

You could try using a UIAspectRatioContstraint on the frame itself. Assuming that the amount of boxes are the same throughout the game, there isn’t really a need to allow the frame to scale that much horizontally, and limiting it would help constrain the boxes to match your first screenshot, even on different resolutions and high dpi displays.

Similar example with this really old UI I made months ago (using height as the dominant axis):

6 Likes
#3

Parent a UIAspectRationConstraint to your UIGridLayout, all members of the layout will inherit its child constraints.

3 Likes