파이썬[Python GUI, PyQt5 Tutorial 011]레이아웃(LayOut) 알아보기 - 절대배치, 박스 레이아웃

파이썬[Python GUI, PyQt5 Tutorial 011]레이아웃(LayOut) 알아보기 -

절대배치, 박스 레이아웃

 

이번 포스팅에서는 각 위젯을 어떻게 배치할 것인가에 대해서 이야기를 해보고자 합니다. PyQt5에서는 다음과 같이 3가지 방법으로 레이아웃을 제공하고 있습니다. 

 

절대 위치  

박스(Box) 레이아웃

그리드(Grid) 레이아웃 - 다음 포스팅에서 진행 

 

그럼 위의 세가지 항목에 대해서 이야기를 해보면서 각 부분에 대해서 간단한 예제를 살펴보고자 합니다. 

 

절대 위치 

절대 위치를 이용할 경우, 대부분 move()메소드를 이용하여 각 위젯을 위치해줍니다. 그럼 다음 예시를 한번 살펴보겠습니다. 

import sys
 
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QPushButton
 
 
class QtGUI(QWidget):
 
 
    def __init__(self):
    
        super().__init__()
        
        self.setWindowTitle("Appia Qt GUI")
        
        self.resize(300, 300)
        
        self.intialL1 = 'First Label'
        
        self.intialL2 = 'Two Label'
 
        label1 = QLabel(self.intialL1 , self)
        
        label1.move(10,10)
 
        label2 = QLabel(self.intialL2, self)
        
        label2.move(10, 50)
 
        button = QPushButton('Button', self)
        
        button.move(50, 110)
        
        button.clicked.connect(lambda: self.print_label(button,label1))
 
        button1 = QPushButton('Button1', self)
        
        button1.move(50, 140)
        
        button1.clicked.connect(lambda: self.print_label(button1,label2))
 
        self.setWindowTitle("Appia Qt GUI")
        
        self.show()
 
 
    def print_label(self, vbutton,vlabel):
    
        vlabel.setText(vbutton.text())
 
 
if __name__ == '__main__':
 
    app = QApplication(sys.argv)
    
    ex = QtGUI()
    
    app.exec_()

 

위에서 버튼(QPushButton)과 라벨(QLabel)을 생성하여 move(행, 열)를 통해서 윈도우 창에서 위치를 해줍니다. 만약 위의 코드를 실행하면 다음과 같은 결과가 나옵니다. 

이 부분을 절대위치를 사용하실 경우에는 몇가지 항목들을 주의 하셔야 합니다. 위젯끼리 중첩될 수 있기 때문에 관련해서 항상 주의하셔야 합니다. 또한 창 위치를 벗어나게 위치하셨다면, 위젯이 표시 안되게 보일 수도 있습니다. 이러한 점들 때문에 몇몇 분들은 절대 위치를 활용한 방법들을 사용을 꺼려합니다. 

 

박스(Box) 레이아웃

박스(Box)레이아웃의 경우, 각 윈도우를 행/열을 각각 박스로 보고, 각 비율로 마진을 두고, 위젯을 배치하는 형태입니다. 먼저 코드와 실행 결과를 한번 살펴보겠습니다. 

import sys
 
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QPushButton, QHBoxLayout, QVBoxLayout
 
 
class QtGUI(QWidget):
 
    def __init__(self):
    
        super().__init__()
        
        self.setWindowTitle("Appia Qt GUI")
        
        self.resize(300, 300)
        
        self.intialL1 = 'First Label'
        
        self.intialL2 = 'Two Label'
 
        label1 = QLabel(self.intialL1 , self)
        
        #label1.move(10,10)
 
        label2 = QLabel(self.intialL2, self)
        
        #label2.move(10, 50)
 
        button = QPushButton('Button', self)
        
        #button.move(50, 110)
        
        button.clicked.connect(lambda: self.print_label(button,label1))
 
        button1 = QPushButton('Button1', self)
        
        #button1.move(50, 140)
        
        button1.clicked.connect(lambda: self.print_label(button1,label2))
 
        qhbox = QHBoxLayout()
        
        qhbox.addStretch(2)
        
        qhbox.addWidget(label1)
        
        qhbox.addWidget(button)
        
        qhbox.addStretch(1)
 
        qhbox1 = QHBoxLayout()
        
        qhbox1.addStretch(1)
        
        qhbox1.addWidget(label2)
        
        qhbox1.addWidget(button1)
        
        qhbox1.addStretch(2)
 
        qvbox = QVBoxLayout()
        
        qvbox.addStretch(1)
        
        qvbox.addLayout(qhbox)
        
        qvbox.addLayout(qhbox1)
        
        qvbox.addStretch(2)
 
        self.setLayout(qvbox)
 
        self.show()
 
 
    def print_label(self, vbutton,vlabel):
    
        vlabel.setText(vbutton.text())
 
 
if __name__ == '__main__':
 
    app = QApplication(sys.argv)
    
    ex = QtGUI()
    
    app.exec_()

 

위의 코드를 실행하면 다음과 같은 결과가 나옵니다. 

위의 부분을 설명하기 전에 다음그림을 먼저 살펴보면서 각각 설명을 드리도록 하겠습니다. 

여기에서 보이는 검정색 사각형이 윈도우입니다. 실제 각 QVBoxLayout 또는 QHBoxLayOut을 통해서 각 위젯을 배치할 때 addStretch를 통해 앞 부분 마진을 두고 위젯을 addwidget을 통해서 입력합니다. 그런후에 다시 addStretch를 통해 마진을 주는 형태입니다. 그리고 추가로  QHBoxLayout, QVBoxLayout 부분들에 위의 코드에서와 같이 import 해주셔야 합니다. 

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

 

그럼 코드에서 간단히 살펴보겠습니다. 

        qhbox = QHBoxLayout()
        
        qhbox.addStretch(2)
        
        qhbox.addWidget(label1)
        
        qhbox.addWidget(button)
        
        qhbox.addStretch(1)
 
        qhbox1 = QHBoxLayout()
        
        qhbox1.addStretch(1)
        
        qhbox1.addWidget(label2)
        
        qhbox1.addWidget(button1)
        
        qhbox1.addStretch(2)
 
        qvbox = QVBoxLayout()
        
        qvbox.addStretch(1)
        
        qvbox.addLayout(qhbox)
        
        qvbox.addLayout(qhbox1)
        
        qvbox.addStretch(2)
 
        self.setLayout(qvbox)

먼저 위의 그림에서 보이는 바와 같이 열에 대한 박스인 QHBoxLayout을 통해 위젯을 배치하겠습니다. qhbox에서 보이는 바와 같이 처음에 addStretch 값을 2로 주고, 라벨(QLabel)과 버튼(QPushbutton)을 배치합니다. 그런 후에 addStretch 값을 1로 줍니다. 그럼, 라벨/버튼은 각각 붙여서 생성이 되고, 좌우 마진을 라벨과 버튼을 생성하고 남은 크기에 2:1 형태로 주어집니다. 물론 만약 addStrech 값을 주지 않는다면 다음과 같이 나타납니다. 

위에서 보면 또한 addLayout통해서 QHBoxLayout을 QVBoxLayOut에 붙이기 가능합니다. 만약에 QVBoxLayOut에 붙이지 않고 바로 윈도우 창에 붙이신다면, 정가운데에 위치하게 됩니다. 그리고 박스 레이아웃을 사용할 때는 반드시 윈도우창에 한개만 적용해야 합니다. 

 

즉, self.setLayout()부분은 한번만 적용됩니다. 박스(Box) 레이아웃의 경우 매우 편리합니다. 하지만, 정확한 위치에 표현되기에는 많은 계산이 필요로 합니다. 

 

오늘은 파이썬[Python GUI, PyQt5 Tutorial 011]레이아웃(LayOut) 알아보기 - 절대배치, 박스 레이아웃 라는 주제로 포스팅을 진행해봤습니다. 다음 포스팅에서는 그리드(Grid) 레이아웃에 대해서 추가적으로 이야기 해보도록 하겠습니다.