KURORO BLOGのロゴ

このエントリーをはてなブックマークに追加
【入門者必見】Tkinterで活用されるframeとは?実用例を通して徹底解説

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

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

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

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

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

別名frame Widgetと呼ばれます。

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

Tkinterの構成要素

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

名称説明文
Window 画像の黄緑色枠の部分になります。Tkinter画面全体を表します。
Frame画像内の紫色枠部分になります。Widgetが1つ以上ある場合に、取りまとめるものです。
Widget青色枠で囲まれる部分になります。1つの機能を持つ最小単位=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と呼ばれる。

参考文献