[파이썬] 파이썬의 레이아웃

파이썬을 검은바탕에 흰 글로 된 콘솔에서 실행할수도 있지만, PC에서 사용하기 편하려면 UI가 있으면 좋다.

윈도우를 띄우고, 거기에 각종 화면과, 버튼과 여러가지 아이템들을 올려놓고 사용 할 수 있다.

 

라인에디트, 콤보박스, 텍스트에디터, 텍스트브라우져, 라디오버튼, 체크박스, 버튼, 라벨....등등

이것들을 화면에 올려놓고 어떻게 정렬을 시킬것인가..

 

그것들의 위치, 정렬방식등을 구성하기 위해 있는것이 바로 레이아웃(layout)이다.

 

파이썬의 레아이웃은 html의 div 랑 비슷한 느낌.

 

레이아웃의 종류

 

레이아웃은 박스레이아웃(Box Layout)과 그리드레이아웃(Grid layout)이 있습니다.

box layout은 세로정렬 박스 레이아웃(QVBoxLayout)과 가로정렬 레이아웃(QHBoxLayout)이 있습니다.

 

QVBoxLayout

레아아웃 안에 들어가는 위젯또는 레이아웃을 세로로 정렬시킵니다.

### QVBoxLayout 사용 ###

from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout

vboxlayout = QVBoxLayout()  #QVBoxLayout의 명칭을 정의
Btn1 = QPushButton("버튼1")  #버튼1 생성
Btn2 = QPushButton("버튼2")  #버튼2 생성
Btn3 = QPushButton("버튼3")  #버튼3 생성
Btn4 = QPushButton("버튼4")  #버튼4 생성

vboxlayout.addWidget(Btn1)  #vboxlayout에 Btn1 추가
vboxlayout.addWidget(Btn2)  #vboxlayout에 Btn2 추가
vboxlayout.addWidget(Btn3)  #vboxlayout에 Btn3 추가
vboxlayout.addWidget(Btn4)  #vboxlayout에 Btn4 추가

QVBoxLayout

QHBoxLayout

레이아웃 안에 들어가는 위젯 또는 레이아웃을 가로로 장렬 시킵니다.

### QHBoxLayout 사용 ###

from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QHBoxLayout

hboxlayout = QHBoxLayout()  #QHBoxLayout의 명칭을 정의
Btn1 = QPushButton("버튼")  #버튼1 생성
Btn2 = QPushButton("버튼")  #버튼2 생성
Btn3 = QPushButton("버튼")  #버튼3 생성

hboxlayout.addWidget(Btn1)  #hboxlayout에 Btn1 추가
hboxlayout.addWidget(Btn2)  #hboxlayout에 Btn2 추가
hboxlayout.addWidget(Btn3)  #hboxlayout에 Btn3 추가

QHBoxLayout

QGridLayout 

말 그대로 표와 같은 방식으로 위젯이나 레이아웃을 배치합니다.

아래 그림처럼 가장 왼쪽위부터 0,0의 좌표를 가지고 위치에 따라 좌표값이 정해진다.

### QGridLayout 사용 ###

from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QGridLayout

gridlayout = QGridLayout()  #QGridLayout의 명칭을 정의
Btn1 = QPushButton("버튼(0,0)")  #버튼1 생성
Btn2 = QPushButton("버튼(0,1)")  #버튼2 생성
Btn3 = QPushButton("버튼(0,2)")  #버튼3 생성
Btn4 = QPushButton("버튼(1,0)")  #버튼4 생성
Btn5 = QPushButton("버튼(1,1)")  #버튼5 생성
Btn6 = QPushButton("버튼(1,2)")  #버튼6 생성
Btn7 = QPushButton("버튼(2,0)")  #버튼7 생성
Btn8 = QPushButton("버튼(2,1)")  #버튼8 생성
Btn9 = QPushButton("버튼(2,2)")  #버튼9 생성

gridlayout.addWidget(Btn1,0,0)  #gridlayout에 Btn1 추가
gridlayout.addWidget(Btn2,0,1)  #gridlayout에 Btn2 추가
gridlayout.addWidget(Btn3,0,2)  #gridlayout에 Btn3 추가
gridlayout.addWidget(Btn4,1,0)  #gridlayout에 Btn4 추가
gridlayout.addWidget(Btn5,1,1)  #gridlayout에 Btn5 추가
gridlayout.addWidget(Btn6,1,2)  #gridlayout에 Btn6 추가
gridlayout.addWidget(Btn7,2,0)  #gridlayout에 Btn7 추가
gridlayout.addWidget(Btn8,2,1)  #gridlayout에 Btn8 추가
gridlayout.addWidget(Btn9,2,2)  #gridlayout에 Btn9 추가

QGridLayout 

 

레이아웃의 사용

레이아웃의 중첩

위에 그림처럼 레이아웃 안에는 레이아웃과 위젯 모두다 넣을 수 있다.

아름다운 구성을 위해서는 충첩레이아웃을 사용할 수 밖에 없다.

from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QVBoxLayout, QHBoxLayout, QGridLayout

Outhboxlayout = QHBoxLayout()  #가장 바깥쪽의 QHBoxLayout의 명칭을 정의

vboxlayout = QVBoxLayout()  #QVBoxLayout의 명칭을 정의
Btn1 = QPushButton("버튼1")  #버튼1 생성
Btn2 = QPushButton("버튼2")  #버튼2 생성
Btn3 = QPushButton("버튼3")  #버튼3 생성
Btn4 = QPushButton("버튼4")  #버튼4 생성

vboxlayout.addWidget(Btn1)  #vboxlayout에 Btn1 추가
vboxlayout.addWidget(Btn2)  #vboxlayout에 Btn2 추가
vboxlayout.addWidget(Btn3)  #vboxlayout에 Btn3 추가
vboxlayout.addWidget(Btn4)  #vboxlayout에 Btn4 추가

Rightvboxlayout = QVBoxLayout()  #오른쪽의 QVBoxLayout의 명칭을 정의

hboxlayout = QHBoxLayout()  #QHBoxLayout의 명칭을 정의
Btn1 = QPushButton("버튼")  #버튼1 생성
Btn2 = QPushButton("버튼")  #버튼2 생성
Btn3 = QPushButton("버튼")  #버튼3 생성

hboxlayout.addWidget(Btn1)  #hboxlayout에 Btn1 추가
hboxlayout.addWidget(Btn2)  #hboxlayout에 Btn2 추가
hboxlayout.addWidget(Btn3)  #hboxlayout에 Btn3 추가


gridlayout = QGridLayout()  #QGridLayout의 명칭을 정의
Btn1 = QPushButton("버튼(0,0)")  #버튼1 생성
Btn2 = QPushButton("버튼(0,1)")  #버튼2 생성
Btn3 = QPushButton("버튼(0,2)")  #버튼3 생성
Btn4 = QPushButton("버튼(1,0)")  #버튼4 생성
Btn5 = QPushButton("버튼(1,1)")  #버튼5 생성
Btn6 = QPushButton("버튼(1,2)")  #버튼6 생성
Btn7 = QPushButton("버튼(2,0)")  #버튼7 생성
Btn8 = QPushButton("버튼(2,1)")  #버튼8 생성
Btn9 = QPushButton("버튼(2,2)")  #버튼9 생성

gridlayout.addWidget(Btn1,0,0)  #gridlayout에 Btn1 추가
gridlayout.addWidget(Btn2,0,1)  #gridlayout에 Btn2 추가
gridlayout.addWidget(Btn3,0,2)  #gridlayout에 Btn3 추가
gridlayout.addWidget(Btn4,1,0)  #gridlayout에 Btn4 추가
gridlayout.addWidget(Btn5,1,1)  #gridlayout에 Btn5 추가
gridlayout.addWidget(Btn6,1,2)  #gridlayout에 Btn6 추가
gridlayout.addWidget(Btn7,2,0)  #gridlayout에 Btn7 추가
gridlayout.addWidget(Btn8,2,1)  #gridlayout에 Btn8 추가
gridlayout.addWidget(Btn9,2,2)  #gridlayout에 Btn9 추가

Outhboxlayout.addLayout(vboxlayout)      #바깥쪽 QHBoxLayout에 vboxlayout 추가
Outhboxlayout.addLayout(Rightvboxlayout)  #바깥쪽 QHBoxLayout에 Rightvboxlayout 추가
Rightvboxlayout.addLayout(hboxlayout)	#Rightvboxlayout에 hboxlayout 추가
Rightvboxlayout.addLayout(gridlayout)   #Rightvboxlayout에 gridlayout 추가