[Python/tkinter] ttk.Notebookでウィンドウにタブを追加/表示する方法！

本記事では、GUI上にタブ付きウィジェットを作成するttk.Notebookメソッドの使い方を解説しています！

タブ付きウィジェットとは？

タブ付きウィジェットは、下図のようにタブを切り替えることで表示内容を変えることができるウィジェットです。

ttkモジュールに用意されている ttk.Notebook を利用すると、このようなウィンドウにタブを追加することができます。

すらいむ管理人

では実際に紹介していきたいと思います！

転職のためのスキルアップとして効率的に学びたい
副業としてプログラミングができるようになりたい
独学での勉強に限界を感じている

これらに該当する方はプログラミングスクールがスキルアップの近道です！

未経験でも安心！
おすすめなプログラミングスクールがあります！

人気のプログラミングスクールをチェック！

☆記事の信頼性

現役エンジニアである私が、初心者にも分かりやすくプログラミングの基礎を紹介しています。

ブックマークするといつでも確認することができます！

Table of Contents

ウィンドウにタブを表示するコード

では実際にウィンドウにタブを表示するためのコードを以下に示します。
以下の項目を実行すると、タブが3つ表示されたウィンドウを表示させることができます。

import tkinter as tk
import tkinter.ttk as ttk

def main():
    root = tk.Tk()
    root.geometry("400x300")
    root.title("切替えタブの作成")
    tab=ttk.Notebook(root,height=500)
#tabのフレーム作成
    tab1=tk.Frame(tab)
    tab2=tk.Frame(tab)
    tab3=tk.Frame(tab)
#タブの追加
    tab.add(tab1,text="タブ1",padding=3)
    tab.add(tab2, text="タブ2", padding=3)
    tab.add(tab3, text="タブ3", padding=3)
#タブの配置
    tab.pack(anchor="nw")
#各タブ関数を実行しタブを表示
    tab1_main(tab1)
    tab2_main(tab2)
    tab3_main(tab3)
    root.mainloop()

#各タブ画面のレイアウト
def tab1_main(tab1):
    tab1_name=tk.Label(tab1,text="HELLO")
    tab1_name.pack()
def tab2_main(tab2):
    tab2_name=tk.Label(tab2,text="Good Morning")
    tab2_name.pack()
def tab3_main(tab3):
    tab3_name=tk.Label(tab3,text="Good Night")
    tab3_name.pack()

if __name__=="__main__":
    main()

すらいむ管理人

タブを活用することで限られたスペースであってもたくさんの情報を埋め込むことができそうですね！

詳しい解説は、次項目以降で解説していきます。

コードの解説

ウィンドウの作成

ttk.Notebook を利用してタブを作成する前に、 tkinter で GUI ウィンドウを作成する必要があります。それが以下のコードになります。

def main():
    root = tk.Tk()
    root.geometry("400x300")
    root.title("切替えタブの作成")

Notebook ウィジェットの作成

次に、①でメインウィンドウ上に Notebook ウィジェットを作成します。

ttk.Notebook() 内の第一引数は親ウィジェットを指定します。
第二引数以降には追加したいオプションを追加します。
追加できるオプションについては、次の見出しで説明しています。

そして、追加したいタブの数だけ②に示したようにフレームを作成します。tk.Frame() の () 内にはNotebookウィジェットを選択します。

# ① Notebookウィジェットを作成   
 tab=ttk.Notebook(root,height=500)

# ② tabのフレーム作成
    tab1=tk.Frame(tab)
    tab2=tk.Frame(tab)
    tab3=tk.Frame(tab)

Notebookウィジェットに実装できるオプション

Notebookウィジェットに実装できるオプションを以下に示します。

height	ウィジェットの高さ指定
width	ウィジェットの横幅指定
cursor	マウスがウィジェット上をホバーしている時の形状指定
padding	ウィジェットの余白指定

paddingの表示例

notebook-image4 — padding なしの場合の Notebook ウィジェット

notebook-image5 — padding = 15 の場合の Notebook ウィジェット

paddingを使用すると端の余白部分を設定できるためGUIを見やすくする上で有効です。

すらいむ管理人

個人的にpaddingは結構使用する場面多いです！

タブの設定

タブのフレームを追加した後で、それらのフレームを Notebook ウィジェットに設置していきます(③参照)。
そして④で、フレーム設置後の Notebook ウィジェットをウィンドウ上に配置します。

そして⑤では、それぞれのタブ上で実行する関数を定義しています。

# ③ Notebookウィジェットにタブを設置
    tab.add(tab1,text="タブ1",padding=3)
    tab.add(tab2, text="タブ2", padding=3)
    tab.add(tab3, text="タブ3", padding=3)

# ④ タブの配置
    tab.pack(anchor="nw")

# ⑤ 各タブ関数を実行しタブを表示
    tab1_main(tab1)
    tab2_main(tab2)
    tab3_main(tab3)
    root.mainloop()

設置するそれぞれのタブに padding を設置した場合のウィンドウ

設置するそれぞれのタブのオプションとして padding を設定した場合にウィンドウがどのように表示されるか見てみましょう。

また、タブの配置方法（ .pack() や anchor などの使い方）については詳しくコチラの記事で解説していますので知りたい方は是非覗いてみて下さい！

参考：ボタンやウィジェットの設置方法

各タブ内の処理

最後に、各タブ内での処理をそれぞれ def 関数内に書いていきます。

今回のプログラムでは、それぞれのタブに “HELLO” , “Good Morning” , “Good Night“を表示するように設定しています。

他にも、この def 関数内にボタンを配置したり canvas を配置したりすることで、各タブ毎に異なる画面を表示させることができます。

def tab1_main(tab1):
    tab1_name=tk.Label(tab1,text="HELLO")
    tab1_name.pack()

def tab2_main(tab2):
    tab2_name=tk.Label(tab2,text="Good Morning")
    tab2_name.pack()

def tab3_main(tab3):
    tab3_name=tk.Label(tab3,text="Good Night")
    tab3_name.pack()

以上となります。最後まで見ていただきありがとうございました！

書籍も紹介していますので効率的なPython学習に是非参考にしてみてください！