koobas.hobune.stream
Dynamic width panel
I have some issue with my UI when I change screen's width.
I have two panels, which named Left Panel and Right Panel. Each has top left/right pivot point.
Above screenshot was captured with 1280x800 size of width, and I'm using UI Scale Mode as Scale with Screen Size and reference resolution value is 1280x800, and Screen Match Mode set to Expand.
So it works well with 1280x800, however with lower resolution, I have some empty spaces between left and right panels:
What I want is keep Left panel has same width, but only changes the width of the right panel.
Unfortunately I can't find any related informations, and I tried to adjust the size by script directly but it wasn't worked as expected.
To explain what is that mean, I got the size of left panel and Screen.width, and subtracted screen from Left Panel's width.
It works in same resolution(1280x800), however in lower resolution(1024x600), it was totally wrong.
Left Panel has almost 400 width, so in this case, Right Panel should be has 880(not include spaces between panel).
So in 1024x600 resolution, it must be near by 620 (1024 - 400 = 624), and calculation was correct but results of Right Panel too small short.
To make fit Right Panel, I had to set to width almost 800, and I don't know what's going on. Just adding 400 + 800 already exceeds 1024.
I think I have to do something like dynamic resizing, to automatically resize it's width or height, but I don't get it how to work with static sized element(Left Panel).
Can anyone give me some advice to how to work my UI respond dynamically with static UI element?
Or, what did I wrong in manually setting the width of the Right Panel by script, why the panel was too short?
Any advice will very appreciate it.
Hi @modernator24
If you don't want to just make your right side panel anchor so that it fills the remaining space from left panels right edge, you could try something like the code below. Use Canvas Scaler, with Scale With Screen Size Scale mode. Then $$anonymous$$atch slider: 0. Panel is your right side panel, panelRef is your left side panel. Here height of stretched right side panel is just screen height. Note. I also moved right side panel's pivot to where it's anchor is.
var w = (scaler.referenceResolution.x) - (panelRef.rect.width);
var h = canvasRt.rect.height;
panel.sizeDelta = new Vector2(w, h);
This way you could keep your both anchors in "flower" shape, left panel anchor in upper left corner of canvas, and right side panel's anchor in upper right corner of canvas.
The way that I would do it is to set up both panels to have a parent. This parent should have an horizontal layout group. The horizontal layout group should have both sets of "Child Force Expand" turned off, and the "Child Controls Size Width" turned on ("Child Controls Size Height" can be turned on or off, up to you)
On both panels, I would put a Layout Element. The left panel should have both a Min Width and a Prefered Width of 400 (or whatever you would like). The right panel should have a Flexible Width of 1.
This means that the Left Panel should take up only 400, and the right panel will take up the rest of the space. In order to change the spacing between or around, you can change the Padding and Spacing in the parents Horizontal Layout Group.
