作成日 : 2021-06-03
更新日 : 2021-11-03
19 min readPythonTkinter

Tkinterで使われるFrameの一覧を活用例を交えて一挙紹介【3種類】

今回はTkinterで使われるFrameの一覧を3種類、活用例を交えて解説いたします。Frameの定義や活用例を学びたい、Frameを利用したコードを確認したい方へおすすめです。是非最後までご覧ください。

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

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

言葉だけでは、Frameに関してイメージしづらいですね。。以下の「Tkinterの構成要素」を確認しながら、理解を深めましょう。

Tkinterの構成要素

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

要するに、紫色枠で囲まれる箇所へ、Frame(frame, panedwindowなど)を配置して、Tkinterを実装することになります。

Tkinterで使われるFrameを活用するメリット

Tkinterで使われるFrameを活用すると、

• 複数のWidgetを1グループにまとめられる
• 多数のWidgetをまとめることで、管理を容易にする
• 目的別にWidgetをまとめられて、再利用可能

などが考えられます。

確かに、Frameを活用することで、Widgetの数が多くなった場合に、どのような目的でこのWidgetは作られたのだっけ?と考えることなく、実装できそうです。

Tkinterで使われるFrame一覧紹介

先ほどは「Tkinterの構成要素」をもとに、そもそもTkinterで使われるFrameとは何なのか、解説いたしました。

「Tkinterで使われるFrame一覧紹介」では、各種Frame(frame, panedwindowなど)の定義や使い方を、簡単に紹介していきます。

frame

frameはFrameにラベルをつけないで、1つ以上のWidgetを取りまとめる場合に利用します。

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

で定義されます。

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

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

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

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

labelframe

labelframeはFrameにラベルをつけて、1つ以上のWidgetを取りまとめる場合に利用します。

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

で定義されます。

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

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

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

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

panedwindow

panedwindowは1つ以上のWidgetを取りまとめつつ、自由にWidgetの大きさを変更する場合に利用します。

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

で定義されます。

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

1import tkinter as tk
2
3class Application(tk.Frame):
4    # panedwindowを取得する関数
5    def getPanedWindow(self):
6        # Windowを親要素として、panedwindow Widget(Frame)を作成する。
7        # <用語の説明>
8        # panedwindow Widget(Frame)の中に配置される、Widgetのことを「ペイン」という。
9        # ペインとペインの間の空間を「さっし」という。さっしを選択した状態で、さっしを左右(上下)へ動かすとWidget(ペイン)の大きさを自由に変更できる。
10        # また、さっしの中に表示される、四角いものを「handle」という。handleはさっしと同じ動作を行う。
11        # showhandle : さっしの中へhandleを表示するかどうかの設定。True : 表示する, False : 表示しない。
12        # sashwidth : さっしの幅を設定。
13        # PanedWindowについて : https://kuroro.blog/python/0KVm0XNc0gvKrbM4O9bD/
14        panedWindow = tk.PanedWindow(self.master, showhandle=True, sashwidth=20)
15        # Windowを親要素として、panedwindow Widget(Frame)をどのように配置するのか?
16        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
17        panedWindow.pack()
18
19        # panedwindow Widget(Frame)を親要素として、label Widgetを作成する。
20        # text : テキスト情報
21        # width : 幅の設定
22        # bg : 背景色の設定
23        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
24        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
25        label1 = tk.Label(panedWindow, text="test", width=10, bg="#008000")
26        # panedwindow Widget(Frame)を親要素として、label Widgetをどのように配置するのか?
27        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
28        label1.pack()
29
30        # panedwindow Widget(Frame)を親要素として、label Widgetを作成する。
31        # text : テキスト情報
32        # width : 幅の設定
33        # bg : 背景色の設定
34        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
35        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
36        label2 = tk.Label(panedWindow, text="test", width=10, bg="red")
37        # panedwindow Widget(Frame)を親要素として、label Widgetをどのように配置するのか?
38        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
39        label2.pack()
40
41        # label Widget要素をpanedwindow Widget(Frame)へ格納。ペインとする。
42        # add(Widget) : Widgetをpanedwindow Widget(Frame)へ格納する。
43        panedWindow.add(label1)
44        # label Widget要素をpanedwindow Widget(Frame)へ格納。ペインとする。
45        # add(Widget) : Widgetをpanedwindow Widget(Frame)へ格納する。
46        panedWindow.add(label2)
47
48    def __init__(self, master=None):
49        # Windowの初期設定を行う。
50        super().__init__(master)
51        # Windowの画面サイズを設定する。
52        # geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
53        self.master.geometry("300x200")
54        self.getPanedWindow()
55
56# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
57if __name__ == "__main__":
58    # Windowを作成する。
59    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
60    root = tk.Tk()
61    app = Application(master=root)
62
63    # Windowをループさせて、継続的にWindow表示させる。
64    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
65    app.mainloop()

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

panedwindowに関しては、Tkinterで使うpanedwindowとは?活用方法から各種用語に関して解説でまとめていますので、詳しく知りたい方は是非ご確認ください。

Frameの配置方法【3種類】

先ほどの「Tkinterで使われるFrame一覧紹介」では、各種Frameの定義から使い方を簡単にお伝えしました。

紹介する中の、サンプルコードを確認して、気づいた方もいるかもしれませんが、

• 各種Frameを宣言するだけではだめ
• Frameを配置する関数の利用が必要

になります。

TkinterではFrameを配置する関数として、

• grid
• pack
• place

を用意しています。

gridに関しては、【徹底解説!?】Tkinterで使われるgridの活用方法を完全マスター!?でまとめていますので、詳しく知りたい方は是非ご確認ください。

packに関しては、【完全版!?】Tkinterを用いてpackの使い方や実例をわかりやすく解説!?でまとめていますので、詳しく知りたい方は是非ご確認ください。

placeに関しては、Tkinterで使われるplaceとは?サンプルコードを通して完全攻略!?でまとめていますので、詳しく知りたい方は是非ご確認ください。

まとめ

• Tkinterで使われるFrameとは、1つ以上のWidgetを取りまとめるものを意味します。
• Frameを宣言するだけでなく、Frameを配置する関数の利用が必要。
• Frameを配置する関数として、grid, pack, placeが用意される。

参考文献

• TkinterのFrame一覧に関するサンプルコード
• ラベルとは?