티스토리 뷰

Python/PyQt5

PyQt5: 여러 위젯 사용하기 2-1(윈도우 디자인 편)

editor752 2019. 12. 3. 18:22

이 글은 Codetorial의 PyQt5, 초보자를 위한 Python GUI 프로그래밍-PyQt5 등을 학습하는 과정을 기록한 것이다. 강좌 자체는 해당 사이트를 참고하기 바란다.

여러 위젯 사용하기 2-1(윈도우 디자인 편)

이번에는 여러 위젯의 사용과 함께 이들의 배치에 관해서 연습해 보기로 한다. 여러 개의 위젯을 각 단위별로 묶고 묶은 단위을 다시 배치하는 방식으로 레이아웃을 잡을 것이다. 기본 폼은 아래의 코드를 통해 실현된다. 아래의 코드를 실행하면 제목이 "LineEditor"인 빈 창이 뜬다.

기본 형식

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *
 
 
class MyApp(QWidget):
 
    def __init__(self):
        super().__init__()
 
        self.initUI()
 
 
    def initUI(self):
 
# 위젯 관련 코드 추가 
    ① 구역
    
    # 묶음 내 위젯 위치 관련 코드 추가한다
    ② 구역
 
        
        # 전체 layout 관련 코드 추가
        self.layout = QGridLayout()
        
        ③ 구역
 
        self.setLayout(self.layout)
        self.setWindowTitle('Line Editor')
 
 
if __name__ == '__main__':
 
    app = QApplication(sys.argv)
    ex = MyApp()
    ex.show()
    sys.exit(app.exec_())
 
 cs

실행화면

여기에 총 다섯 묶음의 위젯을 왼쪽에 3 묶음(echo mode, validator, alignment), 오른쪽에 2 묶음(input mask, read-only)으로 배치한다. 각 묶음은 묶음의 라벨과 그 아래에 QLabel, QComboBox, QLineEdit를 동일하게 배치할 것이다. 전체적인 배치는 QGredLayout을 이용할 것이다.

먼저 Echo 묶음을 추가한다. 앞서 언급했듯이 각 묶음은 QLabe 1개, QComboBox 1개, QLineEdit 1개가 선언되고 배치가 결정되어야 한다. 그러기 위해서 ① 구역에 아래의 코드가 추가되어야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
        #  echo_group 
        # 제목이 'Echo'인 위젯 묶음을 생성한다.
        self.echo_group = QGroupBox('Echo')
        
        # text가 Mode: 인 QLabel을 생성한다.
        self.echo_label = QLabel('Mode: ')
        # QCombobox들 생성한다.
        self.echo_cb = QComboBox()        
        # ComboBox의 항목 4개를 각각 추가한다.
        self.echo_cb.addItem('Normal')
        self.echo_cb.addItem('No Echo')
        self.echo_cb.addItem('Password')
        self.echo_cb.addItem('PasswordEchoOnEdit')
        # QLineEdit를 생성한다.
        self.echo_le = QLineEdit()
        # QLineEdit의 자리표지자를 지정한다
        self.echo_le.setPlaceholderText('Placeholder Text')
        # QLineEdit에 포커스를 준다.
        self.echo_le.setFocus()
 
 cs

그리고 이 위젯의 위치를 잡아주는 애ㄹ의 코드를 ② 구역에 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
        #  echo_layout  
        # echo 그리드레이아웃을 생성한다.
        self.echo_layout = QGridLayout()
        # echo 그리드레이아웃에 각 위젯의 위치를 지정한다.
        # 기준
        self.echo_layout.addWidget(self.echo_label, 0 , 0)
        # 기준에서 오른쪽 한 칸 위치
        self.echo_layout.addWidget(self.echo_cb, 0, 1)
        # 기준에서 바로 아래칸 위치
        self.echo_layout.addWidget(self.echo_le, 1, 0, 1, 2)
        # 위에서 지정한 레이아웃 설정이 echo 묶음에 반영되도록 설정
        self.echo_group.setLayout(self.echo_layout)
 
 
 cs

마지막으로 전체 윈도우에서 이 첫 번째 묶음의 위치를 잡아주는 코드를 ③ 구역에 추가한다.

1
2
3
        # 전체 창에서의 이 묶음 위쩻의 위치를 지정한다.
        self.layout.addWidget(self.echo_group, 0, 0)
 
 cs

실행화면

위 사진과 같이 빈 창에 하나의 첫 번째 위젯 묶음이 자리를 잡고 있다. 지금 시점에서는 다른 위젯이 없어 그리드레이아웃이 드러나지 않는다. 다음으로 validate 묶음을 추가해 보자. 이것도 위와 같이 ①, ②, ③ 구역에 코드를 아래의 코드를 각각 추가하면 된다.

① 구역

1
2
3
4
5
6
7
8
9
10
11
        #  validator_group
        self.validator_group = QGroupBox('validator')
        
        self.validator_label = QLabel('Type')
        self.validator_cb = QComboBox()
        self.validator_cb.addItem('No validator')
        self.validator_cb.addItem('Integer validator')
        self.validator_cb.addItem('Double validator')
        self.validator_le = QLineEdit()
        self.validator_le.setPlaceholderText('Placeholder Text')
 
 cs

② 구역

1
2
3
4
5
6
7
        #  validator layout
        self.validator_layout = QGridLayout()
        self.validator_layout.addWidget(self.validator_label, 0, 0)
        self.validator_layout.addWidget(self.validator_cb, 0, 1)
        self.validator_layout.addWidget(self.validator_le, 1, 0, 1, 2)
        self.validator_group.setLayout(self.validator_layout)
 
 cs

③ 구역

1
        self.layout.addWidget(self.validator_group, 1, 0)
 cs

실행화면

이번에는 전체 레이아웃에서 두 개의 위젯 묶음(Echo Group, Validator Group)가 상하에 배치된 것을 확인할 수 있다. 다음으로 input_mask 묶음도 추가해 보자.

① 구역

1
2
3
4
5
6
7
8
9
10
11
12
13
14
        #  input_mask_group
        self.input_mask_group = QGroupBox('Input mask')
        self.input_mask_label = QLabel('Type: ')
 
        self.input_mask_cb = QComboBox()
        self.input_mask_cb.addItem('No mask')
        self.input_mask_cb.addItem('Phone number')
        self.input_mask_cb.addItem('ISO date')
        self.input_mask_cb.addItem('License key')
 
        self.input_mask_le = QLineEdit()
        self.input_mask_le.setPlaceholderText('Placeholder Text')
 
 
 cs

② 구역

1
2
3
4
5
6
7
        #  input_mask_layout
        self.input_mask_layout = QGridLayout()
        self.input_mask_layout.addWidget(self.input_mask_label, 0, 0)
        self.input_mask_layout.addWidget(self.input_mask_cb, 0, 1)
        self.input_mask_layout.addWidget(self.input_mask_le, 1, 0, 1, 2)
        self.input_mask_group.setLayout(self.input_mask_layout)
 
 cs

③ 구역

1
2
        self.layout.addWidget(self.input_mask_group, 0, 1)
 
 cs

실행화면

위와 같이 이번에는 오르쪽에 input_mask 묶음이 추가된 것을 확인할 수 있다. 이런 방식으로 나머지 묶음(alignment, read-only)를 추가하여 아래와 같이 코드를 완성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *
 
 
class MyApp(QWidget):
 
    def __init__(self):
        super().__init__()
 
        self.initUI()
 
 
    def initUI(self):
 
        #  echo_group
        self.echo_group = QGroupBox('Echo')
        self.echo_label = QLabel('Mode: ')
 
        self.echo_cb = QComboBox()
        self.echo_cb.addItem('Normal')
        self.echo_cb.addItem('No Echo')
        self.echo_cb.addItem('Password')
        self.echo_cb.addItem('PasswordEchoOnEdit')
 
        self.echo_le = QLineEdit()
        self.echo_le.setPlaceholderText('Placeholder Text')
        self.echo_le.setFocus()
 
        #  validator_group
        self.validator_group = QGroupBox('validator')
        self.validator_label = QLabel('Type')
 
        self.validator_cb = QComboBox()
        self.validator_cb.addItem('No validator')
        self.validator_cb.addItem('Integer validator')
        self.validator_cb.addItem('Double validator')
 
        self.validator_le = QLineEdit()
        self.validator_le.setPlaceholderText('Placeholder Text')
 
        
        #  input_mask_group
        self.input_mask_group = QGroupBox('Input mask')
        self.input_mask_label = QLabel('Type: ')
 
        self.input_mask_cb = QComboBox()
        self.input_mask_cb.addItem('No mask')
        self.input_mask_cb.addItem('Phone number')
        self.input_mask_cb.addItem('ISO date')
        self.input_mask_cb.addItem('License key')
 
        self.input_mask_le = QLineEdit()
        self.input_mask_le.setPlaceholderText('Placeholder Text')
 
 
        #  alignment_group
        self.alignment_group = QGroupBox('Alignment')
        self.alignment_label = QLabel('Type: ')
 
        self.alignment_cb = QComboBox()
        self.alignment_cb.addItem('Left')
        self.alignment_cb.addItem('Centered')
        self.alignment_cb.addItem('Right')
 
        self.alignment_le = QLineEdit()
        self.alignment_le.setPlaceholderText('Placeholder Text')
 
 
        #  access_group
        self.access_group = QGroupBox('Access')
        self.access_label = QLabel('Type: ')
        self.access_cb = QComboBox()
        self.access_cb.addItem('False')
        self.access_cb.addItem('True')
        self.access_le = QLineEdit()
        self.access_le.setPlaceholderText('Placeholder Text')
 
 
 
        #  echo_layout  
        self.echo_layout = QGridLayout()
        self.echo_layout.addWidget(self.echo_label, 0 , 0)
        self.echo_layout.addWidget(self.echo_cb, 0, 1)
        self.echo_layout.addWidget(self.echo_le, 1, 0, 1, 2)
        self.echo_group.setLayout(self.echo_layout)
 
 
        #  validator layout
        self.validator_layout = QGridLayout()
        self.validator_layout.addWidget(self.validator_label, 0, 0)
        self.validator_layout.addWidget(self.validator_cb, 0, 1)
        self.validator_layout.addWidget(self.validator_le, 1, 0, 1, 2)
        self.validator_group.setLayout(self.validator_layout)
 
 
        #  input_mask_layout
        self.input_mask_layout = QGridLayout()
        self.input_mask_layout.addWidget(self.input_mask_label, 0, 0)
        self.input_mask_layout.addWidget(self.input_mask_cb, 0, 1)
        self.input_mask_layout.addWidget(self.input_mask_le, 1, 0, 1, 2)
        self.input_mask_group.setLayout(self.input_mask_layout)
        
 
        #  Alignment_layout
        self.alignment_layout = QGridLayout()
        self.alignment_layout.addWidget(self.alignment_label, 0, 0)
        self.alignment_layout.addWidget(self.alignment_cb, 0, 1)
        self.alignment_layout.addWidget(self.alignment_le, 1, 0, 1, 2)
        self.alignment_group.setLayout(self.alignment_layout)
 
 
        #  access_layout
        self.access_layout = QGridLayout()
        self.access_layout.addWidget(self.access_label, 0, 0)
        self.access_layout.addWidget(self.access_cb, 0, 1)
        self.access_layout.addWidget(self.access_le, 1, 0, 1, 2)
        self.access_group.setLayout(self.access_layout)
 
        # layout
        self.layout = QGridLayout()
        self.layout.addWidget(self.echo_group, 0, 0)
        self.layout.addWidget(self.validator_group, 1, 0)
        self.layout.addWidget(self.input_mask_group, 0, 1)
        self.layout.addWidget(self.alignment_group, 2, 0)
        self.layout.addWidget(self.access_group, 1, 1)
 
 
        self.setLayout(self.layout)
 
        self.setWindowTitle('Line Ediotr')
 
 
if __name__ == '__main__':
 
    app = QApplication(sys.argv)
    ex = MyApp()
    ex.show()
    sys.exit(app.exec_())
 
 
 cs

실행화면

이것으로 윈도우 디자인이 끝났다. 이제 각 콤보박스와 라인에디터의 시그널과 슬롯을 연결해 주어야 한다. 이는 다음 포스팅에서 다루겠다.

 

2019/12/07 - [Python/PyQt5] - PyQt5: 여러 위젯 사용하기 2-2(시그널과 슬롯 연결 편)

 

PyQt5: 여러 위젯 사용하기 2-2(시그널과 슬롯 연결 편)

이 글은 Codetorial의 PyQt5, 초보자를 위한 Python GUI 프로그래밍-PyQt5 등을 학습하는 과정을 기록한 것이다. 강좌 자체는 해당 사이트를 참고하기 바란다. 2019/12/03 - [Python/PyQt5] - PyQt5: 여러 위젯 사..

editor752.tistory.com


저작자표시 비영리 동일조건

'Python > PyQt5' 카테고리의 다른 글

PyQt5: 여러 위젯 사용하기 2-3(QtDesigner 편)  (0) 2019.12.07
PyQt5: 여러 위젯 사용하기 2-2(시그널과 슬롯 연결 편)  (0) 2019.12.07
PyQt5: 여러 위젯 사용하기 1  (0) 2019.11.30
PyQt5: QLineEdit 사용하기 2  (0) 2019.11.21
PyQt5: QLineEdit 사용하기 1  (0) 2019.11.21
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함
05-15 02:48