(Python Tkinter) Chapter 3. grid - Geometry(Layout) Managers

"Life is too short, You need python"

Grid Geometry Manager는 서로 간섭하지 않도록 창 내부에 많은 위젯을 배치해야 하는 경우 주로 사용됩니다. (마스터)위젯을 2차원 테이블 즉, 여러 행과 열로 분할하며 결과 테이블의 각 '셀'에는 위젯이 포함될 수 있습니다. 그리드는 Tkinter 의 Geometry Manager 중 가장 유연합니다 . Grid를 사용하여 창에 위젯을 배치하는 방법에 대해 알아보겠습니다.

 

---

 

grid ( 셀 단위 배치 ) 

 

grid는 행과 열의 개념을 사용하여 위젯을 정렬합니다.

 

4개의 행과 3개의 열로 구성된 그리드

 

---

 

Syntax

 

widget.grid(option parameters)

 

• 우선 순위는 가장 처음 선언한 grid 부터 배치 됩니다.
• 그리드의 각 행과 열은 인덱스로 식별됩니다.

      → 인덱스는 0에서 시작할 필요가 없고 행/열 간 간격이 있을 수 있습니다.

      → 예를 들어, 열 인덱스가 1, 2, 10, 11 및 12인 그리드가 있을 수 있습니다. (위젯을 더 추가할 계획일 때 유용합니다.)

• 행과 열의 교집합을 셀이라고 하며 셀은 위젯을 배치할 수 있는 영역입니다.

      → 한 번에 여러 셀을 건너 뛰어 배치할 수 없습니다.(셀을 뛰어 넘어 지정하더라도 자동으로 다음 셀로 지정 됨)

      → 셀은 하나의 위젯만 보유할 수 있으며 두 개 이상의 위젯을 배치하면 서로의 위에 배치됩니다.

      → 셀에 여러 위젯을 배치하려면  Frame 또는 LabelFrame위젯을 래핑하고 셀에 Frame을 배치합니다.

• 행의 높이와 열의 너비는 포함된 위젯을 따릅니다. 
• 행과 열은 columnspan/rowspan을 통해 확장(병합) 가능합니다.
• grid는 pack과 함께 사용할 수 없으며 place와는 함께 사용할 수 있습니다.

 

병합된 행/열이 있는 grid

 

 

( Input )

 

import tkinter as tk

root = tk.Tk()
root.title('PY Life')
root.geometry("300x200")

Button_1 = tk.Button(root, text = '(0, 0)')
Button_2 = tk.Button(root, text = '(0, 1)')
Button_3 = tk.Button(root, text = '(0, 2)')

Button_4 = tk.Button(root, text = '(1, 0)')
Button_5 = tk.Button(root, text = '(1, 1)')
Button_6 = tk.Button(root, text = '(1, 2)')

Button_7 = tk.Button(root, text = '(2, 0)')
Button_8 = tk.Button(root, text = '(2, 1)')
Button_9 = tk.Button(root, text = '(2, 2)')

Button_10 = tk.Button(root, text = '(3, 0)')
Button_11 = tk.Button(root, text = '(3, 1)')
Button_12 = tk.Button(root, text = '(3, 2)')

Button_1.grid(row = 0, column = 0)
Button_2.grid(row = 0, column = 1)
Button_3.grid(row = 0, column = 2)
Button_4.grid(row = 1, column = 0)
Button_5.grid(row = 1, column = 1)
Button_6.grid(row = 1, column = 2)
Button_7.grid(row = 2, column = 0)
Button_8.grid(row = 2, column = 1)
Button_9.grid(row = 2, column = 2)
Button_10.grid(row = 3, column = 0)
Button_11.grid(row = 3, column = 1)
Button_12.grid(row = 3, column = 2)

root.mainloop()

 

( Output )

 

 

row/column 지정 외 별다른 옵션이 없다면 위의 Input은 그림과 같이 출력이 됩니다.

(row/column 옵션 미입력 시 0열 기준 하나씩 쌓입니다.)

 

 

---

 

Grid 설정 - configure( )

 

grid()에 위젯 배치 전 grid의 row와 column을 구성해야 합니다.(엑셀의 행 넓이 / 열 폭 설정과 같습니다.)

 

root.columnconfigure( index, weight )
root.rowconfigure( index, weight )

 

columnconfigure() / rowconfigure() method에서 index는 그리드의 행/열 index 입니다.
weight는 열의 size를 결정합니다. 예를 들어 weight가 2인 열은 weight가 1인 열보다 너비가 두 배입니다.

 

( Input )

 

import tkinter as tk

root = tk.Tk()
root.title('PY Life')
root.geometry("500x300")

Button_1 = tk.Button(root, text = '(0, 0)', bg = 'green')
Button_2 = tk.Button(root, text = '(0, 1)', bg = 'red')
Button_3 = tk.Button(root, text = '(0, 2)', bg = 'blue')

Button_4 = tk.Button(root, text = '(1, 0)', bg = 'gray')
Button_5 = tk.Button(root, text = '(1, 1)', bg = 'yellow')
Button_6 = tk.Button(root, text = '(1, 2)', bg = 'pink')

Button_7 = tk.Button(root, text = '(2, 0)', bg = 'purple')
Button_8 = tk.Button(root, text = '(2, 1)', bg = 'orange')
Button_9 = tk.Button(root, text = '(2, 2)', bg = 'cyan')

Button_10 = tk.Button(root, text = '(3, 0)', bg = 'royalblue')
Button_11 = tk.Button(root, text = '(3, 1)', bg = 'beige')
Button_12 = tk.Button(root, text = '(3, 2)', bg = 'brown')

root.rowconfigure(0, weight = 0)
root.rowconfigure(1, weight = 1)
root.rowconfigure(2, weight = 2)
root.rowconfigure(3, weight = 3)
root.columnconfigure(0, weight = 1)
root.columnconfigure(1, weight = 2)
root.columnconfigure(2, weight = 3)

Button_1.grid(row = 0, column = 0, sticky = 'news')
Button_2.grid(row = 0, column = 1, sticky = 'news')
Button_3.grid(row = 0, column = 2, sticky = 'news')
Button_4.grid(row = 1, column = 0, sticky = 'news')
Button_5.grid(row = 1, column = 1, sticky = 'news')
Button_6.grid(row = 1, column = 2, sticky = 'news')
Button_7.grid(row = 2, column = 0, sticky = 'news')
Button_8.grid(row = 2, column = 1, sticky = 'news')
Button_9.grid(row = 2, column = 2, sticky = 'news')
Button_10.grid(row = 3, column = 0, sticky = 'news')
Button_11.grid(row = 3, column = 1, sticky = 'news')
Button_12.grid(row = 3, column = 2, sticky = 'news')

구분을 위해 각 셀에 Color를 추가하여 구분하였고, sticky 옵션을 'news'로 두어 각 셀이 확보하고 있는 공간을 쉽게 볼 수 있도록 하였습니다.

 

( Output )

 

 

---

 

Option Parameters

 

grid()에 옵션을 추가해야 원하는 형태로 배치가 가능하며 가능한 옵션은 다음과 같습니다. 

 

이름	의미	기본값	속성
row	행 위치	0	상수
column	열 위치	0	상수
rowspan	행 위치 조정(병합)	1	상수
columnspan	열 위치 조정(병합)	1	상수
sticky	할당된 공간 내에서 위치 조정	-	n, s, e, w, nw, ne, es, ws, ns, ew, news
ipadx	위젯에 대한 x 방향 내부 패딩	0	상수
ipady	위젯에 대한 y 방향 내부 패딩	0	상수
padx	위젯에 대한 x 방향 외부 패딩	0	상수
pady	위젯에 대한 y 방향 외부 패딩	0	상수

 

---

 

Option 1 . row / column / rowspan / columnspan

 

grid()는 row, column 옵션으로 각 셀 위치를 배치할 수 있고 rowspan, columnspan으로 셀을 병합합니다.

 

• row / column : 해당 구역으로 위젯을 이동시킵니다.
• rowspan / columnspan  : 할당된 공간내에서 위치를 조정합니다.

 

아래의 예시를 통해 사용 방법을 확인해 보도록 하겠습니다.

 

 

( Input )

 

Button_1.grid(row = 0, column = 0, sticky = 'news')
Button_2.grid(row = 0, column = 1, sticky = 'news')
Button_3.grid(row = 0, column = 2, sticky = 'news')
Button_4.grid(row = 1, column = 0, columnspan = 2, sticky = 'news')
Button_6.grid(row = 1, column = 2, sticky = 'news')
Button_7.grid(row = 2, column = 0, rowspan = 2, sticky = 'news')
Button_8.grid(row = 2, column = 1, columnspan = 2, sticky = 'news')
Button_11.grid(row = 3, column = 1, sticky = 'news')
Button_12.grid(row = 3, column = 2, sticky = 'news')

각 셀별 Color를 추가하고 sticky 옵션을 'news'로 두어 각 셀이 확보하고 있는 공간을 쉽게 볼 수 있도록 하였습니다.

 

( Output )

 

 

---

 

Option 2. padx / pady / ipadx / ipady

 

padx / pady 는 위젯 외부 공간에 대한 Gap 정의이고, ipadx / ipady는 위젯 내부 공간에 대한 Gap 정의 입니다.

pack()의 사용법이나 출력 결과를 참고하시면 됩니다.

(Python Tkinter) Chapter 2. pack - Geometry(Layout) Managers

 

---

 

Option 3. sticky

 

sticky는 할당된 공간 내 특정 위치로 배치 합니다. 

 

 

( Input )

 

Button_1.grid(row = 0, column = 0, sticky = 'news')
Button_2.grid(row = 0, column = 1, sticky = 'news')
Button_3.grid(row = 0, column = 2, sticky = 'news')
Button_4.grid(row = 1, column = 0, columnspan = 2, sticky = 'e')
Button_6.grid(row = 1, column = 2, sticky = 'news')
Button_7.grid(row = 2, column = 0, rowspan = 2, sticky = 'news')
Button_8.grid(row = 2, column = 1, columnspan = 2, sticky = 'nw')
Button_11.grid(row = 3, column = 1, sticky = 'news')
Button_12.grid(row = 3, column = 2, sticky = 'es')

 

( Output )

 

 

---

 

Example ( 사용 예 )

 

( Input )

 

import tkinter as tk
from tkinter import ttk

# root window
root = tk.Tk()
root.geometry("240x100")
root.title('Login')
root.resizable(0, 0)

# configure the grid
root.columnconfigure(0, weight = 1)
root.columnconfigure(1, weight = 3)

# username
username_label = ttk.Label(root, text = 'Username : ')
username_label.grid(column = 0, row = 0, sticky = tk.W, padx = 5, pady = 5)

username_entry = ttk.Entry(root)
username_entry.grid(column = 1, row = 0, sticky = tk.E, padx = 5, pady = 5)

# password
password_label = ttk.Label(root, text = 'Password :')
password_label.grid(column = 0, row = 1, sticky = tk.W, padx = 5, pady = 5)

password_entry = ttk.Entry(root, show = '*')
password_entry.grid(column = 1, row = 1, sticky = tk.E, padx = 5, pady = 5)

# login button
login_button = ttk.Button(root, text = 'Login')
login_button.grid(column = 1, row = 3, sticky = tk.E, padx = 5, pady = 5)

root.mainloop()

 

( Output )

 

---

 

마무리

 

Geometry Manager 중 grid 사용법에 대해 알아보았습니다.