PyQt5 오버레이 레이어

PyQt에서 특정 위젯을 오버레이 하는 레이어를 만드는 방법입니다.

아래 그림과 같은 윈도우에서 하단 PushButton을 누를 때마다 TextEdit창을 덮는 붉은색 레이어가 나타났다가 사라집니다.

먼저 Qt Designer로 GUI 폼을 만들어 줍니다. 여기서는 템플릿으로 위젯을 사용했습니다. 새 폼 만들기메뉴에서 "Widget"을 선택하고 생성을 눌러줍니다.

"verticalLayout"안에 "pushButton"과 "textEdit"를 배치합니다. 그리고 폼 빈 공간에 마우스 우클릭하여 "배치 > 격자형으로 배치"를 선택합니다.

아래와 같은 폼 디자인이 완성되었습니다. 파일이름을 "overlay.ui"로 저장합니다.

이제 파이썬 코드를 작성해 줍니다.

from PyQt5.QtCore import *
from PyQt5 import uic, QtGui
from PyQt5.QtWidgets import *

Ui_MainWindow = uic.loadUiType(overlay.ui)[0]

class overlay(QWidget):
    def __init__(self, parent=None):
        super(overlay, self).__init__(parent)

        palette = QtGui.QPalette(self.palette())
        palette.setColor(palette.Background, Qt.transparent)
        self.setPalette(palette)

    def paintEvent(self, event):
        painter = QtGui.QPainter()
        painter.begin(self)
        painter.setRenderHint(QtGui.QPainter.Antialiasing)
        painter.fillRect(event.rect(), QtGui.QBrush(QtGui.QColor(255, 43, 43, 127)))
        mid_w = self.width() / 2
        unit_w = mid_w / 10
        painter.drawLine(mid_w - unit_w, mid_w - unit_w, 
                         mid_w + unit_w, mid_w + unit_w)
        painter.drawLine(mid_w - unit_w, mid_w + unit_w, 
                         mid_w + unit_w, mid_w - unit_w)
        painter.setPen(QtGui.QPen(Qt.NoPen))

class MainWindow(QWidget, Ui_MainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.setupUi(self)

        self.textEdit.setWordWrapMode(QtGui.QTextOption.WrapAnywhere)
        self.textEdit.setText("https://kwonkyo.tistory.com" * 60)

        self.overlay = overlay(self.textEdit)
        self.overlay.hide()

        self.pushButton.clicked.connect(
            lambda: self.overlay.setVisible(False) if self.overlay.isVisible() else self.overlay.setVisible(True))

    def resizeEvent(self, event):
        self.overlay.resize(event.size())
        event.accept()

if __name__ == "__main__":
    import sys

    app = QApplication(sys.argv)
    main = MainWindow()
    main.show()
    sys.exit(app.exec_())

소스 내용을 간략히 설명하면 다음과 같습니다. QWidget의 객체를 2가지를 생성하는데 하나는 위에서 디자인한 overlay.ui파일을 불러오고 나머지 하나는 붉은색의 약간 투명하고 가운데 X 표시가 있는 사각형으로 직접 생성합니다. 그리고 pushButton이 눌려질 때마다 붉은 사각형 위젯을 보이게 했다가 숨겼다가를 반복합니다. 간단하죠?!

 

끝!