Custom Layout

[MVivonetto]

I have created a QWidget Application as seen below:

StartSize.jpg

Everything works great but I got way too excited and didn't look into using Layouts!!! I custom placed all the Qwidgets in what I think was the proper layout that it needed to be and it is. I now understand why its important to use layouts- now if I maximize the window it just creates a larger QMainWindow and no widgets adjust to its new size...they stay the same.

I understand I need to rebuild this using layouts but how could I recreate this exact GUI layout using Vertical, Horizontal or even Grid layouts..It's very frustrating as I feel I am trapped to follow what the layout wants to do. I understand there is a way to create custom layouts but is that the way to go to recreate this exact GUI? And can I implement a custom layout using the designer? Hopefully someone has some great advice or has experienced the same issue and has come up with a nice solution because its upsetting to say the least as I love Qt and really don't want to give up on it. Thanks again guys!

[d_stranz]

So, you can do this without starting over.

First, go into Designer and resize the main window UI to make it really big. This is temporary, just so you'll have room to create the layout and drag the old widgets into it.

Next, create a QHBoxLayout and resize it to approximately as large as your original GUI. This HBox divides the view into left and right sides. The left side is for the title, playback, and progress bar. The right side will be for all of the controls.

Add a QLabel to the HBox. This is temporary, to use as a placeholder while you build the left and right sides. The Designer is sometimes too smart for its own good and won't let you add things where you'd like, so the placeholder widgets are useful to trick it into doing what you want.

Add a QVBoxLayout to the HBox left side (i.e. left of the QLabel). Drag and drop your title (a QLabel, I guess), playback widget, and progress slider from the old GUI into the VBox.

I think the control panel would probably be best done using a QGridLayout. Add one of those to the HBox in between the VBox and the temporary QLabel. You should now have the HBox divided into three parts.

Drag and drop the widgets from your old GUI into this new grid. The grid will automatically add new rows and columns as you add widgets to it. For your wide buttons, place them into one grid cell, then click and drag one edge to make it span two cells.

When you have everything moved into the new layout, you can delete the QLabel and the HBox will resize.

Resize the UI to fit the new controls layout. You will probably have to go in and edit all those fixed sizes and positions to default values otherwise things won't expand and shrink as you'd like. You may also have to select the main UI frame and choose "Layout in a <whatever>" to be sure the HBox expands to fill the whole UI.

You may also have to set some minimum sizes for things, like the video playback widget, and you might have to add some horizontal or vertical "spacers" to keep things from stretching too much.

Play around until you get the feel of it. If you make a backup copy of the .ui file before you start, you can always start over if you mess up.

And of course, you can always start with a clean slate and build a new UI from the ground up. You'd use the same procedure, just adding new widgets instead of drag and drop.

[MVivonetto]

d

That is great suggestion! Didn't even come close to thinking of that. I'm going to give it a try this afternoon and see what I can come up with. Thank you so much for your help and I'll update this thread of the progress that I make!

Thanks again!

[d_stranz]

Good luck. You might also have to build the VBox and Grid layouts outside the HBox and then select and drag each of them and their widgets into the HBox. Like I said, Designer can be quirky. I've often found it easiest to build the pieces in their sub-layouts and then drag the pieces into the larger layout when they layout is multi-level.