KURORO BLOGのロゴ

このエントリーをはてなブックマークに追加
Tkinterで使われるlabelframeとは?活用方法から実用例を徹底解説

Tkinterで使われるlabelframeとは?活用方法から実用例を徹底解説

Tkinterのlabelframeを使ってみたいけれどもわからない。。悩んでいる方も多いのではないでしょうか?今回はTkinterで使われるlabelframeの活用方法から実用例を解説いたします。是非最後までご一読ください。

目次
  1. そもそもTkinterで使われるlabelframeとは?
    1. Tkinterの構成要素
  2. labelframe Widgetとframe Widgetの違い
  3. 下準備
  4. Tkinterで活用されるlabelframe Widgetの定義
    1. borderwidth, bd
    2. cursor
    3. fg, foreground
    4. padx, pady
    5. height, width
    6. background, bg
    7. font
    8. relief
    9. text
    10. labelanchor
    11. labelwidget
  5. labelframe Widgetの子要素を一括で編集
  6. ttk.Labelframe()を利用してみる
    1. 使用できるoptionに違いがある
    2. テーマ(名前)を利用して、labelframe Widgetの外観を変更
  7. まとめ
  8. 参考文献
目次を開く⬇︎

そもそもTkinterで使われるlabelframeとは?

Tkinterで使われるlabelframeとは、Widgetの一種で1つ以上のWidgetを取りまとめるもの = Frameを意味します。

別名labelframe Widgetなどと呼ばれます。

聞き慣れない言葉が出てきて少し難しいですね。。以下の「Tkinterの構成要素」を確認しながら、理解を深めましょう。

Tkinterの構成要素

Tkinterの構成要素として、Window, Frame, Widgetの概念が存在します。

名称説明文
Window  画像における青色枠の部分になります。Tkinter画面全体を表します。
Frame画像における黄緑色枠になります。Widgetが1つ以上あった場合に、取りまとめるものです。
Widget紫色枠で囲まれている部分になります。1つの機能を持つ最小単位 = Widgetと考えると良いでしょう。

前の章でTkinterで利用するlabelframeとは、Widgetの一種で1つ以上のWidgetを取りまとめるもの = Frameとお伝えしました。

「Tkinterの構成要素」の画像内では、黄緑色枠に該当するFrameに対して、編集することになります。

Tkinterの構成要素を理解したところで、実際にlabelframeの活用方法を理解していきましょう。

Widgetの一種と書かれているので、Widgetと混同される方も多いと思います。正確に説明すると、labelframeは、1つの機能を持つ最小単位としてWidgetの一種であり、主な役割としてFrameとして働きます。要するに両側面(Widget, Frame)の役割を持っていますが、「Frame」として使う場面が多いため、普段使いではFrameと定義していると考えてください。

labelframe Widgetとframe Widgetの違い

先ほどは「Tkinterの構成要素」を確認して、labelframe Widget = Frameであることを説明しました。

しかし同じくFrameの役割を持つ、frame Widgetとの違いを解説していませんでした。

labelframe Widgetとframe Widgetの違いを簡単に説明すると、

  • 枠が付けられる
  • 枠にラベル(名前)をつけられる

点が異なります。

以下の画像をご確認ください。

labelframe Widgetの方だけ、枠が付けられて、枠にラベル(名前)がつけられます

frame Widgetに関しては、【入門者必見】Tkinterで活用されるframeとは?実用例を通して徹底解説で総括していますので、詳しく知りたい方は是非ご確認ください。

下準備

今回は先ほど紹介した「Tkinterの構成要素」の画像を元に、labelframeの使い方をお伝えします。

下にコードを貼り付けておきますので、画像と見比べながら、コードを確認してみてください。できれば、一緒にlabelframeを体験しましょう。

1import tkinter as tk
2
3class Application(tk.Frame):
4    def __init__(self, master=None):
5        # Windowの初期設定を行う。
6        super().__init__(master)
7
8        # Windowの画面サイズを設定する。
9        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
10        self.master.geometry("300x200")
11
12        # Windowを親要素として、labelframe Widget(Frame)を作成する。
13        # text : テキスト情報
14        # width : 幅の設定
15        # height : 高さの設定
16        labelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300)
17
18        # Windowを親要素とした場合に、labelframe Widget(Frame)をどのように配置するのか?
19        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
20        labelframe.pack()
21
22        # labelframe Widget(Frame)を親要素として、label Widgetを作成する。
23        # text : テキスト情報
24        # width : 幅の設定
25        # height : 高さの設定
26        # bg : 背景色の設定
27        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
28        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
29        label = tk.Label(labelframe, text="label", width=30, height=15, bg="blue")
30
31        # labelFrame Widget(Frame)を親要素とした場合に、label Widgetをどのように配置するのか?
32        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
33        label.pack()
34
35# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
36if __name__ == "__main__":
37    # Windowを生成する。
38    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
39    root = tk.Tk()
40
41    app = Application(master=root)
42    # Windowをループさせて、継続的にWindow表示させる。
43    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
44    app.mainloop()

上記のコードをPython環境で実行すると、「Tkinterの構成要素」で紹介した画像の結果が表示されます。

Tkinterで活用されるlabelframe Widgetの定義

labelframe Widgetは、

1tk.LabelFrame(option1, option2, ...) or tk.LabelFrame('親要素', option1, option2, ...)

で定義されます。

labelframe Widgetで使われるoptionの種類としては

  • borderwidth, bd
  • cursor
  • fg, foreground
  • padx, pady
  • height, width
  • background, bg
  • font
  • relief
  • text
  • labelanchor
  • labelwidget

があります。順番に見ていきましょう。

※ optionの種類一覧を調べたい場合は、以下のようにコードを記述してご確認ください。

1import tkinter as tk
2
3# labelframeを生成する。
4labelframe = tk.LabelFrame()
5# labelframeに関するoptionの種類一覧を取得する。
6print(labelframe.keys())

borderwidth, bd

borderwidth option, bd optionを利用すると、labelframe Widgetの枠の大きさを設定します。

borderwidthとbd両方のoptionに値を設定した場合、後ろの引数に設定されるoptionが優先されます。

例えば下準備コードのlabelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# labelframe = tk.LabelFrame(self.master)
3# labelframe.config(text="labelframe", width=300, height=300, borderwidth=15) or labelframe.configure(text="labelframe", width=300, height=300, borderwidth=15)
4##################################
5labelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300, borderwidth=15)

以下の画像のようにlabelframe Widgetを描画します。

cursor

cursor optionを利用すると、labelframe Widget内へマウスカーソルを移動すると矢印の見た目を変化します。

見た目のバリエーションについてはこちらのサイトにまとまっていますので、ご確認ください。

例えば下準備コードのlabelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300)箇所を、以下のように変更して

1# 別解法 ##########################
2# labelframe = tk.LabelFrame(self.master)
3# labelframe.config(text="labelframe", width=300, height=300, cursor="clock") or labelframe.configure(text="labelframe", width=300, height=300, cursor="clock")
4##################################
5labelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300, cursor="clock")

labelframe Widget内へマウスカーソルを移動すると、矢印の見た目が変更します。

fg, foreground

fg option, foreground optionを利用すると、枠に備えられる文字列色を変更できます。

fgとforeground両方のoptionを用いて、値を設定した場合、後ろの引数に設定されるoptionが優先されます。

色に関しては、Tkinterの色の使い方とは?活用例から色の一覧をまとめて紹介!?で総括していますので、詳しく知りたい方は是非ご確認ください。

例えば下準備コードのlabelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# labelframe = tk.LabelFrame(self.master)
3# labelframe.config(text="labelframe", width=300, height=300, fg="red") or labelframe.configure(text="labelframe", width=300, height=300, fg="red")
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6labelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300, fg="red")

以下の画像のようにlabelframe Widgetを描画します。

padx, pady

padx option, pady optionを利用すると、枠の内側へ空白の幅を設定できます。

例えば下準備コードのlabelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# labelframe = tk.LabelFrame(self.master)
3# labelframe.config(text="labelframe", width=300, height=300, padx=30, pady=30) or labelframe.configure(text="labelframe", width=300, height=300, padx=30, pady=30)
4##################################
5labelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300, padx=30, pady=30)

以下の画像のようにlabelframe Widgetを描画します。

height, width

height option, width optionを利用すると、labelframe Widgetの高さ、幅を設定できます。

例えば下準備コードを、以下のように変更すると、

1-    labelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300)
2+    labelframe = tk.LabelFrame(self.master, text="labelframe", width=500, height=500)
3+    # 子要素にWidgetを持つ場合(今回ならlabel Widgetが子要素)、子要素のWidgetで設定されたheight, widthが優先されます。親要素のwidth, heightを優先するために、propagateの値をFalseにします。
4+    labelframe.propagate(False)

以下の画像のようにlabelframe Widgetを描画します。

background, bg

background option, bg optionを利用すると、labelframe Widgetの枠の背景色を設定します。

backgroundとbg両方のoptionを用いて、値を設定した場合、後ろの引数に設定されるoptionが優先されます。

例えば下準備コードのlabelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# labelframe = tk.LabelFrame(self.master)
3# labelframe.config(text="labelframe", width=300, height=300, background="red") or labelframe.configure(text="labelframe", width=300, height=300, background="red")
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6labelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300, background="red")

以下の画像のようにlabelframe Widgetを描画します。

font

font optionを利用すると、文字の形式や大きさを変更できます。

fontに関しては、Tkinterで使われるフォントって?2種類のフォントの設定方法を丁寧に解説でまとめておりますので、詳しく知りたい方は是非ご確認ください。

例えば下準備コードのlabelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# labelframe = tk.LabelFrame(self.master)
3# labelframe.config(text="labelframe", width=300, height=300, font=("", 50, "underline")) or labelframe.configure(text="labelframe", width=300, height=300, font=("", 50, "underline"))
4##################################
5# fontについて : https://kuroro.blog/python/RZNjLl36upkumxwkTRWl/
6labelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300, font=("", 50, "underline"))

以下の画像のようにlabelframe Widgetを描画します。

relief

relief optionを設定すると、labelframe Widgetの枠のデザインを設定できます。

指定方法としては、

  • tk.RAISED
  • tk.SUNKEN
  • tk.FLAT
  • tk.RIDGE
  • tk.GROOVE
  • tk.SOLID

の6種類があります。

例えば下準備コードのlabelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# labelframe = tk.LabelFrame(self.master)
3# labelframe.config(text="labelframe", width=300, height=300, bd=5, relief=tk.SUNKEN) or labelframe.configure(text="labelframe", width=300, height=300, bd=5, relief=tk.SUNKEN)
4##################################
5labelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300, bd=5, relief=tk.SUNKEN)

以下の画像のようにlabelframe Widgetを描画します。

text

text optionを利用すると、labelframe Widgetで利用する枠の文字列を設定できます。

例えば下準備コードのlabelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# labelframe = tk.LabelFrame(self.master)
3# labelframe.config(text="おはよう", width=300, height=300) or labelframe.configure(text="おはよう", width=300, height=300)
4##################################
5labelframe = tk.LabelFrame(self.master, text="おはよう", width=300, height=300)

以下の画像のようにlabelframe Widgetを描画します。

labelanchor

labelanchor optionを利用すると、labelframe Widgetで利用する、枠の文字列の配置を設定できます。

labelanchor optionを利用する際は、以下の画像を参考に、配置したい場所を考えて、該当箇所の文字列をご利用ください。

例えば下準備コードのlabelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# labelframe = tk.LabelFrame(self.master)
3# labelframe.config(text="labelframe", width=300, height=300, labelanchor='n') or labelframe.configure(text="labelframe", width=300, height=300, labelanchor='n')
4##################################
5labelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300, labelanchor='n')

以下の画像のようにlabelframe Widgetを描画します。

labelwidget

labelwidget optionを利用すると、labelframe Widgetで利用する枠の文字列を、Widgetへ置き換えることができます。

例えば下準備コードを、以下のように変更すると、

1+     # label Widgetを作成する。
2+     # text : テキスト情報
3+     # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
4+     label = tk.Label(text='テスト')
5-     labelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300)
6+     # labelwidget : 枠の文字列をlabel Widgetとする。
7+     labelframe = tk.LabelFrame(self.master, width=300, height=300, labelwidget=label)

以下の画像のようにlabelframe Widgetを描画します。

labelframe Widgetの子要素を一括で編集

labelframe Widget内でたくさんの子要素を抱えて、一括で編集したい場合もあるかと思います。

子要素を一括で編集したい場合、winfo_children()関数を利用すると便利です。

winfo_children()関数を活用すると、labelframe Widgetの子要素一覧を取得できます。

例えば以下のようなコードを記述すると、

1import tkinter as tk
2
3class Application(tk.Frame):
4    def __init__(self, master=None):
5        super().__init__(master)
6        self.master.geometry("300x200")
7
8        labelframe = tk.LabelFrame(self.master, text="labelframe", width=300, height=300)
9        labelframe.pack()
10
11        # winfo_children()を利用してbgを変更しない場合、blueで表示される。
12        label1 = tk.Label(labelframe, text="label", width=10, height=10, bg="blue")
13        label1.pack()
14        # winfo_children()を利用してbgを変更しない場合、redで表示される。
15        label2 = tk.Label(labelframe, text="label", width=10, height=10, bg="red")
16        label2.pack()
17        # winfo_children()を利用してbgを変更しない場合、yellowで表示される。
18        label3 = tk.Label(labelframe, text="label", width=10, height=10, bg="yellow")
19        label3.pack()
20        
21        # labelframe Widgetの子要素を一覧取得する。
22        for child in labelframe.winfo_children():
23            # 子要素の背景色を緑色に変更する。
24            child['bg'] = 'green'
25
26if __name__ == "__main__":
27    # Windowを生成する。
28    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
29    root = tk.Tk()
30
31    app = Application(master=root)
32    app.mainloop()

winfo_children()関数によって子要素一覧を取得し、以下の画像のように、全ての子要素(label Widget)を編集(緑色に描画)できます。

ttk.Labelframe()を利用してみる

ttk.Labelframe()とは、テーマ(名前)を指定して、外観を変更するlabelframe Widgetを意味します。

labelframe Widgetの拡張と考えるとよいでしょう。tkinterのversion 8.5で導入されました。

ttk.Labelframe()を利用するためには、tkinterからttkをimportする必要があります。

1# tkinterからttkをimportする
2from tkinter import ttk

tk.Labelframe()との違いとしては、

  • 使用できるoptionに違いがある
  • テーマ(名前)を利用して、labelframe widgetの外観を変更する

があります。順に見ていきましょう。

使用できるoptionに違いがある

こちらはコードの結果を確認するとわかります。

例えば以下のようなコードを作成すると、

1import tkinter as tk
2from tkinter import ttk
3
4class Application(tk.Frame):
5    def __init__(self, master=None):
6        # Windowの初期設定を行う。
7        super().__init__(master)
8
9        # Windowの画面サイズを設定する。
10        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
11        self.master.geometry("300x200")
12
13        # Windowを親要素として、ttk labelframe Widget(Frame)を作成する。
14        ttkLabelFrame = ttk.LabelFrame(self.master)
15        print('ttk.LabelFrame option : ')
16        print(ttkLabelFrame.keys())
17
18        # Windowを親要素として、labelframe Widget(Frame)を作成する。
19        labelFrame = tk.LabelFrame(self.master)
20        print('tk.LabelFrame option : ')
21        print(labelFrame.keys())
22
23# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
24if __name__ == "__main__":
25    # Windowを生成する。
26    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
27    root = tk.Tk()
28
29    app = Application(master=root)
30    # Windowをループさせて、継続的にWindow表示させる。
31    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
32    app.mainloop()

以下の画像のように、optionの種類に差分が発生します。

テーマ(名前)を利用して、labelframe Widgetの外観を変更

ttk.Labelframe()では、テーマ(名前)を指定することで、labelframe Widgetの外観を変更できます。

例えば以下のようなコードを作成すると、

1import tkinter as tk
2from tkinter import ttk
3
4class Application(tk.Frame):
5    def __init__(self, master=None):
6        # Windowの初期設定を行う。
7        super().__init__(master)
8
9        # Windowの画面サイズを設定する。
10        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
11        self.master.geometry("300x200")
12
13        # ttk.LabelFrame()の外観を変更
14        style = ttk.Style()
15        # テーマ(名前)の指定を行う。
16        style.theme_use('classic')
17
18        # Windowを親要素として、ttk labelframe Widget(Frame)を作成する。
19        # width : 幅の設定
20        # height : 高さの設定
21        # borderwidth : 枠の大きさを設定
22        # relief : 枠のデザインを設定
23        ttkLabelFrame = ttk.LabelFrame(self.master, width=200, height=100, borderwidth=10, relief='sunken')
24
25        # Windowを親要素として、labelframe Widget(Frame)を作成する。
26        # width : 幅の設定
27        # height : 高さの設定
28        # borderwidth : 枠の大きさを設定
29        # relief : 枠のデザインを設定
30        labelFrame = tk.LabelFrame(self.master, width=200, height=100, borderwidth=10, relief='sunken')
31
32        # Windowを親要素とした場合に、ttk labelframe Widget(Frame)をどのように配置するのか?
33        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
34        ttkLabelFrame.pack()
35
36        # Windowを親要素とした場合に、labelframe Widget(Frame)をどのように配置するのか?
37        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
38        labelFrame.pack()
39
40# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
41if __name__ == "__main__":
42    # Windowを生成する。
43    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
44    root = tk.Tk()
45
46    app = Application(master=root)
47    # Windowをループさせて、継続的にWindow表示させる。
48    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
49    app.mainloop()

以下の画像のように、labelframe Widgetを描画します。

また現在利用中のテーマ(名前)を確認する場合は、

1from tkinter import ttk
2
3style = ttk.Style()
4# 現在利用中のテーマ(名前)を確認
5currentTheme = style.theme_use() 
6print(currentTheme)

利用できるテーマ(名前)の一覧を確認する場合は、

1from tkinter import ttk
2
3style = ttk.Style() 
4# テーマ(名前)の一覧を確認
5allTheme = style.theme_names() 
6print(allTheme)

テーマ(名前)の指定を行う場合は、

1from tkinter import ttk
2
3style = ttk.Style()
4# テーマ(名前)の指定を行う。
5style.theme_use('テーマ(名前)') 

をご利用ください。

まとめ

  • Tkinterは、Window, Frame, Widgetで構成される。
  • Tkinterで使われるlabelframeとは、Widgetの一種で1つ以上のWidgetを取りまとめるもの = Frameを意味します。
  • 別名labelframe Widgetと呼ばれる。

参考文献