Tkinterで使われるlabelframeとは?活用方法から実用例を徹底解説
Tkinterのlabelframeを使ってみたいけれどもわからない。。悩んでいる方も多いのではないでしょうか?今回はTkinterで使われるlabelframeの活用方法から実用例を解説いたします。是非最後までご一読ください。
- そもそもTkinterで使われるlabelframeとは?
- labelframe Widgetとframe Widgetの違い
- 下準備
- Tkinterで活用されるlabelframe Widgetの定義
- labelframe Widgetの子要素を一括で編集
- ttk.Labelframe()を利用してみる
- まとめ
- 参考文献
執筆者 - おすすめの記事3選
そもそも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と呼ばれる。