Python Tkinterで折りたたみ可能なペイン(Collapsible Pane)を作成する方法

Tkinterは、Pythonに標準搭載されているGUI構築用ライブラリです。本記事では、このTkinterを使って「折りたたみ可能なペイン(Collapsible Pane)」を作成する方法を解説します。

折りたたみ可能なペインは、GUIキャンバス上に大量のデータを表示したいものの、常に画面に出しておきたくない場合に非常に便利です。必要なときだけ展開して内容を確認でき、不要なときは折りたたんで画面スペースを節約できます。

折りたたみペインの実装例

以下のプログラムは、矢印(チェックボタン)をクリックして展開・折りたたんだ両方の状態を確認できる折りたたみペインを作成するサンプルです。コード内のコメントに、各ステップでのアプローチを記載しています。

from tkinter import *
import tkinter as tk
from tkinter import ttk
from tkinter.ttk import *

class cpane(ttk.Frame):
    def __init__(self, MainWindow, expanded_text, collapsed_text):
        ttk.Frame.__init__(self, MainWindow)
        # クラス変数の設定
        self.MainWindow = MainWindow
        self._expanded_text = expanded_text
        self._collapsed_text = collapsed_text
        # 必要に応じてサイズが拡張されるよう weight=1 を設定
        self.columnconfigure(1, weight=1)
        self._variable = tk.IntVar()
        # チェックボタンの作成
        self._button = ttk.Checkbutton(self, variable=self._variable,
        command=self._activate, style="TButton")
        self._button.grid(row=0, column=0)
        # 水平線(セパレータ)の作成
        self._separator = ttk.Separator(self, orient="horizontal")
        self._separator.grid(row=0, column=1, sticky="we")
        self.frame = ttk.Frame(self)
        # クラスの初期状態を有効化
        self._activate()

    def _activate(self):
        if not self._variable.get():
            # ボタンが押されたらウィジェットを非表示にする
            self.frame.grid_forget()
            # 折りたたみ時のテキストを表示
            self._button.configure(text=self._collapsed_text)
        elif self._variable.get():
            # 必要に応じてフレーム領域を拡張
            self.frame.grid(row=1, column=0, columnspan=2)
            self._button.configure(text=self._expanded_text)

    def toggle(self):
        self._variable.set(not self._variable.get())
        self._activate()

# ルートウィンドウ(メインウィンドウ)の作成
root = Tk()
root.geometry('300x300')
# 折りたたみペインコンテナのオブジェクトを作成
cpane_obj = cpane(root, 'Close Me', 'Open Me!')
cpane_obj.grid(row=0, column=0)
# 折りたたみペイン内に表示するボタン類
b = Button(cpane_obj.frame, text=" Frame Expanded").grid(
    row=1, column=2, pady=20)
b = Checkbutton(cpane_obj.frame, text="Hi There ! How are you doing?").grid(
    row=3, column=4, pady=20)
mainloop()

実行結果

上記のコードを実行すると、次のような結果が得られます。

仕組みのポイント

この実装の核となるのは、ttk.Checkbuttonとgrid_forget()メソッドの組み合わせです。チェックボタンの状態変数(IntVar)の値に応じて、内部フレームの表示・非表示を切り替えることで、ペインの開閉を実現しています。

• 展開時: grid()でフレームを再配置し、ボタンのテキストを「Close Me」など展開状態を示す文字列に変更します。
• 折りたたみ時: grid_forget()でフレームを画面から取り除き、ボタンのテキストを「Open Me!」など折りたたみ状態を示す文字列に変更します。

また、toggle()メソッドを用意することで、外部からもプログラム的に開閉を制御できる柔軟な設計になっています。アコーディオンメニューや設定パネルなど、さまざまなGUIアプリケーションに応用できます。