003 부록) Qt Designer를 활용해 구글 번역기 프로그램 만들기

1. 위젯을 통해 형태 만들기 1.1 시그널, 슬롯 연결과 이벤트 처리 2. 코드 3. 상세 설명 4. 실행 화면

1. 위젯을 통해 형태 만들기


self.label1 = QLabel('한국어', self)
        self.label2 = QLabel('영어', self)
        self.edit1 = QTextEdit(self)
        self.edit2 = QTextEdit(self)
        self.transBtn = QPushButton('번역하기', self)
        self.changeBtn = QPushButton('언어 바꾸기', self)

        vbox1 = QVBoxLayout()
        vbox2 = QVBoxLayout()
        vbox1.addWidget(self.label1,alignment=Qt.AlignCenter)
        vbox1.addWidget(self.edit1)
        vbox2.addWidget(self.label2,alignment=Qt.AlignCenter)
        vbox2.addWidget(self.edit2)


        hbox  = QHBoxLayout()
        hbox.addLayout(vbox1)
        hbox.addLayout(vbox2)

        layout = QVBoxLayout() # 전체적인 레이아웃

        layout.addLayout(hbox) # 수직1,2 -> 수평 레이아웃 ->전체적인 수직 레이아웃
        layout.addWidget(self.transBtn) # 버튼 추가
        layout.addWidget(self.changeBtn) # 버튼 추가
        self.setLayout(layout)
        self.setWindowTitle('구글 번역기')
        self.setGeometry(200, 200, 400, 400)

위젯과 각 위젯을 속성값을 기존에 있던 코드에서 활용해 설정해봅시다

1.1 시그널, 슬롯 연결과 이벤트 처리

Qt Designer에서 시그널과 슬롯을 연결하여 이벤트 처리하는법을 알아봅시다

프로그램 종료 버튼 생성

2. 시그널 슬롯 추가

3. 시그널 슬롯 연결

드래그를 통해서 시그널을 보낼 객체에서 이벤트를 동작할 객체까지 연결합니다.

위와 같은 경우 프로그램종료 → Widget(창)을 연결합니다.

왼쪽이 시그널을 보낼 객체 오른쪽이 슬롯을 수행할 객체 입니다.

4. 동작 설정

버튼이 눌렸으면(clicked) → close()를 통해 프로그램을 종료합니다.

5. 시그널,슬롯 추가 완료

2. 코드


from PyQt5 import uic
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
import sys
from googletrans import Translator

ui = uic.loadUiType("chapter8/test.ui")[0]

class 구글번역프로그램(QWidget,ui):

    def __init__(self):
        super().__init__()
        self.setupUi(self)
        self.translator = Translator() 
        self.transBtn.clicked.connect(self.translate)
        
        self.changeBtn.clicked.connect(self.changeLanguage)

    def translate(self):
        if self.label1.text() == '한국어': 

            text_kor = self.edit1.toPlainText() 
            text_en = self.translator.translate(text_kor,src='ko',dest='en').text
            self.edit2.setText(text_en)  

        elif self.label1.text() == '영어': 
            text_kor = self.edit1.toPlainText() 
            text_en = self.translator.translate(text_kor,src='en',dest='ko').text 
            self.edit2.setText(text_en)
        


    def changeLanguage(self): 
        if self.label1.text() == '한국어':
            t1, t2 = self.edit1.toPlainText(), self.edit2.toPlainText() 
            self.label2.setText('한국어')
            self.label1.setText('영어')
            self.edit1.setText(t2)
            self.edit2.setText(t1)

        else:
            t1, t2 = self.edit1.toPlainText(), self.edit2.toPlainText()
            self.label2.setText('영어')
            self.label1.setText('한국어')
            self.edit1.setText(t2)
            self.edit2.setText(t1)

    
    app = QApplication(sys.argv)
    ex = 구글번역프로그램()
    ex.show() # 추가
    app.exec_()

3. 상세 설명


from PyQt5 import uic

uic 라이브러리는 Qt Designer로 작성된 파일을 다룰 수 있게 해줍니다.


ui = uic.loadUiType("chapter8/test.ui)[0]

uic.loadUiType("경로/파일이름.ui")[0] 를 통해 만든 UI파일을 가져옵니다.


class 구글번역프로그램(QWidget, ui):

파라미터에 ui를 추가합니다.


super().__init__()
self.setupUi(self)
self.translator = Translator() 
self.transBtn.clicked.connect(self.translate)
self.changeBtn.clicked.connect(self.changeLanguage)

기존에 사용했던 initUI가 없어지고 self.setupUi(self)가 생겼습니다.

더불어 기존에 번역하는 함수들은 재활용 하고 슬롯과 시그널을 연결해주는 코드만 들어가있습니다.


app = QApplication(sys.argv)
ex = 구글번역프로그램()
ex.show() # 추가
app.exec_()

show()를 통해 UI를 화면에 띄워줍니다.