.lazyload-placeholder { display: none; }

作成日 : 2021-05-05
更新日 : 2021-11-03
25 min readPython Tkinter

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

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

そもそもTkinterで使われるgridとは?
1. Tkinterの構成要素
下準備
grid関数の定義
Window幅、高さに合わせてWidgetを調整する
gridを使って配置したWidgetを非表示にしたい場合
その他のWidgetの配置方法
まとめ
参考文献

目次を開く⬇︎

執筆者 - おすすめの記事3選

この記事も読まれています

.lazyload-placeholder { display: none; }

Tkinterで使われるgeometryとは?コードを通して活用方法を徹底解説

今回はTkinterで使われるgeometryに関して、コードを通して活用方法を徹底解説いたします。なんとなくgeome...

この記事も読まれています

.lazyload-placeholder { display: none; }

【図解付き!?】Tkinterで使われるmainloopをわかりやすく解説

今回はTkinterで使われるmainloopを、図解を用いてわかりやすく解説いたします。なんとなくmainloopを使...

この記事も読まれています

.lazyload-placeholder { display: none; }

【Tkinterの基礎知識】Tkinterの特徴から活用例を徹底解説!?

今回は「Tkinterの基礎知識」と題して、Tkinterの特徴から活用例を徹底解説いたします。これからTkinterに...

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

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

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

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

Tkinterの構成要素

.lazyload-placeholder { display: none; }

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が配置されます。

.lazyload-placeholder { display: none; }

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が配置されます。

.lazyload-placeholder { display: none; }

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が配置されます。

.lazyload-placeholder { display: none; }

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が配置されます。

.lazyload-placeholder { display: none; }

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が配置されます。

.lazyload-placeholder { display: none; }

また下準備コードで紹介した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が配置されます。

.lazyload-placeholder { display: none; }

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が配置されます。

.lazyload-placeholder { display: none; }

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が配置されます。

.lazyload-placeholder { display: none; }

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が連動して拡大します。

.lazyload-placeholder { display: none; }

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を非表示にします。

.lazyload-placeholder { display: none; }

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

.lazyload-placeholder { display: none; }

また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())