파이썬(Python) PyQt5 QVBoxLayout, QHBoxLayout 레이아웃 사용방법

PyQt5는 파이썬에서 GUI(Graphical User Interface)를 개발할 수 있게 해주는 강력한 라이브러리입니다. 이 라이브러리에서는 다양한 레이아웃 클래스를 제공하여 위젯을 정렬하고 배치하는 데 도움을 줍니다.

 

그 중에서도 QVBoxLayout과 QHBoxLayout은 매우 유용한 레이아웃 클래스입니다. 이 두 레이아웃은 각각 수직 및 수평 방향으로 위젯을 배치하는 데 사용됩니다.

QVBoxLayout과 QHBoxLayout의 개념

QVBoxLayout

QVBoxLayout은 위젯을 수직 방향으로 나열하는 레이아웃입니다. 이 레이아웃을 사용하면 위젯들이 상단에서 하단으로 차례대로 배치됩니다. PyQt5에서 제공하는 레이아웃 매니저 중 가장 많이 사용되는 클래스 중 하나로, 윈도우 크기가 변경되더라도 내부 위젯들이 자동으로 조정되기 때문에 유연한 UI 구성을 할 수 있습니다.

QHBoxLayout

QHBoxLayout은 위젯을 수평 방향으로 나열하는 레이아웃입니다. 이 레이아웃을 사용하면 위젯들이 왼쪽에서 오른쪽으로 차례대로 배치됩니다. QVBoxLayout과 마찬가지로 윈도우 크기가 변경되더라도 내부 위젯들의 위치와 크기가 자동으로 조정됩니다.

QVBoxLayout과 QHBoxLayout의 기본 사용법

QVBoxLayout 예제

다음은 QVBoxLayout을 사용하여 텍스트 입력 창(QTextEdit)과 버튼(QPushButton)을 수직으로 배치하는 간단한 예제입니다.

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QTextEdit, QPushButton, QVBoxLayout

class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.setupUI()

    def setupUI(self):
        self.setGeometry(800, 200, 300, 300)  # 윈도우 위치와 크기 설정
        self.textEdit = QTextEdit()           # 텍스트 입력 창 생성
        self.pushButton = QPushButton('저장')  # 버튼 생성

        layout = QVBoxLayout()                # QVBoxLayout 생성
        layout.addWidget(self.textEdit)       # 텍스트 입력 창 추가
        layout.addWidget(self.pushButton)     # 버튼 추가

        self.setLayout(layout)                # 레이아웃 설정

if __name__ == "__main__":
    app = QApplication(sys.argv)
    mywindow = MyWindow()
    mywindow.show()
    app.exec_()

위 코드를 실행하면 텍스트 입력 창과 버튼이 수직으로 나열된 UI가 나타납니다. 이때 윈도우의 크기를 변경해도 텍스트 입력 창과 버튼의 위치는 자동으로 조정됩니다.

QHBoxLayout 예제

다음은 QHBoxLayout을 사용하여 두 개의 버튼을 수평으로 배치하는 예제입니다.

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QHBoxLayout

class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.setupUI()

    def setupUI(self):
        self.setGeometry(800, 200, 300, 100)  # 윈도우 위치와 크기 설정
        self.pushButton1 = QPushButton("Button1")  # 첫 번째 버튼 생성
        self.pushButton2 = QPushButton("Button2")  # 두 번째 버튼 생성

        layout = QHBoxLayout()                # QHBoxLayout 생성
        layout.addWidget(self.pushButton1)    # 첫 번째 버튼 추가
        layout.addWidget(self.pushButton2)    # 두 번째 버튼 추가

        self.setLayout(layout)                # 레이아웃 설정

if __name__ == "__main__":
    app = QApplication(sys.argv)
    mywindow = MyWindow()
    mywindow.show()
    app.exec_()

위 코드를 실행하면 두 개의 버튼이 가로로 나란히 배치된 UI가 나타납니다. 마찬가지로 윈도우 크기를 변경해도 버튼들의 위치는 자동으로 조정됩니다.

QVBoxLayout과 QHBoxLayout의 혼합 사용

PyQt5에서는 하나의 레이아웃 안에 또 다른 레이아웃을 포함시킬 수 있습니다. 이를 통해 보다 복잡한 UI를 구성할 수 있습니다. 예를 들어, 세로로 정렬된 두 개의 버튼 그룹을 가로로 배치하려면 다음과 같은 방식으로 코드를 작성할 수 있습니다.

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout, QHBoxLayout

class MyWindow(QWidget):
    def __init__(self):
        super().__init__()
        self.setupUI()

    def setupUI(self):
        self.setGeometry(800, 200, 400, 200)

        # 첫 번째 세로 레이아웃 (버튼1, 버튼2)
        vbox1 = QVBoxLayout()
        vbox1.addWidget(QPushButton("버튼 1"))
        vbox1.addWidget(QPushButton("버튼 2"))

        # 두 번째 세로 레이아웃 (버튼3, 버튼4)
        vbox2 = QVBoxLayout()
        vbox2.addWidget(QPushButton("버튼 3"))
        vbox2.addWidget(QPushButton("버튼 4"))

        # 가로 레이아웃에 세로 레이아웃 추가
        hbox = QHBoxLayout()
        hbox.addLayout(vbox1)
        hbox.addLayout(vbox2)

        self.setLayout(hbox)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    mywindow = MyWindow()
    mywindow.show()
    app.exec_()

위 코드를 실행하면 두 개의 세로 그룹(버튼1-버튼2와 버튼3-버튼4)이 가로로 나란히 배치된 UI가 나타납니다. 이처럼 QVBoxLayout과 QHBoxLayout을 함께 사용하면 복잡한 사용자 인터페이스를 쉽게 구성할 수 있습니다.

Stretch Factor와 여백 설정

PyQt5에서는 addStretch() 메서드를 이용해 위젯 사이에 빈 공간을 추가할 수 있으며, setSpacing() 메서드를 통해 위젯 간의 간격을 설정할 수 있습니다. 이를 통해 더욱 유연한 UI 구성이 가능합니다.

Stretch Factor 적용 예시

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QHBoxLayout, QVBoxLayout

class MyApp(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        okButton = QPushButton('OK')
        cancelButton = QPushButton('Cancel')

        hbox = QHBoxLayout()                  # 가로 박스 레이아웃 생성
        hbox.addStretch(1)                    # 왼쪽 여백 추가
        hbox.addWidget(okButton)              # OK 버튼 추가
        hbox.addWidget(cancelButton)          # Cancel 버튼 추가
        hbox.addStretch(1)                    # 오른쪽 여백 추가

        vbox = QVBoxLayout()                  # 세로 박스 레이아웃 생성
        vbox.addStretch(3)                    # 상단 여백 추가
        vbox.addLayout(hbox)                  # 가로 박스 레이아웃 삽입
        vbox.addStretch(1)                    # 하단 여백 추가

        self.setLayout(vbox)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = MyApp()
    ex.show()
    sys.exit(app.exec_())

위 코드는 OK와 Cancel 버튼을 가운데 아래쪽에 배치하며 좌우에 동일한 빈 공간을 제공합니다. 또한 상단과 하단에 비율에 맞는 여백을 주어 창 크기가 변해도 비율에 맞게 빈 공간이 유지됩니다.

간격 설정 예시

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout

class Example(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()

    def initUI(self):
        btn1 = QPushButton("버튼 1")
        btn2 = QPushButton("버튼 2")

        layout = QVBoxLayout()                # 세로 박스 레이아웃 생성
        layout.addWidget(btn1)
        layout.addWidget(btn2)

        layout.setSpacing(20)                 # 위젯 간 간격 설정 (20px)

        self.setLayout(layout)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Example()
    ex.show()
    sys.exit(app.exec_())

위 코드는 두 개의 버튼 사이에 20픽셀 간격을 적용하여 보다 깔끔한 UI를 구성합니다.

 

결론

PyQt5에서 제공하는 QVBoxLayout과 QHBoxLayout은 매우 유용한 도구입니다. 이들을 활용하면 다양한 형태의 GUI를 쉽게 구성할 수 있으며 윈도우 크기가 변경되더라도 자동으로 조정되는 유연성을 제공합니다. 또한 addStretch()와 setSpacing() 같은 기능들을 통해 더욱 정교하고 깔끔한 인터페이스를 만들 수 있습니다.