Creating a Horizontal Layout

00:00 Now that we have gotten the theory out of the way, let’s create our very first GUI. Here’s what we are going to do. We are going to use the QHBoxLayout manager to create a horizontally scaling GUI. This layout manager works in a very simple way.

00:15 All it really does is it takes a couple of widgets and places them next to each other, with the first widget you add being on the left and each additional widget being further to the right.

00:26 The important part for this layout manager is that it takes the entire horizontal space of the parent container. And each of the children widgets inside of it is going to get an equal amount of space—at least by default. You can make some changes to this later on.

00:41 And that’s pretty much all we need to understand how this works, so let’s jump right into our code and let’s have a look at this!

00:49 Here I am in my code and I already have a couple of lines that I use to create a basic PyQt application. If I run this code, all I get is an empty window that I can scale, but I can’t really do anything else with it—well, besides closing it. Okay.

01:06 Let’s talk about this very briefly and then we are going to add a layout to it. We are starting by importing sys and importing the basic PyQt widgets.

01:15 So, QApplication is what we need to run PyQt, QHBoxLayout is the layout manager we are going to use in just a second, and then QPushButton and QWidget are the two widgets we are actually going to use, with QWidget being the parent container and QPushButton being the button we want to add.

01:33 And then below that we are going to create our Window class that is inheriting from QWidget. And right now, this one doesn’t really do anything.

01:41 We have only given it a title, but nothing else. And then below that, we have an if statement that if __name__ is equal to "__main__", so we make sure that we are only running this code. Now, since we only have a single file, this isn’t strictly necessary, but it is good practice and it doesn’t really do any harm, so let’s just use it.

02:02 And inside of this if statement, we first create our QApplication app, and then we are creating an instance of our Window class.

02:10 Then we are showing the Window class, and then we make sure we are able to close it later on. And that is literally all we need to know for our basic PyQt application.

02:20 Now again, if you have no idea what I just talked about, check out the PyQt learning path. You can find the link to it in the description for this lesson.

02:29 Okay! Now let’s say you want to add a layout to this. For that, you have to go to our main class. We first have to create an instance of our QHBoxLayout.

02:40 Let me actually type this in a comment, # QHBoxLayout instance. So what you need to do is to first create a variable. In my case, I’m calling this layout. And this one needs an instance of QHBoxLayout.

02:56 And all you need to create an instance is the keyword QHBoxLayout().

03:04 And what we have to do now is to add widgets to it. So, # Add widgets to the layout, just in your comments so we know what we’re doing.

03:13 And all you have to do to add a widget to the layout is to get the layout variable or the instance where we stored it and then .addWidget().

03:22 And in here, you could add essentially any kind of widget as the first argument. In my case, I want a QPushButton. And for this one, we need one argument with the name of the button. In my case, I’m going to call it 'Left-Most'.

03:38 And this would be giving us one button, but I want to have three buttons in total. So let me duplicate this line twice. The second button I want to call 'Center' and the third button I’m going to call 'Right-Most'.

03:52 And here’s an important thing about the QHBoxLayout. When you add widgets to it, the first widget is always going to be added on the left with the second widget being added to the right of that, and then each additional widget being further to the right. You’re going to see in a second what I mean. So now if I run the code, we still can’t see anything.

04:13 And the reason for that is that this layout here is not being set as the layout for this QWidget, our parent widget.

04:21 And all we have to do for that is to set the layout on the application window.

04:30 And really, all we have to do for that is to get our parent widget, so self, and then .setLayout(). And now as an argument, we pass in our layout. And now if I run this,

04:45 we can see our three buttons that work pretty well! And we can even scale it up and down, and it is still going to work in exactly the same way. So, this one is working really well.

04:58 And just to go over it one more time. QWidget is our parent widget, so this is the main window of our application. Inside of that, we have a layout that is a QHBoxLayout.

05:09 This one lays out all of the widget in a horizontal way. And to that, we are going to add three different widgets. And finally, we are setting our layout to the layout of the parent widget. And with that, we have a basic horizontally scaling GUI.

05:25 Now, you can refine this a little bit more. When you add the widget, right now we only added a single argument, but you could add two more arguments to this.

05:35 So when you add a widget, you can add three arguments at the most, but you have to add one argument. So the first argument always has to be the widget you want to add.

05:45 The second argument would be the stretch factor, and this would be how much space the widget is going to take up. The third one is going to be the alignment, and this one would set, well, the alignment of the widget. And just to keep things simple for now, let’s just focus on the stretch property. This one is really simple.

06:03 By default, all of the widgets have the same width, and that is because we didn’t specify a stretch factor for each of them. But if we did, we could influence the width of each of the different widgets in quite a flexible manner, so let’s check that one out!

06:17 Here I am back in my code, and let me add another argument to each of them. By default, the stretch factor for all of them is 0. So if I run the code now, nothing should change. And it doesn’t. Good to know!

06:31 But now let’s say I want my right-most widget to be larger than the other two. So I change the stretch factor to, let’s say, 2. And now if I run the code and I scale it, only the right one is going to scale up, because this one has a much greater scale factor.

06:53 And what I could also do is change the center one to 1, and now if I run the code, both the center and the right-most widget are going to scale, although the center one only half as much as the right-most button. And this is working quite well!

07:10 That way, you have a lot of control over how each of the widgets is going to scale and how large it is going to be, which is really powerful. All right! With that, we have covered our first widget.

07:24 In the next video, we are going to look at a vertical layout.