作成日 : 2021-05-12
更新日 : 2021-11-03
30 min readPythonTkinter

【入門者必見】Tkinterで活用されるframeとは?実用例を通して徹底解説

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

そもそもTkinterで利用されるframeとは?

Tkinterで利用されるframeとは、1つ以上のWidgetを取りまとめるもの = Frameを意味します。

別名frame Widgetと呼ばれます。

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

Tkinterの構成要素

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

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

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

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

下準備

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

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

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を親要素として、frame Widget(Frame)を作成する。
13        frame = tk.Frame(self.master)
14
15        # Windowを親要素とした場合に、frame Widget(Frame)をどのように配置するのか?
16        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
17        frame.pack()
18
19        # frame Widget(Frame)を親要素として、label Widgetを作成する。
20        # text : テキスト情報
21        # width : 幅の設定
22        # height : 高さの設定
23        # bg : 背景色の設定
24        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
25        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
26        label1 = tk.Label(frame, text="label1", width=10, height=5, bg="green")
27
28        # frame Widget(Frame)を親要素とした場合に、label Widgetをどのように配置するのか?
29        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
30        label1.pack()
31
32        # frame Widget(Frame)を親要素として、label Widgetを作成する。
33        # text : テキスト情報
34        # width : 幅の設定
35        # height : 高さの設定
36        # bg : 背景色の設定
37        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
38        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
39        label2 = tk.Label(frame, text="label2", width=10, height=5, bg="blue")
40
41        # frame Widget(Frame)を親要素とした場合に、label Widgetをどのように配置するのか?
42        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
43        label2.pack()
44
45# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
46if __name__ == "__main__":
47    # Windowを生成する。
48    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
49    root = tk.Tk()
50
51    app = Application(master=root)
52    # Windowをループさせて、継続的にWindow表示させる。
53    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
54    app.mainloop()

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

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

frame Widgetは、

1import tkinter as tk
2
3tk.Frame(option1, option2, ...) or tk.Frame('親要素', option1, option2, ...)

で定義されます。

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

• borderwidth, bd
• relief
• background, bg
• padx, pady
• height, width
• cursor
• highlightcolor, highlightbackground, highlightthickness

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

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

1# frameを生成する。
2frame = tk.Frame()
3# frameに関するoptionの種類一覧を取得する。
4print(frame.keys())

borderwidth, bd

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

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

例えば下準備コードのframe = tk.Frame(self.master)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# frame = tk.Frame(self.master)
3# frame.config(borderwidth=20) or frame.configure(borderwidth=20)
4##################################
5# borderwidth : frame Widgetの枠の大きさを設定。デフォルト0。
6frame = tk.Frame(self.master, borderwidth=20)

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

relief

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

指定方法としては、

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

の6種類があります。

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

1+       reliefList = [tk.RAISED, tk.SUNKEN, tk.FLAT, tk.RIDGE, tk.GROOVE, tk.SOLID]
2+       for relief in reliefList:
3-            frame = tk.Frame(self.master)
4+            frame = tk.Frame(self.master, borderwidth=20, relief=relief)
5
6-            frame.pack()
7+            frame.pack(side=tk.LEFT)
8
9-            label1 = tk.Label(frame, text="label1", width=10, height=5, bg="green")
10+            label1 = tk.Label(frame, text="label1", width=5, height=5, bg="green")
11
12-            label1.pack()
13+            label1.pack()
14
15-            label2 = tk.Label(frame, text="label2", width=10, height=5, bg="blue")
16+            label2 = tk.Label(frame, text="label2", width=5, height=5, bg="blue")
17
18-            label2.pack()
19+            label2.pack()

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

relief optionはそもそも枠がなければ、効果を発揮できません。relief optionの設定に合わせて、borderwidth or bd optionを1以上に設定して利用しましょう。

background, bg

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

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

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

例えば下準備コードのframe = tk.Frame(self.master)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# frame = tk.Frame(self.master)
3# frame.config(borderwidth=20, bg="red") or frame.configure(borderwidth=20, bg="red")
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6frame = tk.Frame(self.master, borderwidth=20, bg="red")

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

padx, pady

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

例えば下準備コードのframe = tk.Frame(self.master)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# frame = tk.Frame(self.master)
3# frame.config(padx=40, pady=40, bg='red') or frame.configure(padx=40, pady=40, bg='red')
4##################################
5# padx, padyの初期値 : 0
6frame = tk.Frame(self.master, padx=40, pady=40, bg='red')

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

height, width

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

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

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

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

cursor

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

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

例えば下準備コードのframe = tk.Frame(self.master)箇所を、以下のように変更して、

1# 別解法 ##########################
2# frame = tk.Frame(self.master)
3# frame.config(cursor="clock") or frame.configure(cursor="clock")
4##################################
5frame = tk.Frame(self.master, cursor="clock")

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

highlightcolor, highlightbackground, highlightthickness

highlightcolor option, highlightbackground option, highlightthickness optionを利用すると、それぞれフォーカスがあてられた時の囲い線の色, フォーカスが外れた時の囲い線の色, 囲い線の太さを設定できます。

例えば下準備コードのframe = tk.Frame(self.master)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# frame = tk.Frame(self.master)
3# frame.config(highlightthickness=10, highlightbackground="red") or frame.configure(highlightthickness=10, highlightbackground="red")
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6frame = tk.Frame(self.master, highlightthickness=10, highlightbackground="red")

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

また下準備コードのframe = tk.Frame(self.master)箇所を、以下のように変更すると、

1# 別解法 ##########################
2# frame = tk.Frame(self.master)
3# frame.config(highlightthickness=10, highlightcolor="purple") or frame.configure(highlightthickness=10, highlightcolor="purple")
4##################################
5# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
6frame = tk.Frame(self.master, highlightthickness=10, highlightcolor='purple')
7# frame Widgetへフォーカスを与える。
8frame.focus()

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

frame Widgetの子要素(Widget)を一括で編集

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

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

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

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

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

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

frame Widgetとlabelframe Widgetの違い

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

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

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

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

点で異なります。

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

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

labelframe Widgetに関しては、Tkinterで使われるlabelframeとは?活用方法から実用例を徹底解説でまとめていますので、詳しく知りたい方は是非ご確認ください。

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

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

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

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

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

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

• 使用できるoptionに違いがある
• テーマ(名前)を利用して、frame 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を親要素として、ttkframe Widget(Frame)を作成する。
14        ttkFrame = ttk.Frame(self.master)
15        print('ttk.Frame option : ')
16        print(ttkFrame.keys())
17
18        # Windowを親要素として、frame Widget(Frame)を作成する。
19        frame = tk.Frame(self.master)
20        print('tk.Frame option : ')
21        print(frame.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の種類に差分が発生します。

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

ttk.Frame()では、テーマ(名前)を指定することで、frame 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.Frame()の外観を変更
14        style = ttk.Style()
15        # テーマ(名前)の指定を行う。
16        style.theme_use('classic')
17
18        # Windowを親要素として、ttkframe Widget(Frame)を作成する。
19        # width : 幅の設定
20        # height : 高さの設定
21        # borderwidth : 枠の大きさを設定
22        # relief : 枠のデザインを設定
23        ttkFrame = ttk.Frame(self.master, width=200, height=100, borderwidth=10, relief='sunken')
24
25        # Windowを親要素として、frame Widget(Frame)を作成する。
26        # width : 幅の設定
27        # height : 高さの設定
28        # borderwidth : 枠の大きさを設定
29        # relief : 枠のデザインを設定
30        frame = tk.Frame(self.master, width=200, height=100, borderwidth=10, relief='sunken')
31
32        # Windowを親要素とした場合に、ttkframe Widget(Frame)をどのように配置するのか?
33        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
34        ttkFrame.pack()
35
36        # Windowを親要素とした場合に、frame Widget(Frame)をどのように配置するのか?
37        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
38        frame.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()

以下の画像のように、frame 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で利用されるframeとは、1つ以上のWidgetを取りまとめるもの = Frameを意味します。
• 別名frame Widgetと呼ばれる。

参考文献

• Tkinterのframeに関するサンプルコード
• マウスカーソルとは?
• Tkinterで使われるマウスカーソルの種類
• フォーカスとは?
• テーマとは?