PyQt GUI (7) : 그룹박스를 사용하여 UI 구성 다양하게 하기 - QGroupBox

QGroupBox는 엄청나게 필수적인 요소는 아니지만, 이것들을 잘 활용하명 UI을 훨씬 더 이쁘고 직관적이게 꾸밀 수 있습니다. 간단한 예를 들어서 GroupBox의 활용 여부에 따라서 UI의 직관성이 달라지는 것은 확인해 보겠습니다. 

4개의 PushButton으로 이루어진 간단한 UI입니다. 위젯을 대표해서 QPushButton을 활용한 것이니 목적에 따라서 다양한 종류의 위젯이 있다고 생각하면 됩니다. 만일 위 두 버튼(button_1, button_2)의 활용 목적과 아래 두 버튼(button_3 button_4)의 활용 목적이 다르다고 하겠습니다. 이 경우 두 button_1, button_2를 하나의 그룹으로, button_3, button_4를 다른 그룹으로 생각하고 두 그룹간의 눈에 띄는 분리를 준다면 UI의 직관성과 심미성이 향상될 것 입니다. 이 경우 QGroupBox를 활용하여 button_1, button_2를 묶는 경계선을 만들고, button_3, button_4를 묶는 경계선을 만들면 될 것 입니다. 

위 예시 UI는 앞에서 설명한것 처럼 QGroupBox를 이용하여, 그룹별로 위젯을 배치한 것 입니다. group_1, group_2라는 이름과 위젯을 감싸고 있는 경계선이 있으니 button_1, button_2와 button_3, button_4를 명확하게 구분지을 수 있습니다. 아래는 위 UI를 생성하기 위한 전체 코드 입니다. 

import sys
from PyQt5.QtWidgets import *

class Main(QDialog):
    def __init__(self):
        super().__init__()
        self.init_ui()

    def init_ui(self):
        main_layout = QVBoxLayout()

        groupbox_1 = QGroupBox("group_1")
        groupbox_2 = QGroupBox("group_2")

        button_1 = QPushButton("button_1")
        button_2 = QPushButton("button_2")
        button_3 = QPushButton("button_3")
        button_4 = QPushButton("button_4")

        layout_1 = QVBoxLayout()
        layout_1.addWidget(button_1)
        layout_1.addWidget(button_2)

        layout_2 = QVBoxLayout()
        layout_2.addWidget(button_3)
        layout_2.addWidget(button_4)

        groupbox_1.setLayout(layout_1)
        groupbox_2.setLayout(layout_2)

        main_layout.addWidget(groupbox_1)
        main_layout.addWidget(groupbox_2)

        self.setLayout(main_layout)
        self.resize(500, 500)
        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    main = Main()
    sys.exit(app.exec_())

여기서 핵심적인 부분은 QGroupBox를 생성하고, 이 그룹박스에 레이아웃을 설정하는 부분입니다. 

        groupbox_1 = QGroupBox("group_1") #그룹박스 생성

        button_1 = QPushButton("button_1") #위젯 생성
        button_2 = QPushButton("button_2") #위젯 생성

        layout_1 = QVBoxLayout()      #그룹박스에 넣을 레이아웃 생성
        layout_1.addWidget(button_1)  #레이아웃의 구성요소를 추가
        layout_1.addWidget(button_2)  #레이아웃에 구성요소를 추가
        
        groupbox_1.setLayout(layout_1) #그룹박스에 레이아웃을 설정
                
        main_layout.addWidget(groupbox_1) #메인 레이아웃에 그룹박스를 추가

groupbox_2에 대한 부분은 이것의 반복입니다. 

 

그룹박스의 사용은

 

(1) 그룹박스를 생성

(2) 레이아웃을 만들고, 이 레이아웃을 그룹박스에 설정

(3) 그룹박스를 메인 레이아웃에 추가

 

의 방식을 따릅니다. 사실 뭐 특별할 것은 없습니다. 그룹박스는 위젯의 하나로, 레이아웃을 포함(setLayout)할 수 있는 위젯이며, 이 위젯을 메인 레이아웃(main_layout)에 추가(addWidget)하는 것이 전부입니다. 

 

QGroupBox의 특별히 재미난점이 있다면, checkable 상태로 설정할 수 있다는 것 인데요, 아래와 같이 코드를 추가하면, 그룹박스를 체크/언체크할 수 있는 체크박스가 그룹박스의 이름에 생성됩니다. 

groupbox_1.setCheckable(True)
groupbox_2.setCheckable(True)

이 두 줄의 코드를 groupbox 생성 이후에 추가하고 프로그램을 실행하면, 

앞에서 설명한 것과 같이 그룹박스의 이름(group_1, group_2)의 앞 부분에 체크박스가 생성 됩니다. 이 체크 박스가 체크 상태이면 이 그룹에 속해 있는 위젯이 활성화 상태가 되고, 언체크 상태이면 이 그룹에 속해 있는 위젯들이 비활성화 상태가 됩니다. 

group_1를 언체크하면, group_1에 속해 있는 버튼이 비활성화가 돼 어두운 회색이 됩니다. group_2는 변화가 없어서 button_3과 button_4를 클릭할 수 있습니다. 

 

위 예시처럼 그룹박스를 잘 활용하면 전체 UI를 보다 직관적이고 심미성 있게 꾸밀 수 있습니다.