Qt Designer

장승현·2023년 4월 16일

PyQt5

목록 보기

2/3

소개

PyQt를 이용하여 GUI 프로그래밍을 할 때 개발하려는 프로그램의 레이아웃을 쉽게 편집할 수 있도록 해주는 편집기이다. Designer로 제작한 파일은 ui 라는 확장자를 가지며 xml 형식이다. 레이아웃 설정, 객체 생성 등을 모두 코드로 하는 것보다 Designer를 통해 제작한 ui 파일을 불러오게 되면 이런 내용이 불필요하게 되어 가독성을 올릴 수 있다. 명령 프롬프트에서 아래 명령어를 입력하여 실행 가능하다.

designer

화면 구성

Main Window 또는 Dialog, Widget등의 window template을 고를 수 있다. Dialog는 짧은 기간의 일을 처리할 때 사용되는 창으로 가장 위에 실행되며 다른 창에 접근이 불가(modal)하다. Widget은 보통의 윈도우 창으로 다른 창에 접근이 가능(modeless)하다.

Main Window를 선택하면 위와 같이 생성된다.

Widget을 모아놓은 Widget Box이다. 이곳에서 원하는 Widget을 설정하고자 하는 Window에 Drag&Drop 하여 추가할 수 있다.

Widget들의 종속관계를 알 수 있는 Object Inspector이다. 이곳에서 Widget을 Container 안에 삽입 가능하다.

Widget들의 속성을 조절하는 Property Editor이다. 간략하게 objectName은 Python 코드에서 사용될 Widget의 고유 이름을 결정하는 역할을 한다. geometry는 Widget의 X, Y 좌표와 가로, 세로 길이를 지정한다. palette는 Widget의 색상을 지정한다. font은 Widget에 글자가 있을 경우, 폰트와 크기를 지정한다.

Signal과 Slot, Action을 편집할 수 있는 Editor와 이미지 등을 추가할 수 있는 Resource Browser이다.

간단한 예제

앞 글에서 했던 예제를 Designer를 이용해 재현해보겠다.

기본 창 띄우기

Designer에서 window template으로 MainWindow를 선택한 후 Ctrl + s를 눌러 기본 창을 저장한다. 저장한 파일의 이름은 basic_window이며 확장자는 ui임을 기억하자.

import sys, os
from PyQt5.QtWidgets import *
from PyQt5 import uic

base_dir = os.path.dirname(os.path.abspath(__file__))
main_form = uic.loadUiType(base_dir + "/basic_window.ui")[0]

class MainWindow(QMainWindow, main_form):
    '''
    main window를 설정하는 클래스
    '''
    def __init__(self):
        '''
        QMainWindow와 Designer로 만든 ui 파일을 상속받아 main window를 설정
        '''
        super().__init__()
        # 현재 클래스를 부모로 하여 Designer로 제작한 ui를 설정
        self.setupUi(self)

if __name__ == "__main__":
    # QApplcation은 프로그램을 실행시켜주는 클래스
    app = QApplication(sys.argv)

    # 위에서 만든 MainWindow 클래스의 인스턴스를 생성
    main = MainWindow()

    # main window ui를 보여주는 메서드 실행
    main.show()

    # 프로그램을 Event Loop로 진입시키는 메서드 실행(프로그램을 실행)
    app.exec_()

MenuBar 만들기

Designer에서는 MainWindow의 고유 레이아웃 중 하나인 MenuBar를 제작하기 위해 위 사진과 같이 '여기에 입력하십시오'를 더블 클릭하면 된다. 그럼 텍스트를 입력할 수 있게 되고, 여기에 Menu의 title을 입력하면 된다.

위와 같이 설정되면 File Menu를 클릭했을 때 수행할 Action을 추가해준다. 방법은 Menu를 추가할 때와 동일하게 '여기에 입력하십시오'를 더블 클릭한다.

이렇게 만들어진 MenuBar는 Python에서 고유한 objectName을 가지고 기능을 추가할 수 있다. 생성된 MenuBar의 고유 이름은 Object Inspector 또는 Property Editor에서 확인할 수 있으며, Property Editor에서는 이름을 수정할 수도 있다.

위에서 Load File action의 objectName은 actionLoad_File 임을 기억하자.

import sys, os
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5 import uic

base_dir = os.path.dirname(os.path.abspath(__file__))
main_form = uic.loadUiType(base_dir + "/basic_window.ui")[0]

class MainWindow(QMainWindow, main_form):
    '''
    main window를 설정하는 클래스
    '''
    def __init__(self):
        '''
        QMainWindow와 Designer로 만든 ui 파일을 상속받아 main window를 설정
        '''
        super().__init__()
        # 현재 클래스를 부모로 하여 Designer로 제작한 ui를 설정
        self.setupUi(self)

        # action이 활성화 됐을 때 실행할 함수를 연결
        self.actionLoad_File.triggered.connect(self.loadFile)

    @pyqtSlot()
    def loadFile(self):
        '''
        QFileDialog 클래스의 정적 메소드를 이용해 파일을 불러오는 메서드
        '''
        file = QFileDialog.getOpenFileName(self)


if __name__ == "__main__":
    # QApplcation은 프로그램을 실행시켜주는 클래스
    app = QApplication(sys.argv)

    # 위에서 만든 MainWindow 클래스의 인스턴스를 생성
    main = MainWindow()

    # main window ui를 보여주는 메서드 실행
    main.show()

    # 프로그램을 Event Loop로 진입시키는 메서드 실행(프로그램을 실행)
    app.exec_()

Load File을 클릭했을 때 기능이 추가된 것을 확인할 수 있다.

ToolBar를 만들기 위해 window에서 우클릭을 한 후, 도구 모음 추가를 클릭한다.

우측 하단의 동작 편집기에서 동작을 추가한 다음, ToolBar에 Drag&Drop 한다. 위에서 Load File action의 objectName은 actionLoad_File 임을 기억하자.

import sys, os
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *

from PyQt5 import uic

base_dir = os.path.dirname(os.path.abspath(__file__))
main_form = uic.loadUiType(base_dir + "/basic_window.ui")[0]

class MainWindow(QMainWindow, main_form):
    '''
    main window를 설정하는 클래스
    '''
    def __init__(self):
        '''
        QMainWindow와 Designer로 만든 ui 파일을 상속받아 main window를 설정
        '''
        super().__init__()
        # 현재 클래스를 부모로 하여 Designer로 제작한 ui를 설정
        self.setupUi(self)

        # action이 활성화 됐을 때 실행할 함수를 연결
        self.actionLoad_File.triggered.connect(self.loadFile)

    @pyqtSlot()
    def loadFile(self):
        '''
        QFileDialog 클래스의 정적 메소드를 이용해 파일을 불러오는 메서드
        '''
        file = QFileDialog.getOpenFileName(self)


if __name__ == "__main__":
    # QApplcation은 프로그램을 실행시켜주는 클래스
    app = QApplication(sys.argv)

    # 위에서 만든 MainWindow 클래스의 인스턴스를 생성
    main = MainWindow()

    # main window ui를 보여주는 메서드 실행
    main.show()

    # 프로그램을 Event Loop로 진입시키는 메서드 실행(프로그램을 실행)
    app.exec_()