Introduction

The layout is a most important part in a GUI design. It encompases the look and design of the overall GUI. Layout defines a rule on the placement of widgets. In this post, we will look at the available layouts at our disposal.

Free Layout

It is possible to create each component and to place it exactly by it’s coordinates. In this layout, we will only populate the createComponents() function. We have to create a widget and use the move method. The move method places the widget based on the X and Y coordinates. On the one hand, the X coordinate starts from left to right; on the other hand, the Y coordinate starts from top to bottom. You can play around with the coordinates using the code below:

#!/usr/bin/env python
# -*- coding: utf-8 -*-
import sys
from PySide2 import QtWidgets


class MainWindow(QtWidgets.QWidget):
    
    def __init__(self, *args):
        QtWidgets.QWidget.__init__(self, *args)
        self.createMenu()
        self.createComponents()
        self.createLayout()
        self.createConnects()
        self.setWindowTitle(self.tr("Name"))
        self.resize(500, 500)
		
    def createMenu(self):
	    pass
		
    def createLayout(self):
        pass
        
    def createComponents(self):
        # Line Edit 1
        self.nameLabel = QtWidgets.QLabel(self)
        self.nameLabel.setText('#1')
        self.line1 = QtWidgets.QLineEdit(self)
        self.line1.move(80, 0)
        self.line1.resize(200, 32)
        self.nameLabel.move(20, 20)
		
		# Line Edit 2
        self.nameLabel2 = QtWidgets.QLabel(self)
        self.nameLabel2.setText('#2')
        self.line2 = QtWidgets.QLineEdit(self)
        self.line2.move(80, 60)
        self.line2.resize(200, 32)
        self.nameLabel2.move(20, 60)
		
		# Line Edit 3
        self.nameLabel3 = QtWidgets.QLabel(self)
        self.nameLabel3.setText('#3')
        self.line3 = QtWidgets.QLineEdit(self)
        self.line3.move(80, 100)
        self.line3.resize(200, 32)
        self.nameLabel3.move(20, 100)
		
		# Line Edit 4
        self.nameLabel4 = QtWidgets.QLabel(self)
        self.nameLabel4.setText('#4')
        self.line4 = QtWidgets.QLineEdit(self)
        self.line4.move(80, 140)
        self.line4.resize(200, 32)
        self.nameLabel4.move(20, 140)
		
		# Button
        pybutton = QtWidgets.QPushButton('OK', self)
        pybutton.resize(200,32)
        pybutton.move(80, 200)
        
    def createConnects(self):
        pass

def main(argv):
    app = QtWidgets.QApplication(argv)
    mainwindow = MainWindow()
    mainwindow.show()
    sys.exit(app.exec_())
    
if __name__ == "__main__":
    main(sys.argv)

Horizontal and Vertical Layout

For simplicity sake, I will use a QLabel, a QLineEdit, and a QPushButton to demonstrate the horizontal and vertical layout. You can comment out the code either at Line 22 or 24 to tryout both the layouts.

#!/usr/bin/env python
# -*- coding: utf-8 -*-
import sys
from PySide2 import QtWidgets


class MainWindow(QtWidgets.QWidget):
    
    def __init__(self, *args):
        QtWidgets.QWidget.__init__(self, *args)
        self.createMenu()
        self.createComponents()
        self.createLayout()
        self.createConnects()
        self.setWindowTitle(self.tr("Name"))
		
    def createMenu(self):
	    pass
		
    def createLayout(self):
        # Horizontal Layout
        mainLayout = QtWidgets.QHBoxLayout()
        # Vertical Layout
        #mainLayout = QtWidgets.QVBoxLayout()
        mainLayout.addWidget(self.nameLabel)
        mainLayout.addWidget(self.line)
        mainLayout.addWidget(self.button)
        self.setLayout(mainLayout)
        
    def createComponents(self):
        self.nameLabel = QtWidgets.QLabel(self)
        self.nameLabel.setText('Name')
        self.line = QtWidgets.QLineEdit(self)
        self.button = QtWidgets.QPushButton('OK', self)
        
    def createConnects(self):
        pass

def main(argv):
    app = QtWidgets.QApplication(argv)
    mainwindow = MainWindow()
    mainwindow.show()
    sys.exit(app.exec_())
    
if __name__ == "__main__":
    main(sys.argv)
Vertical Layout
Horizontal Layout

Grid Layout

Using the code from above, I will only update the content in the createLayout() function.

def createLayout(self):
        mainLayout = QtWidgets.QGridLayout()
        #addWidget(QWidget * widget, int row, int column, Qt::Alignment alignment = 0)
        # row 0 column 1
        mainLayout.addWidget(self.nameLabel, 0, 1)
        #addWidget(QWidget * widget, int fromRow, int fromColumn, int rowSpan, int columnSpan, Qt::Alignment alignment = 0)
        # row 1 column 1 rowspan 1 colspan 2
        mainLayout.addWidget(self.line, 1, 1, 1, 2)
        # row 2 column 0 rowspan 1 colspan 2
        mainLayout.addWidget(self.button, 2, 0, 1, 2)
        self.setLayout(mainLayout)
Grid Layout

Stacked Layout

In this example, we create two page that can switched using the setCurrentIndex() method by commenting out the command at Line 18 or Line 19.

    def createLayout(self):
        # declare a stacked layout
        mainLayout = QtWidgets.QStackedLayout()
        
        # First Page Layout
        mainLayout.addWidget(self.nameLabel)
        
        # Second Page Layout
        horizontalLayout = QtWidgets.QHBoxLayout()
        horizontalLayout.addWidget(self.line)
        horizontalLayout.addWidget(self.button)
        secondPage = QtWidgets.QWidget()
        secondPage.setLayout(horizontalLayout)
        mainLayout.addWidget(secondPage)
        
        self.setLayout(mainLayout)

        #mainLayout.setCurrentIndex(0)
        mainLayout.setCurrentIndex(1)
Page 1 – setCurrentIndex(0)
Page 2 – setCurrentIndex(1)

Tab Widget

    def createLayout(self):
        # define a tab widget
        tabWidget = QtWidgets.QTabWidget()
        # First Page Layout
        tabWidget.addTab(self.nameLabel, "Page 1")
        
        # Second Page Layout
        horizontalLayout = QtWidgets.QHBoxLayout()
        horizontalLayout.addWidget(self.line)
        horizontalLayout.addWidget(self.button)
        
        secondPage = QtWidgets.QWidget()
        secondPage.setLayout(horizontalLayout)
        tabWidget.addTab(secondPage, "Page 2")
        
        # define our base layout
        mainLayout = QtWidgets.QHBoxLayout()
        mainLayout.addWidget(tabWidget)
        
        self.setLayout(mainLayout)
Tab Page 1
Tab Page 2

Leave a comment

Your email address will not be published. Required fields are marked *