.lazyload-placeholder { display: none; }

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

Tkinterで使われるplaceとは?サンプルコードを通して完全攻略!?

今回はTkinterで使われるplaceについて、サンプルコードを通して解説致します。placeの活用方法がわからない、理解できずに立ち止まっている方へおすすめです。丁寧に説明しましたので、是非最後まで閲覧ください。

そもそもTkinterで使われるplaceとは?
1. Tkinterの構成要素
下準備
tkinterで活用されるplace関数の定義
placeを使って配置したWidgetを非表示にしたい場合
その他のWidgetの配置方法
Tkinterで使われるplaceのまとめ
参考文献

目次を開く⬇︎

執筆者 - おすすめの記事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で使われるplaceとは?

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

別名でplace関数と呼ばれます。

x座標, y座標を指定して、Widgetの配置先を設定するのが特徴です。

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

Tkinterの構成要素

.lazyload-placeholder { display: none; }

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

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

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

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

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

下準備

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

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

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        # width : 幅を設定
14        # height : 高さを設定
15        # borderwidth : 枠の大きさを設定
16        # bg : 背景色を設定
17        # 色について : https://kuroro.blog/python/YcZ6Yh4PswqUzaQXwnG2/
18        # relief : 枠のデザインを設定する。
19        # reliefについて : https://cercopes-z.com/Python/stdlib-tkinter-widget-frame-py.html#detail-relief
20        # Frameについて : https://kuroro.blog/python/P20XOidA5nh583fYRvxf/
21        frame = tk.Frame(self.master, width=400, height=400, borderwidth=20, bg="green", relief=tk.SUNKEN)
22
23        # Windowを親要素として、frame Widget(Frame)をどのように配置するのか？
24        # packについて : https://kuroro.blog/python/UuvLfIBIEaw98BzBZ3FJ/
25        frame.pack()
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        label = tk.Label(frame, text="label", width=30, height=15, bg="blue")
35
36        # frame Widget(Frame)を親要素とした場合に、label Widgetをどのように配置するのか?
37        label.place(x=0, y=0)
38
39if __name__ == "__main__":
40    # Windowを生成する。
41    # Windowについて : https://kuroro.blog/python/116yLvTkzH2AUJj8FHLx/
42    root = tk.Tk()
43    app = Application(master=root)
44
45    # Windowをループさせて、継続的にWindow表示させる。
46    # mainloopについて : https://kuroro.blog/python/DmJdUb50oAhmBteRa4fi/
47    app.mainloop()

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

tkinterで活用されるplace関数の定義

place関数は、

1place(option1, option2, ...)

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

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

x, y
anchor
height, width
relheight, relwidth
relx, rely
bordermode
in_

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

x, y

x, y optionを利用すると、Widgetの配置を直接指定できます。

x, y optionへ数字を与えることで、(x座標, y座標)位置をWidgetの左上として、描画を行います。

xへ正の値を与えると、右方向へWidgetを配置でき、負の値を与えると、左方向へWidgetを配置できます。

yへ正の値を与えると、下方向へWidgetを配置でき、負の値を与えると、上方向へWidgetを配置できます。

x, yに関する値入力へ悩んだ方は、以下の画像を確認しながら、x, yの値を考えると良いでしょう。

.lazyload-placeholder { display: none; }

例えば下準備コードのlabel.place(x=0, y=0)箇所を、以下のように変更すると、

1label.place(x=40, y=50)

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

.lazyload-placeholder { display: none; }

anchor

anchor optionを利用すると、Widgetのどの位置を、x, yの値と一致させて配置するのかを指定します。

指定方法として

tk.W : Westの略。左の真ん中とx, yの値を一致させてWidgetを配置する。
tk.N : Northの略。上の真ん中とx, yの値を一致させてWidgetを配置する。
tk.S : Southの略。下の真ん中とx, yの値を一致させてWidgetを配置する。
tk.E : Eastの略。右の真ん中とx, yの値を一致させてWidgetを配置する。
tk.NE : North Eastの略。右上とx, yの値を一致させてWidgetを配置する。
tk.NW : North Westの略。左上とx, yの値を一致させてWidgetを配置する。
tk.SW : South Westの略。左下とx, yの値を一致させてWidgetを配置する。
tk.SE : South Eastの略。右下とx, yの値を一致させてWidgetを配置する。
tk.CENTER : 中心の略。中心とx, yの値を一致させてWidgetを配置する。

の9種類が存在します。デフォルトではtk.NWが設定されます。

anchorに関する値入力へ悩んだ方は、以下の画像を確認しながら、anchorの値を考えると良いでしょう。

.lazyload-placeholder { display: none; }

例えば下準備コードのlabel.place(x=0, y=0)箇所を、以下のように変更すると、

1label.place(x=0, y=0, anchor=tk.CENTER)

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

.lazyload-placeholder { display: none; }

height, width

height, width optionを利用すると、それぞれ数字を入力することでWidgetの高さ、幅を設定できます。

例えば下準備コードのlabel.place(x=0, y=0)箇所を、以下のように変更すると、

1label.place(x=0, y=0, width=150, height=150)

以下の画像のようにWidgetが変更されます。

.lazyload-placeholder { display: none; }

relheight, relwidth

relheight, relwidth optionを利用すると、Widgetの高さ・幅を、親要素(今回はFrame)の高さ・幅に合わせて、相対的に変更できます。

指定できる値としては、0.0~1.0があり、親要素に対してWidgetの高さ・幅をどのくらいの倍率にするかと考えて設定すると良いでしょう。

例えば下準備コードのlabel.place(x=0, y=0)箇所を、以下のように変更すると、

1label.place(x=0, y=0, relwidth=0.3, relheight=0.4)

以下の画像のようにWidgetが変更されます。

.lazyload-placeholder { display: none; }

relx, rely

relx, relyを利用すると、Widgetのx, yの値を、親要素(今回はFrame)のx, yの値に合わせて、相対的に変更できます。

指定できる値としては、0.0~1.0があり、親要素に対してWidgetのx, yの値をどのくらいの倍率にするかと考えて設定すると良いでしょう。

例えば下準備コードのlabel.place(x=0, y=0)箇所を、以下のように変更すると、

1label.place(x=0, y=0, relx=0.5, rely=0.5)

以下の画像のようにWidgetが変更されます。

.lazyload-placeholder { display: none; }

bordermode

bordermodeを指定すると、親要素(今回はFrame)の枠の内側 or 外側のどちらを、支点としてWidgetを表示すべきか設定できます。

指定方法として、

tk.INSIDE : 親要素(今回はFrame)の枠の内側を支点としてWidgetを配置する。
tk.OUTSIDE : 親要素(今回はFrame)の枠の外側を支点としてWidgetを配置する。

があります。デフォルトでは、tk.INSIDEが設定されます。

例えば下準備コードのlabel.place(x=0, y=0)箇所を、以下のように変更すると、

1label.place(x=0, y=0, bordermode=tk.INSIDE)

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

.lazyload-placeholder { display: none; }

また下準備コードのlabel.place(x=0, y=0)箇所を、以下のように変更すると、

1label.place(x=0, y=0, bordermode=tk.OUTSIDE)

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

.lazyload-placeholder { display: none; }

in_

in_ optionを利用すると、Widget作成時に親要素を設定していない場合に、place関数利用時に親要素の指定が可能になります。

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

1- label = tk.Label(frame, text="label", width=30, height=15, bg="blue")
2+ # 親要素を設定しない
3+ label = tk.Label(text="label", width=30, height=15, bg="blue")
4
5...
6...
7
8- label.place(x=0, y=0)
9+ # place関数利用時に親要素を指定する。
10+ label.place(x=0, y=0, in_=frame)

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

.lazyload-placeholder { display: none; }

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

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