[Programming][Python]UI제작_Pyqt

목적

Pyqt를 사용해서 간단한 UI를 제작하기

순서

I. Pyqt, designer
II. Python에서 UI실행하기
III. 원하는 UI 동작 만들기

---

I. Pyqt, designer

---

UI를 만드는 Tool들은 다양합니다.

Window에서 제공하는 Framework도 있고
python Package인 tkinter, PyGTK등 도 가능합니다.

모두 디자인이 다르고 쓰임새가 다르지만 그 중
가장 많이 사용하는 Qt를 사용해보겠습니다.

원래 Qt는 C++ 개발 Framework로 만들어졌습니다.
다양한 Framework 중 Python으로 바인딩 된 것이 PyQt입니다.

---

 

1-1. pyQt 설치

Anaconda에서 $pip install Pyqt5 처럼 패키지로 설치.
conda install로는 안됩니다. 패키지를 설치하기 위해
anaconda channel로 들어가는데 그곳에 pyqt가 없어요!!

(아직 conda명령어와 pip명령어를 정확히 잘 모르겠네요ㅠㅠ)

1-2. Designer 설치
Anaconda에서
$pip install pyqt5designer 혹은
$pip install pyqt5-tools 혹은
$pip install pyside2 (pyqt와 다른 framework)

2. 실행
PyQt의 UI 제작을 돕기 위한 Tool로 "designer"가 있습니다.

코드로만 제작하는 것이 아니라 보면서 PPT처럼 만드는 것이죠
Anaconda Prompt에서 $ designer

designer 화면

그냥 빈 Widget으로 열어보면~
빈 위젯이 나옵니다ㅋㅋㅋㅋ

저장하면 .ui 파일이 생성됩니다.

python 코드를 작성할 때 이 .ui파일을 불러옵니다~~

---

II. Python에서 UI 실행하기

---

1. UI제작

버튼을 하나 만들어볼게요.
왼쪽 위젯에서~ pushbutton을 드래그

그러면 우측에!
객체, 클래스 등 속성 ObjectName도 나옵니다
이부분은 함수 적용할 때 다루도록 하고 글자를 바꿔봅니다.
"더블클릭" 혹은 "우클릭+텍스트 바꾸기"

이제 저장을 합니다.
저장경로는 되도록 python 프로젝트 위치에!

---

2. Python에서 실행하는 코드

해야하는 것은 다음과 같습니다.

- PyQt 모듈을 import 해주기
- Class init하며 ui 선정
- __main__으로 창 띄우기

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

myUIClass = uic.loadUiType("Aron.ui")[0]


# QMainWindow 는 QtWidgets 패키지에 있음
# myUIClass 는 위 uic 클래스
# 위 2개를 상속 받아준다.

class mainWindow(QMainWindow, myUIClass):
    def __init__(self):
        super().__init__()
        self.setupUi(self)


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

    # 내 Window Class 생성되며 __init__ 실행
    myWindow = mainWindow()
    
    # 프로그램 화면을 보여준다.
    myWindow.show()

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

+) 마지막 "exec_()"는 프로그램의 실행 방법과 연관이 있습니다.
일반 실행이 아닌 "이벤트 루프"로 실행입니다.

일반적으로는 한번 쭉 실행되고 종료되지만 이 이벤트 루프는
어떤 "행동"을 기다리고 그 행동을 처리하는 과정입니다.
예를 들면 핸드폰으로 터치를 하면 처리하고 다시 화면으로 돌아오는 과정!!

---

III. 원하는 UI 동작 만들기

---

Designer의 각 Widget들은 각각의 동작이 있습니다.
예를 들어 위 "Aron"버튼은 클릭버튼이고
글자를 적는 위젯, 그림을 넣는 위젯 등 굉장히 많습니다.

우리는 이 위젯들을 이용해 원하는 동작을 만들 수 있죠.

우선 방식만 이해하기 위해
Aron버튼을 누르면 "Hello Aron"을 출력해보겠습니다.

---

1. Python 코드로 동작 선언

우선 각 버튼의 "객체 이름"을 알아야 합니다.
이것이 우측 속성의 "objectName" 입니다.
기본 "pushButton" -> 변경 "Aron_Btn"

 

<해야하는 일>
(1) 해당 오브젝트의 어떤 event를 생성할 것인지 + 함수 포인터 연결
(2) 사용자 함수 포인터 정의

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

myUIClass = uic.loadUiType("Aron.ui")[0]

class mainWindow(QMainWindow, myUIClass):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

# 여기가 추가된 부분 =====================================
        # 내 UI를 불러온다.
        self.ui = uic.loadUi("Aron.ui", self)

        # PushButton은 clicked를 멤버로 가지고있다.
        # connect로 내가 하려는 행동의 함수와 연결
        self.ui.Aron_Btn.clicked.connect(self.myfunction)
    
    # 내가 행동하려는 부분을 정의
    def myfunction(self):
        print("Hello Aron!!")

# 여기까지 ==============================================

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

 

위 방법은 모든 버튼을 다 connect 해주고 함수도 작성하다 보면
이게 UI를 위한 함수인지 다른 알고리즘 함수인지 구별하기 힘들겠고,,,,,

각 버튼마다 무슨 행동을 지원하는지 이름도 다 알아야 한다.

그래서 아래처럼 쉬운 방법으로 하자

---

2. Designer의 시그널 선언*

위에서 본 designer의 화면은 "위젯편집"화면입니다.

이 화면을 시그널/슬롯 화면으로 넘겨주는데

여기!

그러면 각 위젯들을 드래그해서 원하는 행동을 지정할 수 있습니다.

<해야하는 일>

1. 위젯 드래그로 이벤트 만들기
2. 슬롯 만들기(행동할 함수이름)
3. python에서 슬롯 함수 정의해주기

드래그하면 이렇게 나온다.

 

슬롯을 생성하자

 

완료되면 시그널/슬롯 편집 View에서 다음과 같이 보인다.

 

코드에서 slot_AronBtn()을 정의해주자.

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

# @pyqtSlot() 을 위해서 import 필요하다.

from PyQt5.QtCore import pyqtSlot

myUIClass = uic.loadUiType("Aron.ui")[0]



# QMainWindow 는 QtWidgets 패키지에 있음
# myUIClass 는 위 uic 클래스
# 위 2개를 상속 받아준다.
class mainWindow(QMainWindow, myUIClass):
    def __init__(self):
        super().__init__()
        self.setupUi(self)

        # 내 UI를 불러온다.
        self.ui = uic.loadUi("Aron.ui", self)


    # 슬롯 함수라고 @로 알려준 뒤 함수 정의
    @pyqtSlot()
    def slot_AronBtn(self):
        print("Hello Aron!!")



# Main 함수로 실행 시 (직접실행)
if __name__ == "__main__":
    app = QApplication(sys.argv)
    myWindow = mainWindow()
    myWindow.show()
    app.exec_()

 

예제

내가 적은 글씨가 출력되게 하는 UI.

Designer 위젯화면

 

프로그램 실행

 

코드

<hide/>
import sys
from PyQt5.QtWidgets import *
from PyQt5 import uic
from PyQt5.QtCore import pyqtSlot

myUIClass = uic.loadUiType("Aron.ui")[0]

class mainWindow(QMainWindow, myUIClass):
    def __init__(self):
        super().__init__()
        self.setupUi(self)


        self.ui = uic.loadUi("Aron.ui", self)


    @pyqtSlot()
    def slot_PrintBtn(self):
        msg = self.ui.textMsg.text()
        self.ui.printMsg.append(msg)
        
    @pyqtSlot()
    def slot_ClearBtn(self):
        self.ui.printMsg.clear()


# Main 함수로 실행 시 (직접실행)
if __name__ == "__main__":
    app = QApplication(sys.argv)
    myWindow = mainWindow()
    myWindow.show()
    app.exec_()

 

해당 Pyqt를 이용해서 Robot Project의 프로그램을 만들었습니다!