본문으로 바로가기

수동으로 디자인 코드를 작성하다가 디자인 툴을 이용하여 UI를 만드는 방법을 익혔습니다. 흙ㅋ


C#과 비슷한 형식으로 사용이 가능합니다.


Designer 로 UI 디자인이 가능한데요!


해당 툴로 만들어진 UI를 저장하면 XML 형식으로 저장이 됩니다.


이 XML 소스를 파이썬 소스로 변경하는 것도 가능하긴 하지만, UI가 바뀔때마다 매번 XML을 파이썬 소스로 변경해줘야 하는 불편함이 생깁니다.


따라서 UI가 변경되어도 상관없이 로드시키는 방식을 사용하는게 더 유리할 것 같습니다!


Qt Designer 툴은 따로 설치도 가능하지만 저는 Anaconda3를 설치하면서 함께 설치되어 있더라구요!

경로 : (아나콘다가 설치된 위치)\Anaconda3\Library\bin\designer.exe



아주 간단한 PushButton ui를 제작 후 저장합니다. (사용할 프로젝트폴더 내부에 위치하도록 저장합니다.)




다음 소스로 간단하게 아래처럼 작성합니다.


특별한 것은 처음에 form_class를 정의한다는 것과 MyWindow 클래스가 정의된 form_class를 상속받는다는 점 입니다.

그리고 초기화에서 setupUi() 함수를 실행한다는 점 입니다.



실행해보면 아래와 같이 정상적으로 폼 로드가 가능합니다.




간단하게 버튼에 클릭 이벤트를 부여하여 생기를 넣어줘보겠습니다.

코드는 아주 간단합니다.


하지만 그 전에 알고 있어야 할 부분이 있습니다.

바로 저 버튼이 가지고 있는 이름인데요!


지금은 버튼이 하나여서 문제가 없지만 버튼이 만약 10개가 된다면 어떤 버튼인지 어떻게 구분해야 할까요?

이 문제를 해결하기 위해 버튼은 버튼마다 자신의 고유한 이름이 있습니다.



바로 objectName 이라는 속성 입니다.


해당 속성은 Qt Designer에서 생성 할 때 정의 할 수 있습니다.

아래처럼 해당 버튼은 현재 pushButton 이라는 네임을 가지고 있습니다.

이 이름은 마음대로 정의가 가능합니다만 중복은 허용하지 않습니다.




위의 내용을 가지고 코드를 수정합니다.




위에서는 MyWindow 클래스에 해당 내용만 추가 해주면 됩니다.


class MyWindow(QMainWindow, form_class):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        self.pushButton.clicked.connect(self.btn_clicked)

    def btn_clicked(self):
        QMessageBox.about(self, "클릭당함", "으아악 클릭당했다!!!")



self.pushButton.clicked.connect(self.btn_clicked) : 초기화 하면서 objectName이 pushButton인 녀석의 클릭 이벤트를 btn_clicked 함수와 연결시켜라!!

def btn_clicked(self) : 클릭당하면 반응할 동작 구현 




아주 잘 동작을 하는군요!!


위와 같이 링크를 해주면 좋은점은 Ui든 코드든 수정하기가 편리해진다는 점 입니다.


Ui 측면에서는 디자인이 바뀔때마다 새로이 XML을 파이썬 코드로 변환해야 하는 과정을 안해도 됩니다. 수정되는대로 로드하면 되니까요!

코드 측면에서는 UI의 정의코드가 없어지니 보기도 편해지고, 매번 변환하여 코드를 바꿔주지 않아도 된다는 점 일것 같습니다!

(사실 코드변환은 사용해보지 않아서 잘 모르겠네요..ㅋㅋ;; 직관적으로 로드방식이 훨씬 좋다고 생각하고 바로 로드방식을 사용한거라서요..^^;;)



UI가 변경되어도 코드에서 수정해야 할 부분이 없습니다.

아래처럼요!




 UI 변경 전

UI 변경 후 

 

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

form_class = uic.loadUiType("testui.ui")[0]

class MyWindow(QMainWindow, form_class):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        self.pushButton.clicked.connect(self.btn_clicked)

    def btn_clicked(self):
        QMessageBox.about(self, "클릭당함", "으아악 클릭당했다!!!")

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


 

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

form_class = uic.loadUiType("testui.ui")[0]

class MyWindow(QMainWindow, form_class):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        self.pushButton.clicked.connect(self.btn_clicked)

    def btn_clicked(self):
        QMessageBox.about(self, "클릭당함", "으아악 클릭당했다!!!")

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



코드는 그대로!!!!!


Ui 디자인은 이 방식을 사용하는게 최선 일 것 같습니다!



댓글을 달아 주세요

티스토리 툴바