Tkinter LabelFrame：親しみやすく実用的なガイド

1 LabelFrameとは？

LabelFrameは、Tkinterのコンテナウィジェットで、関連するコントロールのグループの周りに境界線とタイトルを描画します。セクションを整理する標準的な方法であり、関連する設定をまとめたラベル付きカードと考えてください。

設定ダイアログ、設定パネル、データ入力画面などで見られます。ウィジェットを視覚的かつ意味論的にグループ化するため、ユーザーは何が一緒になり、何がそうでないかを理解しやすくなります。

目標：個人情報、アプリケーション設定、通知設定を保持するLabelFrameを使用して、クリーンな設定ウィンドウを構築する。

2 前提条件

LabelFrameは、Pythonに付属するTkinterのttkモジュールの一部です。Python 3.7以上と標準ライブラリがあればよく、追加のパッケージは不要です。

バージョンを確認してください：

python --version

3 アプリケーションウィンドウの作成

Tkをサブクラス化して、最小限の設定ウィンドウを構築することから始めます。これにより、後続のコンポーネントに整然としたエントリポイントが提供されます。

import tkinter as tk
from tkinter import ttk

class SettingsApp(tk.Tk):
    def __init__(self):
        super().__init__()
        self.title("Application Settings (LabelFrame Demo)")
        self.geometry("600x400")
        self.configure(bg='#f0f0f0')

        # Main container with padding
        main_container = ttk.Frame(self, padding="20")
        main_container.pack(fill=tk.BOTH, expand=True)

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

4 最初のLabelFrame：個人情報

「個人情報」用のLabelFrameを作成し、2つのラベル付きフィールドを追加します。エントリーフィールドが水平方向に展開するようにグリッドを構成します。

    def create_personal_info_frame(self, parent: ttk.Frame) -> None:
        personal_frame = ttk.LabelFrame(
            parent,
            text="Personal Information",
            padding="10"
        )
        personal_frame.pack(fill=tk.X, pady=(0, 10))

        ttk.Label(personal_frame, text="Name:").grid(row=0, column=0, sticky=tk.W, pady=5)
        ttk.Entry(personal_frame).grid(row=0, column=1, sticky=tk.EW, padx=(10, 0))

        ttk.Label(personal_frame, text="Email:").grid(row=1, column=0, sticky=tk.W, pady=5)
        ttk.Entry(personal_frame).grid(row=1, column=1, sticky=tk.EW, padx=(10, 0))

        personal_frame.columnconfigure(1, weight=1)

5 2番目のLabelFrame：アプリケーション設定

設定用の2番目のLabelFrameを追加します。テーマと言語にはComboboxを使用します。「state="readonly"」を設定すると、自由形式の編集を防ぐことができます。

    def create_preferences_frame(self, parent: ttk.Frame) -> None:
        pref_frame = ttk.LabelFrame(parent, text="Application Preferences", padding="10")
        pref_frame.pack(fill=tk.X, pady=(0, 10))

        ttk.Label(pref_frame, text="Theme:").grid(row=0, column=0, sticky=tk.W, pady=5)
        theme_combo = ttk.Combobox(pref_frame, values=["Light", "Dark", "System"], state="readonly")
        theme_combo.set("Light")
        theme_combo.grid(row=0, column=1, sticky=tk.EW, padx=(10, 0))

        ttk.Label(pref_frame, text="Language:").grid(row=1, column=0, sticky=tk.W, pady=5)
        lang_combo = ttk.Combobox(pref_frame, values=["English", "Spanish", "French", "German"], state="readonly")
        lang_combo.set("English")
        lang_combo.grid(row=1, column=1, sticky=tk.EW, padx=(10, 0))

        pref_frame.columnconfigure(1, weight=1)

6 3番目のLabelFrame：通知設定

トグル用の3番目のLabelFrameを作成します。オン/オフスタイルのオプションにはCheckbuttonを使用します。このフレームは、列の展開は必要ありません。

    def create_notification_frame(self, parent: ttk.Frame) -> None:
        notif_frame = ttk.LabelFrame(parent, text="Notification Settings", padding="10")
        notif_frame.pack(fill=tk.X)

        ttk.Checkbutton(notif_frame, text="Enable email notifications").grid(row=0, column=0, sticky=tk.W, pady=2)
        ttk.Checkbutton(notif_frame, text="Enable desktop notifications").grid(row=1, column=0, sticky=tk.W, pady=2)
        ttk.Checkbutton(notif_frame, text="Enable sound notifications").grid(row=2, column=0, sticky=tk.W, pady=2)

7 init でメソッドを呼び出す

次に、3つのヘルパーメソッドを__init__から呼び出して、セクションを順番に配置します。

    def __init__(self):
        super().__init__()
        self.title("Application Settings (LabelFrame Demo)")
        self.geometry("600x400")
        self.configure(bg='#f0f0f0')

        main_container = ttk.Frame(self, padding="20")
        main_container.pack(fill=tk.BOTH, expand=True)

        self.create_personal_info_frame(main_container)
        self.create_preferences_frame(main_container)
        self.create_notification_frame(main_container)

8 スタイリングとパディング

padding引数は、各LabelFrameの内側にスペースを追加し、コンテンツが境界線にぴったりくっつくのを防ぎます。タイトルは短く、説明的にしてください。

macOSとWindowsでは、LabelFrameの外観はネイティブテーマに従います。Linuxでttkを使用すると、表示は異なる場合があります。プラットフォーム間で正確な色に依存することは避けてください。

9 レイアウト：grid vs. pack

LabelFrame内では、gridはラベル付きフォームに最適です。エントリーが利用可能な幅を埋めるように、列1にweight=1を設定します。列を必要としないトグルには、packまたは単一行gridで十分です。

padyとstickyを一貫して使用して、行を整列させ、まとまりのある感じにします。sticky=EWは、ウィンドウがリサイズされたときにフィールドが水平方向に展開することを保証します。

10 完全なソースコード

完全な例をコピーして実行し、3つのラベル付きセクションを確認してください。

注：このレッスンにはビデオ解説もあります。

import tkinter as tk
from tkinter import ttk

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

        # Configure the main window
        self.title("Application Settings (LabelFrame Demo)")
        self.geometry("600x400")
        self.configure(bg='#f0f0f0')

        # Create the main container with padding
        main_container = ttk.Frame(self, padding="20")
        main_container.pack(fill=tk.BOTH, expand=True)

        # Create and pack the personal info section
        self.create_personal_info_frame(main_container)

        # Create and pack the preferences section
        self.create_preferences_frame(main_container)

        # Create and pack the notification settings
        self.create_notification_frame(main_container)

    def create_personal_info_frame(self, parent: ttk.Frame) -> None:
        """Creates a LabelFrame for personal information settings."""
        personal_frame = ttk.LabelFrame(
            parent,
            text="Personal Information",
            padding="10"
        )
        personal_frame.pack(fill=tk.X, pady=(0, 10))

        # Create and pack the form elements
        ttk.Label(personal_frame, text="Name:").grid(row=0, column=0, sticky=tk.W, pady=5)
        ttk.Entry(personal_frame).grid(row=0, column=1, sticky=tk.EW, padx=(10, 0))

        ttk.Label(personal_frame, text="Email:").grid(row=1, column=0, sticky=tk.W, pady=5)
        ttk.Entry(personal_frame).grid(row=1, column=1, sticky=tk.EW, padx=(10, 0))

        # Configure grid column weights
        personal_frame.columnconfigure(1, weight=1)

    def create_preferences_frame(self, parent: ttk.Frame) -> None:
        """Creates a LabelFrame for application preferences."""
        pref_frame = ttk.LabelFrame(
            parent,
            text="Application Preferences",
            padding="10"
        )
        pref_frame.pack(fill=tk.X, pady=(0, 10))

        # Theme selection
        ttk.Label(pref_frame, text="Theme:").grid(row=0, column=0, sticky=tk.W, pady=5)
        theme_combo = ttk.Combobox(
            pref_frame, 
            values=["Light", "Dark", "System"],
            state="readonly"
        )
        theme_combo.set("Light")
        theme_combo.grid(row=0, column=1, sticky=tk.EW, padx=(10, 0))

        # Language selection
        ttk.Label(pref_frame, text="Language:").grid(row=1, column=0, sticky=tk.W, pady=5)
        lang_combo = ttk.Combobox(
            pref_frame,
            values=["English", "Spanish", "French", "German"],
            state="readonly"
        )
        lang_combo.set("English")
        lang_combo.grid(row=1, column=1, sticky=tk.EW, padx=(10, 0))

        # Configure grid column weights
        pref_frame.columnconfigure(1, weight=1)

    def create_notification_frame(self, parent: ttk.Frame) -> None:
        """Creates a LabelFrame for notification settings."""
        notif_frame = ttk.LabelFrame(
            parent,
            text="Notification Settings",
            padding="10"
        )
        notif_frame.pack(fill=tk.X)

        # Email notifications
        ttk.Checkbutton(
            notif_frame,
            text="Enable email notifications"
        ).grid(row=0, column=0, sticky=tk.W, pady=2)

        # Desktop notifications
        ttk.Checkbutton(
            notif_frame,
            text="Enable desktop notifications"
        ).grid(row=1, column=0, sticky=tk.W, pady=2)

        # Sound notifications
        ttk.Checkbutton(
            notif_frame,
            text="Enable sound notifications"
        ).grid(row=2, column=0, sticky=tk.W, pady=2)

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

実行：python settings_app.py

11 ビデオとまとめ

もし視聴を好むなら、LabelFrameの使用法と基本的なレイアウトに関する短い解説ビデオがあります。

まとめ：LabelFrameはUIセクションを整理し、名前を付け、明確さを向上させます。パディング、明確なタイトル、列の重みを使用して、フォームを一貫性があり応答性の高いものに保ちます。