26. GUI에 탭(Notebook) 생성하기

지난 포스팅

2022.11.20 - [기타/tkinter 한꼬집씩만 따라해보기] - 25. 메뉴바의 종료버튼으로 프로그램 종료하기

25. 메뉴바의 종료버튼으로 프로그램 종료하기

---

 

이번 포스팅에서는 : 탭으로 GUI에 여러 페이지 구현하기

여러 프로그램을 다뤄보신 분들이라면 탭에 대해서도 잘 아실 것으로 생각합니다.

아래아한글의 표/셀 속성 다이얼로그(4개의 가로탭)

엑셀의 옵션 다이얼로그(12개의 세로탭)

위와 같은 탭 기능을 tkinter에서는 Notebook이라는 위젯으로 제공하고 있습니다.

탭의 위치도 자유롭게 배치할 수 있어서, 엑셀에서 제공하는 것처럼 세로 탭도 가능합니다.

앞으로는 탭 대신 tkinter의 공식 명칭인 노트북이라고 불러도 (익히 우리가 아는 그) 탭으로 이해해 주시기 바랍니다.

전체 코드를 먼저 보여드리겠습니다. 설명은 주석에 넣어봅니다.

import tkinter as tk
from tkinter import ttk

# 탑레벨 win 인스턴스 생성
win = tk.Tk()
win.title("tkinter GUI")

# 탭메뉴 위젯 생성(탭메뉴 안의 탭은 add로 만듦)
tab = ttk.Notebook(win)
tab.grid(row=0, column=0)

# 각 탭에 들어갈 프레임 생성
frame1 = tk.Frame(tab)
frame2 = tk.Frame(tab)
frame3 = tk.Frame(tab)

# 탭메뉴에 탭 세 개 추가
tab.add(frame1, text="체크버튼")  # 탭 이름은 "체크버튼"
tab.add(frame2, text="콤보박스")  # 탭 이름은 "콤보박스"
tab.add(frame3, text="스핀박스")  # 탭 이름은 "스핀박스"

# 첫 번째 탭인 frame1에 체크버튼 채우기
ttk.Checkbutton(frame1, text="체크버튼1").grid(row=0, column=0)
ttk.Checkbutton(frame1, text="체크버튼2").grid(row=1, column=0)
ttk.Checkbutton(frame1, text="체크버튼3").grid(row=2, column=0)

# 두 번째 탭인 frame2에 콤보박스 채우기
ttk.Combobox(frame2).grid(row=0, column=0)
ttk.Combobox(frame2).grid(row=1, column=0)
ttk.Combobox(frame2).grid(row=2, column=0)

# 세 번째 탭인 frame3에 스핀박스 채우기(다음 포스팅에서 다룰 예정)
ttk.Spinbox(frame3, state="readonly", values=("1", "2", "3", "4", "5")).grid(row=0, column=0)
ttk.Spinbox(frame3, values=("1", "2", "3", "4", "5")).grid(row=1, column=0)
ttk.Spinbox(frame3, values=("1", "2", "3", "4", "5")).grid(row=2, column=0)

# tkinter 이벤트핸들러 시작
win.mainloop()

Python

실행해보면

지금까지 보여드렸던 기본위젯들 중 체크버튼, 콤보박스를 포함한

앞으로 보여드릴 위젯인 스핀박스를 각각의 탭에 추가해보았습니다.

마치기 전에 부록으로 세로탭을 구현하는 방법을 적어둡니다.

import tkinter as tk
from tkinter import ttk

# 탑레벨 win 인스턴스 생성
win = tk.Tk()
win.title("tkinter GUI")

# 세로탭 스타일(tabposition) 설정, 탭 위젯 생성 및 배치
ttk.Style(win).configure('lefttab.TNotebook', tabposition='wn')
tab = ttk.Notebook(win, style='lefttab.TNotebook')  # 위의 스타일 적용
tab.grid(row=0, column=0)

# 각 탭에 들어갈 프레임 생성
frame1 = tk.Frame(tab, padx=20, pady=20)
frame2 = tk.Frame(tab, padx=20, pady=20)
frame3 = tk.Frame(tab, padx=20, pady=20)

# 탭메뉴에 탭 세 개 추가(탭메뉴 안의 탭은 tab을 추가하는 게 아니라 tab.add로 만듦)
tab.add(frame1, text="체크버튼")
tab.add(frame2, text="콤보박스")
tab.add(frame3, text="스핀박스")

# 첫 번째 탭인 frame1에 체크버튼 채우기
ttk.Checkbutton(frame1, text="체크버튼1").grid(row=0, column=0)
ttk.Checkbutton(frame1, text="체크버튼2").grid(row=1, column=0)
ttk.Checkbutton(frame1, text="체크버튼3").grid(row=2, column=0)
ttk.Checkbutton(frame1, text="체크버튼4").grid(row=3, column=0)
ttk.Checkbutton(frame1, text="체크버튼5").grid(row=4, column=0)

# 두 번째 탭인 frame2에 콤보박스 채우기
ttk.Combobox(frame2).grid(row=0, column=0)
ttk.Combobox(frame2).grid(row=1, column=0)
ttk.Combobox(frame2).grid(row=2, column=0)
ttk.Combobox(frame2).grid(row=3, column=0)
ttk.Combobox(frame2).grid(row=4, column=0)

# 세 번째 탭인 frame3에 스핀박스 채우기(곧 다룰 예정)
ttk.Spinbox(frame3, state="readonly", values=("1", "2", "3", "4", "5")).grid(row=0, column=0)
ttk.Spinbox(frame3, values=("1", "2", "3", "4", "5")).grid(row=1, column=0)
ttk.Spinbox(frame3, values=("1", "2", "3", "4", "5")).grid(row=2, column=0)
ttk.Spinbox(frame3, values=("1", "2", "3", "4", "5")).grid(row=3, column=0)
ttk.Spinbox(frame3, values=("1", "2", "3", "4", "5")).grid(row=4, column=0)

# tkinter 이벤트핸들러 시작
win.mainloop()

Python

9~10번 라인이 탭을 세로로 옮기는 코드입니다.

ttk.Style을 이용하는 방법으로, 자주 쓰이는 코드는 아니지만,

조만간 스타일을 다루는 법도 포스팅으로 남겨두겠습니다.

 

위 코드를 실행해보면 탭이 좌측(w)상단(n)에 붙어 있는 걸 보실 수 있습니다.

여기까지 tkinter의 노트북(탭) 위젯을 사용하는 방법을 보여드렸습니다.

 

---

다음 포스팅

2022.11.27 - [기타/tkinter 한꼬집씩만 따라해보기] - 27. 다양한 메시지박스 생성하기

27. 다양한 메시지박스 생성하기