Layout Managers

00:00 Let me start this video by outlining the main problem of a GUI. The main problem is that a GUI has to be flexible because you don’t really have control of how a user would use your app. For example, your app might be used on a TV or on a phone, or it might be used on a really modern screen with lots of pixels or on a really old phone with very few pixels. It might also be used in a windowed mode, it might be used in full-screen, or it might use a very weird ratio—that can also happen.

00:28 Now, there’s also the case for different languages, where some languages just have longer words than other languages and your GUI should account for all of that automatically.

00:37 You could try to implement all of this yourself, and PyQt has a couple of methods to help you with that. They are called .move() and .resize(), and those two methods would allow you to resize and to move around any widget on the screen.

00:51 And then you could use .resizeEvent() to check if the window is being resized. And this would be a doable solution. However, it would also be incredibly labor-intensive and would require you to do a ton of extra work. But fortunately, you don’t really have to do that, because PyQt has lots of in-built tools that help you to lay out your widgets in a responsive manner, and those are called layout managers. Layout managers are actually fairly simple.

01:18 All they do is that they take a specific widget and they place it in a certain way on your window. Let me give an example. I think this is going to explain it the best.

01:27 One of the simplest layout managers in PyQt is called the QHBoxLayout. All that this one does is that it puts all the widgets you put inside of it in a horizontal layout so that they’re all next to each other.

01:40 This layout is responsive by default, so if you make the window larger or smaller, all of your widgets are going to scale along with the window. So you don’t have to add any extra code—all of this happens automatically.

01:53 And a very similar layout manager is called QVBoxLayout, which lays out all of your widgets in a vertical manner. So you could make your GUI shorter or taller and all of your widgets would still be arranged in the proper manner.

02:07 And another really useful layout manager is called QGridLayout, and this one is giving you a 2D space where you can lay out different widgets, which is super useful if you have more complex layouts in mind.

02:18 And then another one for now is called QFormLayout, and this one effectively gives you two columns where you can place elements like they would be in a form. So you would have a label and then an input field, for example. And those would be the most basic layout managers.

02:33 There are a couple more that we are going to see later, but for now let’s stick with those. And once we have those covered, we are going to get more advanced layout managers.

02:43 But before we get into our first example, let’s first talk about how to use layout managers in theory. There are there steps that you have to follow. Number one is you have to create the layout itself.

02:54 And this one has to be stored in a variable, which is, well, pretty straightforward. The next step is you have to add widgets to the layout. So for example, if you have two buttons as a widget, you have to add those two to the layout itself, which happens with .addWidget().

03:10 And the argument would have to be the widget you want to add. There could also be a couple more arguments in here, and we are going to cover those in just a bit. And for the final step, you have to assign the layout to the parent widget, which happens with .setLayout() and then you add the layout as the argument.

03:28 So effectively, what we are doing is we take our main window. In there, we create a layout and to this layout we are going to add widgets. And then the layout determines how the widgets are going to be laid out. All right! With that covered, let’s actually create our first example, where we are going to create a horizontally scaling GUI.