Tkinter 그리드 레이아웃(grid layout)

하이어시스템 소개

하이어시스템 소개 feat.김프로

 

원문 : https://www.pythontutorial.net/tkinter/tkinter-grid/

 

요약 : 이 글을 읽고 나면 Tkinter 의 Grid 레이아웃 방식으로 위젯의 위치를 지정 관리하는 방법에 대해서 배우게 됩니다.

Tkinter 그리드 레이아웃 매니저

그리드 레이아웃 매니저는 행과 열 개념을 이용하여 위젯을 배치합니다.

다음은 4개의 행과 3개의 열로 구성된 그리드를 보여줍니다.

그리드의 각 행과 열은 인덱스로 식별됩니다. 기본적으로 첫 번째 행은 인덱스 0을 가지고 있으며, 두 번째 행은 인덱스 1을 가지고 있으며 번호는 순차적으로 증가합니다. 마찬가지로, 그리드의 열은 0, 1, 2 순으로 인덱스를 가집니다. 그리드의 행과 열 인덱스는 0에서 시작할 필요가 없으며, 간격을 두고 인덱스를 설정할 수 있습니다. 예를 들어, 열 인덱스가 1, 2, 10, 11, 12인 그리드를 가질 수 있습니다. 이렇게 하면 나중에 그리드의 중간에 더 많은 위젯을 추가할 때 편리합니다. 지금은 알 수 없지만 가운데에 위젯이 추가될 것이 예상된다면 행번호 또는 열번호 가운데를 비워둘 수 있습니다.

 

행과 열의 교차점은 셀(cell)이라고 불립니다. 셀은 위젯을 배치할 수 있는 영역입니다. 셀은 하나의 위젯만 포함할 수 있습니다. 하나의 셀에 두 개의 위젯을 배치하면 서로 겹쳐집니다. 하나의 셀에 여러 위젯을 배치하려면 해당 셀에 Frame이나 LabelFrame을 넣고 그 안에 다시 그리드로 행과 열을 분리하여 위젯을 배치할 수 있습니다.

 

열의 너비는 포함된 위젯의 너비에 따라 결정됩니다. 마찬가지로, 행의 높이는 행에 포함된 위젯의 높이에 따라 결정됩니다. 행과 열은 grid 의 columnspan 및 rowspan 속성을 이용하여 확장할 수 있습니다.다음은 두 개의 열을 확장하는 그리드예시를 보여줍니다.

그리드 설정하기

위젯을 그리드에 할당하기 전 그리드 행과 열의 width를 설정할 수 있습니다. 아래와 같이 2가지 방법을 제공하고 있습니다.

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

index에 해당하는 columnconfigure() 또는 rowconfigure()를 수행합니다.

weight는 다른 컬럼과 비교하여 상대적인 폭의 넓이를 결정합니다.

예를들면 weight를 2라고 설정할 경우 weight가 1인 셀보다 폭이 2배가 넓게 됩니다.

위젯을 그리드에 배치하기

위젯을 그리드에 배치하려면 위젯의 grid() 메서드를 사용합니다.

widget.grid(**options)

grid() 메서드는 다음과 같은 파라미터를 가지고 있습니다.

Parameters	Meaning
column	위젯을 배치할 열 인덱스
row	위젯을 배치할 행 인덱스
rowspan	위젯이 인접한 행을 몇 개 차지할지 설정
columnspan	위젯이 인접한 열을 몇 개 차지할지 설정
sticky	셀이 위젯보다 큰 경우, sticky 옵션은 위젯이 셀의 어느 쪽에 붙어야 하는지와 셀에서 위젯의 원래 크기로 사용되지 않은 추가 공간을 어떻게 분배할지를 지정합니다.
padx	위젯 위와 아래에 외부 padding 추가
pady	위젯의 왼쪽과 오른쪽에 외부 padding 추가
ipadx	위젯 내부에 왼쪽과 오른쪽에 내부 padding 추가
ipady	위젯 내부에 위와 아래에 내부 padding 추가

Sticky

기본적으로 셀이 위젯보다 큰 경우, 그리드 그리드 레이아웃 매니저는 위젯을 셀의 가로와 세로 중앙에 배치합니다.

이 기본 동작을 변경하려면 sticky 옵션을 사용할 수 있습니다. sticky 옵션은 위젯이 셀의 어느 가장자리에 붙어야 하는지를 지정합니다. sticky의 값은 다음과 같은 유효한 값들을 가질 수 있습니다

Sticky	Description
N	북쪽 또는 상단 중앙
S	남쪽 또는 하단 중앙
E	동쪽 또는 오른쪽 중앙
W	서쪽 또는 왼쪽 중앙
NW	북서쪽 또는 상단 왼쪽
NE	북동쪽 또는 상단 오른쪽
SE	남동쪽 또는 하단 오른쪽
SW	남서쪽 또는 하단 왼쪽
NS	NS는 위젯을 수직으로 늘립니다. 그러나 수평으로는 위젯을 중앙에 배치합니다.
EW	EW는 위젯을 수평으로 늘립니다. 그러나 수직으로는 위젯을 중앙에 배치합니다.

만약 위젯을 셀의 가장자리에 배치시키려면 N, S, E, 그리고 W를 사용할 수 있습니다. 아래는 sticky 옵션을 N으로 지정했을 경우 위젝의 위치입니다.

만약 4개의 모서리에 위치시키려면 다음의 옵션을 이용하면 됩니다. NW, NE, SE, SW

아래는 NW로 설정했을 경우 위젯의 위치를 보여줍니다.

NS 는 위젯을 셀에 꽉 차도록 수직으로 펼쳐 배치하지만 횡(가로방향)으로는 중앙에 배치시킵니다.

반대로 EW는 셀이 꽉 차도록 수퍙으로 펼쳐 배치하지만 종(세로방향)으로는 중앙에 배치시킵니다.

Padding

그리드의 셀 사이에 패딩을 추가하려면 padx와 pady 옵션을 사용합니다. padx와 pady는 외부 패딩(external padding)입니다.

grid(column, row, sticky, padx, pady)

위젯 자체 내부에 패딩을 추가하려면 ipadx와 ipady 옵션을 사용합니다. ipadx와 ipady는 내부 패딩(internal padding)입니다.

 

grid(column, row, sticky, padx, pady, ipadx, ipady)

내부 패딩과 외부 패딩은 기본적으로 0으로 설정됩니다.

 

Tkinter 그리드 레이아웃(Grid Layout) 매니저 예제

이 예제에서는 그리드 레이아웃 매니저를 사용하여 다음과 같은 로그인 화면을 디자인합니다.

로그인 화면은 2개의 열과 3개의 행을 가진 그리드를 사용합니다. 또한 두 번째 열은 첫 번째 열의 3배 크기입니다.

아래는 완성된 소스코드 입니다. 화면과 비교해보시기 바랍니다.

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()

 

이 프로그램은 동일하지만 객체 지향 프로그래밍으로 제작하면 아래와 같이 코드를 작성할 수 있습니다.

 

import tkinter as tk
from tkinter import ttk


class App(tk.Tk):
    def __init__(self):
        super().__init__()

        self.geometry("240x100")
        self.title('Login')
        self.resizable(0, 0)

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

        self.create_widgets()

    def create_widgets(self):
        # username
        username_label = ttk.Label(self, text="Username:")
        username_label.grid(column=0, row=0, sticky=tk.W, padx=5, pady=5)

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

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

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

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


if __name__ == "__main__":
    app = App()
    app.mainloop()

요약

• columnconfigure()와 rowconfigure() 메서드를 사용하여 그리드의 열과 행의 가중치를 지정합니다.
• grid() 메서드를 사용하여 그리드에 위젯을 배치합니다.
• sticky 옵션을 사용하여 위젯의 위치를 셀에 맞추고, 위젯이 어떻게 늘어날지를 정의합니다.
• ipadx, ipady와 padx, pady를 사용하여 내부 및 외부 패딩을 추가합니다.