Alignment Tutorial

stalker87

24-01-2012 23:49:30

I really would like to know how to use the Alignment property. I know there's a list of all Alignment values inside the wiki but i'm trying to make it to work with a trial/error approach that is a "little bit" frustrating.
I've read it works like wpf. But in wpf if you set an ImageBox as stretched i should get an image with a size equal to the parent window size ( or the whole window size if no parent are specified ? ). Is there a demo with some examples or tutorial already written on this argument ?

Altren

25-01-2012 12:51:56

I've read it works like wpf.No, you are wrong. Alignment in MyGUI is behaviour that applied only when parent widget is changed, widget change it's position/size according to it's alignment.
If you want to make widget be resized on load you can use BaseLayout class and "SnapTo" userData, that do such thing. Or you can implement similar custom behaviour when loading layout.

stalker87

25-01-2012 19:49:47

Ok i've seen the BaseLayout code.
But... why i have to use a specialized stuff to have the correct alignment on load ? I mean, is there some problem to activate this feature in an automatic way ?

geotavros

10-02-2012 10:41:10

Thanks, Altren. This text should be added into the documentation:
Alignment in MyGUI is behaviour that applied only when parent widget is changed, widget change it's position/size according to it's alignment. Because it is not obvious, how to use the setAlign() and Align.
I can add it and submit an SVN patch if you want.

I was looking for a method to make my application look same in different resolutions e.g. 1280x720, 1920x1080. I want my widgets to be scaled and placed proportionally to the resolution. For now I've found a way to use relative positions and sizes for top level widgets and using Relative Align for non top level widgets.

For now it is OK. Because my resolution changes proportionally( I mean Width and Heigth are scaled using the same scale factor), but if I will use portrait orientation e.g. 720x1280 my widgets will look very badly. They will be stretched vertically.
To solve this I think it is needed to add another value to Align enum, named Proportional. It will scale widget's size proportionally(e.g. same scale factor for width and height) and it will scale position using relative scale factors(e.g 0.5625 for X, and 1.777778 for Y, to change from 1280x720 to 720x1280).

May be there are some other solutions I don't know about?

geotavros

15-02-2012 09:36:38

I have recently discovered that relative positions don't work as expected so I switched to use absolute positions. To support different resolution I have made such a trick.
1. Assume we make our UI in an LayoutEditor for resolution 1280x720. You set the Align property of every top level widget to Relative. Non top level widgets can use this Align too.
2. In my application I first call:
gui_->resizeWindow(MyGUI::IntSize(1280, 720)); // for this resolution layout were made

after that I load all my layouts and call

// resize to the actual resolution
gui_->resizeWindow(MyGUI::IntSize(primary_window_.get_width(), primary_window_.get_height()));

that's a good way if my resolution changes with the fixed aspect ratio, e.g. to 1920x1080 or 640x360

Hronom

15-02-2012 22:03:03

Here is my solution:
mCurrentLayoutWidgets = MyGUI::LayoutManager::getInstancePtr()->loadLayout("WinMenu.layout");
MyGUI::LayerManager::getInstancePtr()->resizeView(MyGUI::RenderManager::getInstancePtr()->getViewSize());

With this i have align that works after load layout...

almondega

15-04-2012 20:36:05

Here is my solution:
mCurrentLayoutWidgets = MyGUI::LayoutManager::getInstancePtr()->loadLayout("WinMenu.layout");
MyGUI::LayerManager::getInstancePtr()->resizeView(MyGUI::RenderManager::getInstancePtr()->getViewSize());

With this i have align that works after load layout...


Thanks Hronom, your solution worked just fine!

But this solution should be default for MyGUI, I think, otherwise the alignment for the main widget is just useless.

lepawel

10-06-2015 21:57:02

Here is my solution:
mCurrentLayoutWidgets = MyGUI::LayoutManager::getInstancePtr()->loadLayout("WinMenu.layout");
MyGUI::LayerManager::getInstancePtr()->resizeView(MyGUI::RenderManager::getInstancePtr()->getViewSize());

With this i have align that works after load layout...

I can't get it to work on Ogre 1.9/MyGUI 3.2.0, GUI won't scale at all. any tips ?>
EDIT:
Solution that does not provide precision of scaling, pixel-level misalignment happens

resizeChildrenWidgets(widgets[0]); //array of all widgets
void resizeChildrenWidgets(MyGUI::Widget* widget)
{
float multiplier = WindowWidth / DefaultWidth;
MyGUI::IntCoord coord = widget->getCoord();
coord = MyGUI::IntCoord(coord.left*multiplier, coord.top*multiplier, coord.width*multiplier, coord.height*multiplier);
widget->setCoord(coord);
for(int i = 0; i < widget->getChildCount(); i++){
resizeChildrenWidgets(widget->getChildAt(i));
}
}