Creating a Multipage Tab Layout

00:00 In this video, we are going to learn how to use tabs in our GUI. We are still only showing specific information, but now instead of using a page to select different widgets, we are going to use tabs. And this works in a very similar way compared to the QStackedLayout. In fact, it’s actually easier.

00:17 We don’t need any signals to make this entire thing work, so it’s quite a simple thing to set up. Let’s talk about how it works. The first step, like with any other layout manager, is we have to create an instance of the layout. And this happens again in the same way.

00:33 We are going to store our layout manager in a variable. And then to this layout manager, we have to add tabs, which happens with the method .addTab(). And in this method, we can either add two or three arguments depending on what you want to do. In the most minimal setup, the first argument would be the widget you want to add, which is most likely to be a QWidget with its own layout and its own widgets.

00:56 And the second argument is going to be the name of the tab, so the label, effectively. Now you could make this a little bit more complex by adding a widget, an icon, and then a label, so you would add an icon to the tab page. And the icon would have to be a QIcon object—just be aware of that, but we are not going to use it anyway.

01:14 But that is literally it. All we really have to do is to create a couple of QWidgets with their own widgets themselves, and then add these widgets to our QTabWidget manager.

01:23 Let’s actually implement all of this! It’s pretty straightforward. All right, so here you can see the code. We are still importing sys and a couple of PyQt5 widgets.

01:33 Then we have our class widget, it has a title and a certain size, and we run the entire thing. Same setup as usual.

01:40 Now I want to create, again… # Create a top-level layout. In here, I am just going to create a variable called layout, and this one is going to be a QVBoxLayout(). And this layout, you just need to set as the layout for the entire window—the same thing we’ve seen already a couple of times.

02:03 I hope that makes sense by now. After this, let me create another comment. I want to create the tab widget with two tabs. And in there, let’s create another variable. Let’s call it tabs.

02:18 And this one needs to be a QTabWidget(). Again, no arguments. Now to this, all you have to do is add a tab—very similar compared to .addWidget() or .addLayout().

02:32 And in here, you have to add two things: a widget and a label. The label is the easy part. Let’s call it 'General'. Now, before I explain how we are going to add the widget, let’s first add a second tab.

02:44 So you just need to duplicate this line, and let’s call this one 'Network' so we follow the example I showed earlier. And this one would be… let’s call it widget2. Now this widget and this widget2 have to be widgets themselves, ideally QWidgets that contain their own widgets.

03:01 And we could approach this in the same way we approached the QStackedWidget, where we write more and more code inside of our .__init__() method and then add the QWidget to both of these tabs. And this would be possible, but it would also mean quite messy code.

03:18 And what you want to be aware of is that the .__init__() method shouldn’t really be that crowded, and there is a much more elegant way to approach it.

03:26 So instead, what we are going to do is that instead of writing all of the code inside of our .__init__() method, we are going to create two methods—one for each of these pages.

03:36 That way, we have much better organized code. Let’s work on the name first. The first one, let’s call it .generalTabUI(), and we want to run this function. And for the second one, this has to be self and let’s call this .networkTabUI().

03:56 And we also want to execute this function. All right! Now let’s create these methods. I want def generalTabUI(): and we need self as an argument. Okay.

04:10 Now in here, let me add a proper comment to this—one, two, three. This is going to be """create the General page UI,"""

04:20 And all we really have to do in here is to create a QWidget with a layout and with a couple of widgets inside of that QWidget. And after that’s done, we are going to return the QWidget. So when this line here is run, we have a QWidget that is being returned that is then added to the tab. And let’s call this generalTab.

04:41 What you need for this one is just a QWidget(), and make sure to call it.

04:47 Then you have to create another layout variable in the local scope,

04:51 and this one is going to be a QVBoxLayout(). So, this layout here is going to be the layout for this generalTab in just a second. And since it’s a local variable, this layout and this layout are not going to interfere with each other, so the scope is going to help us quite a bit in here. All right!

05:08 Now all you have to do is to use layout and add a widget to it, which, in this case, let’s go with a QCheckBox().

05:17 Let’s just call it 'General Option 1'. It doesn’t really matter what you put in here.

05:23 And now we can duplicate this just to have a second one, and call it 'General Option 2'. And after this, all you need to do is get the generalTab and set the layout, and it needs to be the layout inside of this local scope.

05:38 And now the really important part is you want to return the generalTab. So the QWidget you created here, and that has the layout of the generalTab that contains all of the widgets.

05:49 And that way, whenever you run this .generalTabUI(), the whole new widget with its own widgets and layout, and you can just minimize the function and not worry about it again.

06:00 Much cleaner. And with that covered, you can create the other method that is called .networkTabUI(). And again, you need self—don’t forget that. Also don’t forget the colon.

06:15 And now we are going to create quite a similar setup compared to the .generalTabUI(). So what I would recommend, just copy the entire thing so you save a bit of writing. What you could also do, if they are too similar, you can just use a couple of parameters to use arguments to change this.

06:32 That would also be possible—but in this case, not really needed. So let’s change 'General' to 'Network', and let’s just update the variable names a tiny bit so they make a bit more sense.

06:46 So it is going to be networkTab, it’s still going to be a QVBoxLayout(), and let’s call this 'Network Option 1' and 'Network Option 2'.

06:58 And then we are going to need this one, it also needs a different name, so networkTab. And we also want to return the networkTab, ideally spelled correctly. And… okay!

07:13 This should actually work! So let’s minimize both of these methods, and now literally all that’s happening is that we are going to create a QTabWidget, we are going to add two tabs to it, and the actual widget inside of this tab is going to be created inside of these two methods. So we don’t have to worry about them inside of our .__init__() method.

07:35 And there’s one more thing that you really shouldn’t forget—same for me—that you have to add this QTabWidget to this layout here. So don’t forget that part.

07:46 So, layout.addWidget(tabs).

07:53 And now, let’s try it!

07:56 And I’m getting an error that I have made a typo. This should be tabs, not tab. And now let’s run the entire thing, and now it’s working. And I can still scale it, and now I have two tabs that I can switch between. And if I tick them, the ticks are going to be maintained. So this one is working pretty well.

08:18 So, this would be another single-page layout that works really good and gives you lots of different options to lay out your GUI! So, I hope that was helpful! In the next lesson, we can conclude the entire course.

08:31 I will see you then!