[Python/파이썬] Qt Designer 사용방법 기본

0.설치

cmd 창에서

pip install pyside2

라고 입력한다.

 

pyside2가 설치되면 자동으로 Qt Designer가 컴퓨터에 설치된다.

근데 파이썬 설치 경로에서 찾아야하는데

 

사람마다 파이썬 설치 경로가 다르고 파이썬 설치경로를 보통 외우고 다니지 않으니까

 

QtDesigner의 실행파일 이름이

designer.exe 니까 everything 에서 검색해서 찾아쓰도록 하자.

 

굳이 정확한 위치정보를 알려주자면 아래와 같다.

파이썬 설치경로\Python38-32\Lib\site-packages\PySide2

1.사용법 개요
pyqt 를 설명하는 글에서
기본적인 gui 창을 만들고 버튼 .텍스트창. 라벨 등등을 추가하는 방법 등을 알아보았다.

gui 를 꾸밀때마다 각 ui들의 크기.위치 등을

setGeometry 메소드나 move 메소드를 사용해서

x.y 좌표로 직접 썼는데 사실 프로그램이 복잡해지면 그런식으로 작업하기가 매우 불편하다.

Qt 디자이너는 gui 형태를 쉽게 만드는데 도움을 준다.
main window 를 펼쳐두고 마우스로 클릭 클릭해서
버튼도 추가하고 라벨도 추가하고..
위치 조정도 쉽고 크기 조절도 쉽고
gui 화면 꾸미는걸 매우 쉽게 할 수 있다.

그리고 이렇게 만든 gui 틀을 .ui 라는 확장자를 가진 파일로 save를 한다.

이 ui 파일은 xml 파일인데 이를 파이썬에서 활용하는 방식은 2가지이다.

 

1번)
pyqt 설치시 설치되는 프로그램중 uic 라는 실행파일이 있는데 이것을 사용하면 .ui 파일을 .py 파일로 code gen해주니까 그 코드를 바탕으로 핸드코딩을 추가하는 방식
----------------

2번)
또는 우리가 쓰려는 .ui 파일을 지정된 방식으로 import 만하면 그 ui를 간편하게 활용이 가능해진다.
다만 핸드코딩 할 때 각 위젯들의 이름을 알아야하는데 그것은 qt desinger 파일에서 확인이 가능하다.

----------------

참고로 

프로그램을 만들다보면 QT Designer에서 지원하지 않는 클래스나 위젯을 사용해야 하는 경우들이 종종있다.

그래서 QT Designer로 만든 GUI에다가 몇 가지 핸드코딩을 섞어서 코딩을 하는 경우가 종종 생길 수 있다.

 

나의 경우 ui파일을 import하는 형태로 사용하고있고, 가끔 pyqt 에 대해 잘 모르겠는 부분이 있을경우 ui로 만들어서 code gen 한 결과물을 살펴보고 공부하기도한다.

 

참고로 QT 디자이너로 디자인을 꾸민후에 실행 됐을때 모습을 미리보기로 볼 수 있는데

★★★그 단축키는 Ctrl + R 이다. 꼭 외워두자.

 

2. 사용 예시

1) ui파일로 코드생성 하는 법

QT Designer 설치 후, 파이썬 설치경로 안에 보면 uic.exe 라는 실행파일을 찾을 수 있다.

해당 경로로 이동해서 cmd 창을 열어준다.

 

그러고나서

python -m PyQt5.uic.pyuic -x "ui파일이름.ui" -o "생성된 코드이름.py"

이런식으로 적어주면 된다.

 

ex)

python -m PyQt5.uic.pyuic -x "test_main.ui" -o "test_code.py"

 

2) ui파일을 파이썬에서 import해서 쓰는 방법

이렇게 QT Designer로 just_temp.ui 라고 UI파일을 만들어서 저장해둔 다음

아래와 같은 코드 템플릿을 사용하면 된다.

아래 코드에서 uic.loadUiType 이라는 메소드를 사용하는데 이때 Argument로 자신이 만든 ui파일의 이름을 적어주면

된다.

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

#UI파일 연결
#단, UI파일은 Python 코드 파일과 같은 디렉토리에 위치해야한다.
form_class = uic.loadUiType("just_temp.ui")[0]


#화면을 띄우는데 사용되는 Class 선언
class WindowClass(QMainWindow, form_class) :
    def __init__(self) :
        super().__init__()
        self.setupUi(self)


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

    #WindowClass의 인스턴스 생성
    myWindow = WindowClass() 

    #프로그램 화면을 보여주는 코드
    myWindow.show()

    #프로그램을 이벤트루프로 진입시키는(프로그램을 작동시키는) 코드
    app.exec_()

---

3. Qt Designer에서 만든 각종 Widget들을 소스코드에서 사용하는 방법

  객체탐색기의 객체이름, 클래스 이름을 파악하자.

위 그림과 같이 QT Designer로 UI를 꾸미면

오른쪽 객체 탐색기 라는 곳에 각 객체들( Widget들)의 이름과 클래스 정보가 나온다.

위 그림에서는 버튼2 라는 버튼을 클릭했고, 해당 버튼 객체의 이름은 pushButton_2 라고

객체 탐색기에 나오는 모습을 볼 수 있다.

 

위 그림에서 테이블도 한개 있는데 해당 테이블 객체의 이름은 tableWidget 라는 것을 알 수 있다.

이 이름을 바탕으로 우리의 파이썬 코드에서 해당 객체에 대한 컨트롤이 가능하다.

 

참고로, 객체의 이름은 유저가 직접 수정이 가능하다.

아래 예시코드를 보자.

ui 코드를 import 한 후,

아래와 같이 객체에 접근하는 모습을 이해할 수 있다.

self.pushButton

self.tableWidget

이라는 이름을 사용하여 객체에 접근하고 있다. 참고로 이 이름은 앞의 그림에서 살펴봤던

QT 디자이너의 객체 탐색기에서 봤던 이름이다.

---

4. 추천하는 팁

기본 사용방법은 알아봤고 관련하여 팁을 하나 주려고하는데

파이썬은 변수,객체 등을 선언 할 때 타입지정을 별도로 하지 않도록 되어있다.

그러나 파이썬 3.6 버전부터는 사용자가 임의로 데이터 타입 지정이 가능한데, 데이터타입을 지정해놓고 쓰면

장점이 많이 있다.

 

타입지정 하는 방법은 매우 간단한데. 아래 링크의 설명 참조

'파이썬. 데이터 타입 지정하기' 수정하기 (tistory.com)

 

특히 QT Designer를 사용할 때 장점이 있는데 앞에서 살펴본 예시를 갖고 설명한다.

앞의 예시에서

우리는 QT Designer의 객체 탐색기를 통해서

pushButton 객체의 클래스가 QPushButton 클래스라는 것을 알고 있고

tableWidget 객체의 클래스가 QTreeWidget 클래스라는 것을 알고 있다.

 

 

그래서 해당 객체에 접근해서 메소드를 호출해서 코딩을 하였다.

근데 VS Code 같은 에디터들은 개발시에 유용한 기능을 제공하는데,

사용하는 객체의 타입을 알고 있다면 사용가능한 메소드,멤버변수 등의 정보를 보여준다는 것이다.

 

무슨 말이냐면

위 그림과 같이 test_tree 라는 QTableWidget 객체를 하나 선언한 후,

setItem이라는 메소드를 사용하려고한다. VS Code는 해당 객체의 클래스가 QTableWidget 이라는 것을 알고 있기 때문에 저렇게 코딩할 때 자동으로 사용가능한 메소드와 멤버변수 정보를 보여줘서 코딩할때 매우 편하다.

 

반면, 위 그림처럼 PyQt에서 만들어놓은 객체에 접근해서 메소드를 사용하려고하면

자동 완성으로 보여주는게 전혀 없다.

왜냐하면, VSCODE 입장에서는 self.tableWidget이라는 객체의 클래스가 QTableWidget이라는 정보를 모르기 때문이다.

그래서 코딩할 때 매우 불편하다. 메소드 이름도 명확하게 외워야하고 대소문자 까지도 외워야하니까..

 

그래서, QT Designer를 사용해서,  Ui를 import하는 방식으로 코딩을 할 때는

디자이너에서 만든 객체들의 타입을 다시 한번 타이핑해서 지정해주면 편리하다.

위의 예시를 갖고 설명하자면

 

위 그림처럼 타입지정을 해놓고 코딩을 하면

이제 self.tableWidget 객체의 클래스가 QTableWidget 이라는 사실을 VSCODE가 알기 때문에

자동완성 기능을 제공해준다.