QButton layout in QGroupBox for making UI in PyQt5

Question

I have QButtons arranged as first row has four buttons and second row has five buttons. My code is developed using PyQt5 in Python2.7.

from PyQt5 import QtCore, QtGui, QtWidgets
import cv2
import time
import face_recognition.api as face_recognition

class Thread(QtCore.QThread):
    changePixmap = QtCore.pyqtSignal(QtGui.QImage)
    scaled_size = QtCore.QSize(640, 480)

    def run(self):
        cap = cv2.VideoCapture(1)
        cap.set(3,1280);
        cap.set(4,1024);
        time.sleep(2)
        while True:
            ret, frame = cap.read()                  
            if ret:
                r=1
                face_locations=[]
                rescaleSize=480
                if(frame.shape[0] > 480 and frame.shape[1] > 640):
                    r = rescaleSize / float(frame.shape[0])
                    dim = (int(frame.shape[1] * r), rescaleSize)
                    face_locations = face_recognition.face_locations(cv2.resize(frame, dim, fx=0.0, fy=0.0))
                else:
                    face_locations = face_recognition.face_locations(frame)
                for face_location in face_locations:  
                    top, right, bottom, left = face_location
                    cv2.rectangle(frame,(int(right/r),int(top/r)),(int(left/r),int(bottom/r)),(0,255,0),2)
                rgbImage = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
                convertToQtFormat = QtGui.QImage(rgbImage.data, rgbImage.shape[1], rgbImage.shape[0], QtGui.QImage.Format_RGB888)
                p = convertToQtFormat.scaled(self.scaled_size, QtCore.Qt.KeepAspectRatio)
                self.changePixmap.emit(p)

    def scaled(self, scaled_size):
        self.scaled_size = scaled_size


class PlayStreaming(QtWidgets.QLabel):
    reSize = QtCore.pyqtSignal(QtCore.QSize)
    def __init__(self):
        super(PlayStreaming, self).__init__()
        self.initUI()

    @QtCore.pyqtSlot(QtGui.QImage)
    def setImage(self, image):
        self.label.setPixmap(QtGui.QPixmap.fromImage(image))

    def initUI(self):
        self.setWindowTitle("Image")
        # create a label
        self.label = QtWidgets.QLabel(self)
        th = Thread(self)
        th.changePixmap.connect(self.setImage)
        self.reSize.connect(th.scaled)
        th.start()
        lay = QtWidgets.QVBoxLayout(self)
        lay.addWidget(self.label, alignment=QtCore.Qt.AlignCenter)

    def resizeEvent(self, event):
        self.reSize.emit(self.size())


class UIWidget(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super(UIWidget, self).__init__(parent)
        # Initialize tab screen
        self.tabs = QtWidgets.QTabWidget()
        self.tab1 = QtWidgets.QWidget()
        self.tab2 = QtWidgets.QWidget()
        self.tab3 = QtWidgets.QWidget()

        # Add tabs
        self.tabs.addTab(self.tab1, "Face")
        self.tabs.addTab(self.tab2, "Human")
        self.tabs.addTab(self.tab3, "Vehicle")

        # Create first tab
        self.createGridLayout()
        self.tab1.layout = QtWidgets.QVBoxLayout()
        self.display = PlayStreaming()
        self.tab1.layout.addWidget(self.display, stretch=1)
        self.tab1.layout.addWidget(self.horizontalGroupBox)
        self.tab1.setLayout(self.tab1.layout)

        # Add tabs to widget
        layout = QtWidgets.QVBoxLayout(self)
        layout.addWidget(self.tabs)

    def createGridLayout(self):
        self.horizontalGroupBox = QtWidgets.QGroupBox("")
        self.horizontalGroupBox.setStyleSheet("QGroupBox{ background-color: red; border: none;}")  
        layout = QtWidgets.QGridLayout()
        layout.addWidget(QtWidgets.QPushButton('Test'),0,0) 
        layout.addWidget(QtWidgets.QPushButton('Run'),0,1) 
        layout.addWidget(QtWidgets.QPushButton('RescaleUp'),0,2) 
        layout.addWidget(QtWidgets.QPushButton('RescaleDown'),0,3) 
        layout.addWidget(QtWidgets.QPushButton('Set Faces'),1,0) 
        layout.addWidget(QtWidgets.QPushButton('FacePose'),1,1)
        layout.addWidget(QtWidgets.QPushButton('Gender'),1,2) 
        layout.addWidget(QtWidgets.QPushButton('Age'),1,3)
        layout.addWidget(QtWidgets.QPushButton('Recognize'),1,4)
        self.horizontalGroupBox.setLayout(layout)



if __name__ == '__main__':
    import sys

    app = QtWidgets.QApplication(sys.argv)
    w = UIWidget()
    w.resize(1000, 800)
    w.show()
    sys.exit(app.exec_())

I like to make the first four buttons are equally spaced and the second fuve buttons are also equally spaced. For that, changes are made as

class UIWidget(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super(UIWidget, self).__init__(parent)
        # Initialize tab screen
        self.tabs = QtWidgets.QTabWidget()
        self.tab1 = QtWidgets.QWidget()
        self.tab2 = QtWidgets.QWidget()
        self.tab3 = QtWidgets.QWidget()

        # Add tabs
        self.tabs.addTab(self.tab1, "Face")
        self.tabs.addTab(self.tab2, "Human")
        self.tabs.addTab(self.tab3, "Vehicle")

        # Create first tab
        self.createGridLayout()
        self.tab1.layout = QtWidgets.QVBoxLayout()
        self.display = PlayStreaming()
        self.tab1.layout.addWidget(self.display, stretch=1)
        self.tab1.layout.addWidget(self.horizontalGroupBox)
        self.tab1.layout.addWidget(self.horizontalGroupBox2)
        self.tab1.setLayout(self.tab1.layout)

        # Add tabs to widget
        layout = QtWidgets.QVBoxLayout(self)
        layout.addWidget(self.tabs)

    def createGridLayout(self):
        self.horizontalGroupBox = QtWidgets.QGroupBox("")
        self.horizontalGroupBox.setStyleSheet("QGroupBox{ background-color: red; border: none;}")  
        layout = QtWidgets.QGridLayout()
        layout.addWidget(QtWidgets.QPushButton('Test'),0,0) 
        layout.addWidget(QtWidgets.QPushButton('Run'),0,1) 
        layout.addWidget(QtWidgets.QPushButton('RescaleUp'),0,2) 
        layout.addWidget(QtWidgets.QPushButton('RescaleDown'),0,3) 
        self.horizontalGroupBox.setLayout(layout)
        self.horizontalGroupBox2 = QtWidgets.QGroupBox("")
        self.horizontalGroupBox2.setStyleSheet("QGroupBox{ background-color: red; border: none;}")  
        layout = QtWidgets.QGridLayout()        
        layout.addWidget(QtWidgets.QPushButton('Set Faces'),0,0) 
        layout.addWidget(QtWidgets.QPushButton('FacePose'),0,1)
        layout.addWidget(QtWidgets.QPushButton('Gender'),0,2) 
        layout.addWidget(QtWidgets.QPushButton('Age'),0,3)
        layout.addWidget(QtWidgets.QPushButton('Recognize'),0,4)
        self.horizontalGroupBox2.setLayout(layout)

Then there is a gap in between two QGroupBoxes.

How can I make so that there is no gap and first row and second row have equally spaced buttons?

Answer 1

You must use 1 QVBoxLayout next to 2 QHBoxLayout s:

def createGridLayout(self):
    self.horizontalGroupBox = QtWidgets.QGroupBox("")
    self.horizontalGroupBox.setStyleSheet("QGroupBox{ background-color: red; border: none;}")  

    hlay1 = QtWidgets.QHBoxLayout()
    hlay1.addWidget(QtWidgets.QPushButton('Test')) 
    hlay1.addWidget(QtWidgets.QPushButton('Run')) 
    hlay1.addWidget(QtWidgets.QPushButton('RescaleUp')) 
    hlay1.addWidget(QtWidgets.QPushButton('RescaleDown')) 

    hlay2 = QtWidgets.QHBoxLayout()
    hlay2.addWidget(QtWidgets.QPushButton('Set Faces')) 
    hlay2.addWidget(QtWidgets.QPushButton('FacePose'))
    hlay2.addWidget(QtWidgets.QPushButton('Gender')) 
    hlay2.addWidget(QtWidgets.QPushButton('Age'))
    hlay2.addWidget(QtWidgets.QPushButton('Recognize'))

    layout = QtWidgets.QVBoxLayout()        
    layout.addLayout(hlay1)
    layout.addLayout(hlay2)
    self.horizontalGroupBox.setLayout(layout)