KURORO BLOGのロゴ

このエントリーをはてなブックマークに追加
【徹底解説!?】Tkinterで使われるgridの活用方法を完全マスター!?

【徹底解説!?】Tkinterで使われるgridの活用方法を完全マスター!?

今回はTkinterを使ってgridの活用方法を徹底解説致します。Tkinterを使い始めたけれども、gridの使い方がわからない、悩んでいる方へおすすめです。是非最後までご一読いただけますと幸いです。

目次
  1. そもそもTkinterで使われるgridとは?
    1. Tkinterの構成要素
  2. 下準備
  3. grid関数の定義
    1. row
    2. column
    3. rowspan
    4. columnspan
    5. sticky
    6. padx, pady
    7. ipadx, ipady
  4. Window幅、高さに合わせてWidgetを調整する
  5. gridを使って配置したWidgetを非表示にしたい場合
  6. その他のWidgetの配置方法
  7. まとめ
  8. 参考文献
目次を開く⬇︎

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

Tkinterで使われるgridとは、Widgetを配置する際に利用する関数を意味します。

別名grid関数と呼ばれます。

言葉だけで理解するのは少し難しいですね。。以下の「Tkinterの構成要素」を確認しながら、理解していきましょう。

Tkinterの構成要素

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

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

前の章でTkinterで利用するgridとは、Widgetを配置する際に利用する関数とお伝えしました。

「Tkinterの構成要素」の画像内では、水色枠に該当するWidgetに対して、配置を変更するためにgridを活用します。

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

下準備

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

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

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について : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
14        frame = tk.Frame(self.master)
15        # Windowを親要素として、frame Widget(Frame)をどのように配置するのか?
16        frame.grid()
17
18        # frame Widget(Frame)を親要素として、label Widgetを作成する。
19        # text : テキスト情報
20        # width : 幅の設定
21        # height : 高さの設定
22        # bg : 背景色の設定
23        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
24        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
25        label1 = tk.Label(frame, text="label1", width=10, height=10, bg="red")
26
27        # frame Widget(Frame)を親要素として、label Widgetを作成する。
28        # text : テキスト情報
29        # width : 幅の設定
30        # height : 高さの設定
31        # bg : 背景色の設定
32        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
33        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
34        label2 = tk.Label(frame, text="label2", width=10, height=10, bg="green")
35
36        # frame Widget(Frame)を親要素として、label Widgetを作成する。
37        # text : テキスト情報
38        # width : 幅の設定
39        # height : 高さの設定
40        # bg : 背景色の設定
41        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
42        # Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
43        label3 = tk.Label(frame, text="labal3", width=10, height=10, bg="yellow")
44
45        # frame Widget(Frame)を親要素として、label Widgetをどのように配置するのか?
46        label1.grid()
47        # frame Widget(Frame)を親要素として、label Widgetをどのように配置するのか?
48        label2.grid()
49        # frame Widget(Frame)を親要素として、label Widgetをどのように配置するのか?
50        label3.grid()
51
52if __name__ == "__main__":
53    # Windowを生成する。
54    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
55    root = tk.Tk()
56    app = Application(master=root)
57    # Windowをループさせて、継続的にWindow表示させる。
58    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
59    app.mainloop()

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

grid関数の定義

grid関数は、

1grid(option1, option2, ...)

で定義されます。戻り値はありません。

grid関数で使われるoptionの種類としては、

  • row
  • column
  • rowspan
  • columnspan
  • sticky
  • padx, pady
  • ipadx, ipady

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

row

row optionを指定すると、Widgetを何行目に配置するかを設定できます。

日常生活で行を数える場合、1から2, 3行目と順に数えますが、プログラミングの世界では0から1, 2行目と順に数えて、値を指定します。(0から始まる理由についてはこちら)

下準備コードで紹介したlabel1.grid, label2.grid, label3.gridのコードを、それぞれ以下のように変更すると、

1label1.grid(row=0)
2label2.grid(row=2)
3label3.grid(row=1)

以下の画像のようにWidgetが配置されます。

column

column optionを指定すると、Widgetを何列目に配置するかを設定できます。

日常生活で列を数える場合、1から2, 3列目と順に数えますが、プログラミングの世界では0から1, 2列目と順に数えて、値を指定します。(0から始まる理由についてはこちら)

下準備コードで紹介したlabel1.grid, label2.grid, label3.gridのコードを、それぞれ以下のように変更すると、

1label1.grid(column=0, row=0)
2label2.grid(column=1, row=0)
3label3.grid(column=2, row=0)

以下の画像のようにWidgetが配置されます。

rowspan

rowspan optionを指定すると、複数の行にまたがってWidgetの配置が可能になります。

何も指定しない場合(デフォルト)、rowspanの値は1になっていて、1以上の値を指定することができます。

下準備コードで紹介したlabel1.grid, label2.grid, label3.gridのコードを、それぞれ以下のように変更すると、

1label1.grid(rowspan=2, column=0, row=0)
2label2.grid(column=1, row=0)
3label3.grid(column=1, row=1)

以下の画像のようにWidgetが配置されます。

columnspan

columnspan optionを指定すると、複数の列にまたがってWidgetの配置が可能になります。

何も指定しない場合(デフォルト)、columnspanの値は1になっていて、1以上の値を指定することができます。

下準備コードで紹介したlabel1.grid, label2.grid, label3.gridのコードを、以下のように変更すると、

1label1.grid(columnspan=2, column=0, row=0)
2label2.grid(column=0, row=1)
3label3.grid(column=1, row=1)

以下の画像のようにWidgetが配置されます。

sticky

sticky optionを設定すると、指定する文字列の値に合った配置へ、Widgetを移動します。

指定できる文字列の値としては、

  • tk.W : Westの略。左寄せにWidgetを配置する。
  • tk.N : Northの略。上寄せにWidgetを配置する。
  • tk.S : Southの略。下寄せにWidgetを配置する。
  • tk.E : Eastの略。右寄せにWidgetを配置する。
  • tk.NE : North Eastの略。右上にWidgetを配置する。
  • tk.NW : North Westの略。左上にWidgetを配置する。
  • tk.SW : South Westの略。左下にWidgetを配置する。
  • tk.SE : South Eastの略。右下にWidgetを配置する。

が利用できます。

また指定できる文字列の値を複数使用して、+をつけて繋げると、Widgetを引き伸ばすことができます。

下準備コードで紹介したlabel1.grid, label2.grid, label3.gridのコードを、以下のように変更すると、

1label1.grid(columnspan=2, column=0, row=0, sticky=tk.W)
2label2.grid(column=0, row=1)
3label3.grid(column=1, row=1)

以下の画像のようにWidgetが配置されます。

また下準備コードで紹介したlabel1.grid, label2.grid, label3.gridのコードを、以下のように変更すると、

1label1.grid(columnspan=2, column=0, row=0, sticky=tk.W+tk.E+tk.N+tk.S)
2label2.grid(column=0, row=1)
3label3.grid(column=1, row=1)

以下の画像のようにWidgetが配置されます。

padx, pady

padx, pady optionを指定すると、それぞれWidget外側の横、縦に空白の幅を設定できます。

何も指定しない場合(デフォルト)、padx, padyともに値は0です。

下準備コードで紹介したlabel1.grid, label2.grid, label3.gridのコードを、以下のように変更すると、

1label1.grid(columnspan=2, column=0, row=0, padx=(50, 0), pady=(30, 30))
2label2.grid(column=0, row=1)
3label3.grid(column=1, row=1)

以下の画像のようにWidgetが配置されます。

ipadx, ipady

ipadx, ipady optionを指定すると、それぞれWidgetを横、縦に引き伸ばす幅を設定できます。

何も指定しない場合(デフォルト)、ipadx, ipadyともに値は0です。

下準備コードで紹介したlabel1.grid, label2.grid, label3.gridのコードを、以下のように変更すると、

1label1.grid(columnspan=2, column=0, row=0, ipadx=50, ipady=150)
2label2.grid(column=0, row=1)
3label3.grid(column=1, row=1)

以下の画像のようにWidgetが配置されます。

Window幅、高さに合わせてWidgetを調整する

先ほどの章では、gridのoptionを使って、Widgetを配置する方法を解説しました。

しかしWindow幅、高さに合わせて、Widgetを配置することに関しては、説明していなかったと思います。

Window幅、高さに連動してWidgetを配置するためには、

1# 第一引数で指定する列番号に対応する、Widgetに関する詳細設定を行います。
2# 第一引数 : 列番号
3# 第二引数以降 : option 
4# 指定できるoption1 : weight(指定した列を、Windowの幅に応じて横方向に広げるかどうかの設定。0 : 広げない。1以上 : 広げる(値に応じて広げる割合を増加する))
5# 指定できるoption2 : minsize : 指定した列を横方向へ表示する最小サイズ(px)
6# 指定できるoption3 : pad : 指定した列の横方向へ、Widgetの幅を追加する(px)
7# 戻り値 : なし
8columnconfigure('列番号', option1, option2, ...) or grid_columnconfigure('列番号', option1, option2, ...)
9# 第一引数で指定する行番号に対応する、Widgetに関する詳細設定を行います。
10# 第一引数 : 行番号
11# 第二引数以降 : option
12# 指定できるoption1 : weight(指定した行を、Windowの高さに応じて縦方向に広げるかどうかの設定。0 : 広げない。1以上 : 広げる(値に応じて広げる割合を増加する))
13# 指定できるoption2 : minsize : 指定した行を縦方向へ表示する最小サイズ(px)
14# 指定できるoption3 : pad : 指定した行の縦方向へ、Widgetの高さを追加する(px)
15# 戻り値 : なし
16rowconfigure('行番号', option1, option2, ...) or grid_rowconfigure('行番号', option1, option2, ...)

を利用する必要があります。

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

1import tkinter as tk
2
3app = tk.Tk()
4# Windowの画面サイズを設定する。
5# geometryについて : https://kuroro.blog/python/rozH3S2CYE0a0nB3s2QL/
6app.geometry("600x400")
7
8# Windowを親要素として、label Widgetを作成する。
9# width : 幅の設定
10# height : 高さの設定
11# bg : 背景色の設定
12# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
13# Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
14label1 = tk.Label(app, width=10, height=10, bg="blue")
15# Windowを親要素として、label Widgetを作成する。
16# width : 幅の設定
17# height : 高さの設定
18# bg : 背景色の設定
19# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
20# Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
21label2 = tk.Label(app, width=10, height=10, bg="green")
22# Windowを親要素として、label Widgetを作成する。
23# width : 幅の設定
24# height : 高さの設定
25# bg : 背景色の設定
26# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
27# Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
28label3 = tk.Label(app, width=10, height=10, bg="red")
29# Windowを親要素として、label Widgetを作成する。
30# width : 幅の設定
31# height : 高さの設定
32# bg : 背景色の設定
33# 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
34# Labelについて : https://kuroro.blog/python/Pj4Z7JBNRvcHZvtFqiKD/
35label4 = tk.Label(app, width=10, height=10, bg="purple")
36
37# Windowを親要素として、label Widgetをどのように配置するのか?
38label1.grid(column=0, row=0, sticky=tk.NSEW)
39# Windowを親要素として、label Widgetをどのように配置するのか?
40label2.grid(column=1, row=0, sticky=tk.NSEW)
41# Windowを親要素として、label Widgetをどのように配置するのか?
42label3.grid(column=0, row=1, sticky=tk.NSEW)
43# Windowを親要素として、label Widgetをどのように配置するのか?
44label4.grid(column=1, row=1, sticky=tk.NSEW)
45
46# もしくは、app.grid_columnconfigure(0, weight=1)
47app.columnconfigure(0, weight=1)
48
49# Windowをループさせて、継続的にWindow表示させる。
50# mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
51app.mainloop()

以下の画像のように、Window幅を横へ広げると、0列目のWidgetが連動して拡大します。

gridを使って配置したWidgetを非表示にしたい場合

gridを使って配置したWidgetを非表示にしたい場合は、grid_forget()関数を利用すると便利です。

例えば以下のようなコードを作成して、

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について : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
14        frame = tk.Frame(self.master)
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        label = tk.Label(frame, text="label", width=10, height=10, bg="red")
27
28        # frame Widget(Frame)を親要素とした場合に、label Widgetをどのように配置するのか?
29        label.grid()
30
31        # frame Widget(Frame)を親要素として、button Widgetを作成する。
32        # text : テキスト情報
33        # command : ボタンを選択した場合に、実行する関数を設定する。grid_forget()関数を実行してlabel Widgetを非表示にする。
34        # Buttonについて : https://kuroro.blog/python/oFju6EngDtcYtIiMIDf1/
35        deleteBtn = tk.Button(frame, text='DELETE LABEL', command=lambda: label.grid_forget())
36        # frame Widget(Frame)を親要素として、button Widgetをどのように配置するのか?
37        deleteBtn.grid()
38
39        # frame Widget(Frame)を親要素として、button Widgetを作成する。
40        # text : テキスト情報
41        # command : ボタンを選択した場合に、実行する関数を設定する。grid()関数を実行してlabel Widgetを表示する。
42        # Buttonについて : https://kuroro.blog/python/oFju6EngDtcYtIiMIDf1/
43        recoverBtn = tk.Button(frame, text='RECOVER LABEL', command=lambda: label.grid())
44        # frame Widget(Frame)を親要素として、button Widgetをどのように配置するのか?
45        recoverBtn.grid()
46
47# Tkinter初学者参考 : https://docs.python.org/ja/3/library/tkinter.html#a-simple-hello-world-program
48if __name__ == "__main__":
49    # Windowを生成する。
50    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
51    root = tk.Tk()
52    app = Application(master=root)
53    # Windowをループさせて、継続的にWindow表示させる。
54    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
55    app.mainloop()

「DELETE LABEL」と書かれたボタンを選択すると、以下の画像のようにlabel Widgetを非表示にします。

反対に「RECOVER LABEL」と書かれたボタンを選択すると、以下の画像のようにlabel Widgetを表示します。

またlabel Widgetを完全に削除したい場合は、

1+ # destroy()関数を利用する。
2- deleteBtn = tk.Button(frame, text='DELETE LABEL', command=lambda: label.grid_forget())
3+ deleteBtn = tk.Button(frame, text='DELETE LABEL', command=lambda: label.destroy())

と変更ください。

その他のWidgetの配置方法

その他のWidgetの配置方法として、

  • pack
  • place

があります。

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

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

まとめ

  • Tkinterは、Window, Frame, Widgetで構成される。
  • Tkinterで使われるgridとは、Widgetを配置する際に利用する関数を意味します。
  • 別名grid関数と呼ばれます。

参考文献