PDA

View Full Version : MEL: UI problems - columnLayout and rowLayout padding


DeadlyNightshade
01-05-2013, 11:03 PM
http://img801.imageshack.us/img801/2489/paddingissues.jpg
The picture is scaled up 400%
The UI parts that I want are the black thumbnail -like squares labeled 1 to 5, and their attached labels of grey color. All other colors in this creenshots comes from backgroundColor -flags on the rowLayout and columnLayouts that I've added for error checking purposes.

The problem is that I can't get rid of this padding!
The child objects does not have any border -flags - so it's not them that's causing the problems (1 to 5 are made up of the same code). To confirm this I isolated the thumbnail-like objects in a completely new UI window, took a print screen and looked at it in Photoshop: no added padding around the child objects.

So what's happening here is that all my columnLayouts are adding a 1px thick padding on the inside of themselves. And all my rowLayouts does the same. The rowLayouts also add a 2px horizontal padding between their child elements.

My immediate question to all this is: Is this normal Maya behavior? Does these UI commands add this padding by default?

Code is here below:
frameLayout
-label "TEST"
;

rowLayout
-backgroundColor 0.7 0.7 0.7
-numberOfColumns 2;

columnLayout
-backgroundColor 0.0 0.0 1.0;

// Square ONE

iconTextButton
-backgroundColor 0.5 0.8 0.5
-command ("")
-height 15
-style "textOnly"
-width 128
myLabel1;

setParent ..; // columnLayout

columnLayout
-backgroundColor 1.0 0.0 0.0;

rowLayout
-backgroundColor 0.5 1.0 0.5
-numberOfColumns 2;

// Square TWO

// Square THREE

setParent ..; // rowLayout

rowLayout
-backgroundColor 1.0 1.0 1.0
-numberOfColumns 2;

iconTextButton
-backgroundColor 0.5 0.8 0.5
-command ("")
-height 12
-style "textOnly"
-width 64
myLabel2;

iconTextButton
-backgroundColor 0.5 0.8 0.5
-command ("")
-height 12
-style "textOnly"
-width 64
myLabel3;

setParent ..; // rowLayout

rowLayout
-backgroundColor 1.0 1.0 0.0
-numberOfColumns 2;

// SQUARE FOUR

// SQUARE FIVE

setParent ..; // rowLayout

rowLayout
-backgroundColor 0.0 1.0 1.0
-numberOfColumns 2;

iconTextButton
-backgroundColor 0.5 0.8 0.5
-command ("")
-height 12
-style "textOnly"
-width 64
myLabel4;

iconTextButton
-backgroundColor 0.5 0.8 0.5
-command ("")
-height 12
-style "textOnly"
-width 64
myLabel5;

setParent ..; // rowLayout

setParent ..; // columnLayout

setParent ..; // rowLayout

setParent ..; // frameLayout

I've experiemented with different flags, such as setting -enableBackground to false, or -rowSpacing to 0, none of it has helped. And hardcoding the dimensions of the elements only pushes the child objects outside of view.

Nyro
01-06-2013, 02:39 PM
That's pretty much to be expected, from my experience.

That's part of the reason I basically never use rowLayouts.
I only use columnLayouts when I need a collection of elements I need to refer to by a common relative (their shared parentlayout) and when the appearance is of minor concern.

For serious UI formatting, I almost always resort to the formLayout. It offers a level of control unlike any other layout and the results are always dependable.

Here's your layout, but reconfigured to use a formLayout:

if(`window -ex MyTestWindow`)
deleteUI MyTestWindow;

$window = `window MyTestWindow`;

frameLayout
-l "Frame"
MyFrameLayout;

// create master Layout
$form = `formLayout
-w (2 + 128 + 2 + 63 + 1 + 63 + 2)
-h (2 + 128 + 2)
-bgc .6 0 0
MyFormLayout`;

// create elements
$bigBtn = `iconTextButton
-bgc .1 .2 .5
-w 128
-h 128
-label "BIG"
-st "textOnly"
MyBigButton`;

$smBtn1 = `iconTextButton
-bgc .1 .5 .2
-w 63
-h 63
-label "Small 1"
-st "textOnly"
MySmallButton1`;

$smBtn2 = `iconTextButton
-bgc .1 .5 .2
-w 63
-h 63
-label "Small 2"
-st "textOnly"
MySmallButton2`;

$smBtn3 = `iconTextButton
-bgc .1 .5 .2
-w 63
-h 63
-label "Small 3"
-st "textOnly"
MySmallButton3`;

$smBtn4 = `iconTextButton
-bgc .1 .5 .2
-w 63
-h 63
-label "Small 4"
-st "textOnly"
MySmallButton4`;

// now format the master formlayout
formLayout -e
// big button
-af $bigBtn "left" 2
-af $bigBtn "top" 2
// small button top left
-af $smBtn1 "top" 2
-ac $smBtn1 "left" 2 $bigBtn
// small button top right
-af $smBtn2 "top" 2
-ac $smBtn2 "left" 1 $smBtn1
-af $smBtn2 "right" 2
// small button bottom left
-ac $smBtn3 "left" 2 $bigBtn
-ac $smBtn3 "top" 1 $smBtn1
// small button bottom right
-ac $smBtn4 "left" 1 $smBtn3
-ac $smBtn4 "top" 1 $smBtn2
-af $smBtn4 "right" 2
$form;

showWindow $window;
(tab spacing in the above code may look weird, but that's due to my particular choice of font in my IDE)

I've defined the width and height of the formLayout above in a manner that makes it easier to see and understand the padding and element-sizes I want to define.

DeadlyNightshade
01-06-2013, 03:51 PM
Ah I see - makes sense.
I almost entirely used formLayouts when I made my UV Editor, but now when I started working on a new tool I decided to try something new. I tried a gridLayout first but it seems like you can't have rows of variable height there - or I missed something.

Thanks for your reply.

Nyro
01-06-2013, 05:35 PM
No you didnt miss anything. gridLayout cells are all same dimensions.

Just stick to formLayouts for the overall formatting and use columnLayouts or rowLayouts only as children of that for subgrouping if you really need to or you dont care about the fine details (like margins, padding, distance between elements and their alignment).

DeadlyNightshade
01-06-2013, 08:48 PM
Alright!
Thanks for the insight!

PozestStar
01-07-2013, 12:20 AM
Sorry to hijack the thread, but I wanted to say thanks as well. I've been having the same problem with a UI I've been working on and it was driving me insane. Also, I didn't realize you could do something like this:

-height (2 + 2 + 2)

So thanks for that too. Is there any specific reason for doing something like this though? Just wondering.

Nyro
01-07-2013, 09:18 AM
-height (2 + 2 + 2)

So thanks for that too. Is there any specific reason for doing something like this though? Just wondering.


I've defined the width and height of the formLayout above in a manner that makes it easier to see and understand the padding and element-sizes I want to define.


I basically could have done the following:

int $layoutPadding = 2;
int $bigButtonMargin = 2;
int $bigButtonSize = 128;
int $smallButtonMargin = 1;
int $smallButtonSize = 64;

formLayout
-w ($layoutPadding + $bigButtonSize + $bigButtonMargin + $smallButtonSize + $smallButtonMargin + $smallButtonSize + $layoutPadding)
myFormLayout;

PozestStar
01-07-2013, 10:24 AM
Thanks for the explanation :thumbsup:

CGTalk Moderation
01-07-2013, 10:24 AM
This thread has been automatically closed as it remained inactive for 12 months. If you wish to continue the discussion, please create a new thread in the appropriate forum.