Using Layout Managers

00:00 Layout Managers Now that you know about widgets and how they are used to build GUIs, you need to know how to arrange a set of widgets so that your GUI is both coherent and functional.

00:12 In PyQt, you’ll find a few techniques for laying out the widgets on a formal window. For instance, you can use the resize() and move() methods to give widgets absolute sizes and positions, but this technique has some drawbacks.

00:26 You’d have to do many manual calculations to determine the correct size and position of every widget, do more calculations to respond to window resize events, and redo most of your calculations when the window’s layout changes in any way.

00:41 The most effective and recommended technique is to use PyQt layout managers. They’ll increase your productivity, mitigate the risk of errors, and improve your code’s maintainability. Layout managers are classes that allow you to size and position your widgets on the application’s window or form.

01:00 They automatically adapt to resize events and GUI changes, controlling the size and position of all their child widgets. Layout managers can also help you develop internationalized applications where the target natural language is more verbose than the original one, but this feature can fail sometimes with particularly wordy languages.

01:22 PyQt provides four basic layout manager classes, QHBoxLayout, QVBoxLayout, QGridLayout, and QFormLayout, and you’ll be seeing all of them.

01:35 The first layout manager class QHBoxLayout arranges widgets horizontally from left to right as seen on screen. In the horizontal layout, the widgets will appear one next to the other starting from the left. On screen, you can see code that uses QHBoxLayout to arrange three buttons horizontally.

01:55 First, the imports are performed with QHBoxLayout being the most important one for this example.

02:09 The application and window are set up as you saw in your first application.

02:19 Next, you create a QHBoxLayout object called layout. Then you add three buttons to layout by calling the addWidget() method.

02:40 Finally, you set layout as your window’s layout with setLayout.

02:55 When you run the script from the command line, you should see a window similar to the one seen on screen. You should see three buttons in a horizontal arrangement.

03:04 The buttons are shown from left to right in the order that you added them in your code. The next layout manager class is QVBoxLayout, which arranges widgets vertically from top to bottom.

03:17 Each new widget will appear beneath the previous one. This layout allows you to construct vertical layouts and organize your widgets from top to bottom in your GUI. Start with a copy of the previous code for QHBoxLayout and modify it as seen to use QVBoxLayout.

03:36 First, the import is changed to QVBoxLayout.

03:45 The window title is updated,

03:50 and the layout is updated to use QVBoxLayout. Finally, the text shown in the QPushButtons is updated to reflect their new positions.

04:09 When you run this code, you’ll get a window showing the three buttons in a vertical arrangement with them appearing in the order, they were added in the code from top to bottom.

04:21 The third layout manager is QGridLayout. This class arranges widgets in a grid of rows and columns. Each widget has a relative position on the grid.

04:32 You can define a widget position with a pair of coordinates as seen on screen. Each coordinate must be an integer number. The coordinates define which cell on a grid a given widget will occupy. QGridLayout takes the available space, divides it up into rows and columns, and puts each child widget into its own cell.

04:53 Start by making a copy of the previous code and then make the changes seen on screen. First, the imports are updated to use QGridLayout. Next, the window title is updated and the layout change to use QGridLayout.

05:16 The old layout additions are removed

05:22 and then the new additions for the layout are added.

05:28 Note that the second and third arguments that you passed addWidget are integer numbers, defining each widget’s position on the grid, which are zero-indexed starting from the top left.

05:43 Also, note the difference in the final line. You passed two more arguments to addWidget. These arguments are row span and column span, and they’re the fourth and fifth arguments passed to the function.

05:55 You can use to make a widget occupy more than one row or column, and you’ll see the effect of this when you run the code. Running this code from the command line, you should see a window that looks similar to the one on screen.

06:10 Here you can see the widgets arranged in a grid of rows and columns, and the last widget is occupying two columns as specified on line 25. The last layout manager that you’ll learn about is QFormLayout.

06:25 This class arranges widgets in a two-column layout. The first column usually displays messages in labels. The second column generally contains a widget which allows input such as QLineEdit, QComboBox, and so on.

06:39 These allow the user to enter or edit data regarding the information in the first column. Make a copy of the previous code and save it as flayout.py First, the imports are changed

06:59 and then the window title is altered. The layout is updated to use QFormLayout, and then the content from the previous file is removed. Now new content is added to the layout.

07:16 QFormLayout has a convenient method called addRow. You can use this method to add a two widget row to the layout. The first argument to addRow should be a label or string, and the second argument can be any widget that allows the user to enter or edit data.

07:32 In this specific example, you are using QLineEdit. When you run the code, you’ll see a window like the one on screen. You can enter information into each line, moving between fields with the Tab key.

07:51 So now that you’ve learned about layouts, in the next section of the course, you’ll take a look at one of PyQt’s application styles, dialogs.