Tkinter の配置用メソッド .pack() .gird() .place()

 Python3 マスターへの道:その3


  第3回ということで、今回は、ウィンドウに何か(ウィジェット)を表示したい、のですが……実は、今のままでは、表示できません。まずは、ウィジェットの位置を指定するメソッドを学ぶ必要があるのです。

 ですが、何も表示しないで、位置が指定できるわけではありません。なので、今回は、tk.Lable() で作ったウィジェットを使いながら、配置する位置の指定の基本を学んでいきます。

 ウィジェットの詳しい使い方は、次回『Python3 マスターへの道:その4』で学んでいこうと思うので、ここでは、ウィジェットという表示するものとして、認識しておきます。

1    import tkinter as tk
2    
3    root = tk.Tk()
4    
5    widget = tk.Label()
6    # 今回の新要素
7    widget.pack()
8    widget.grid()
9    widget.place(x=Number, y=Number)
10
11   root.mainloop()

 その位置を指定するために、必要なのが、.pack() と .grid() そして .place() の3つのメソッドたちです。これらのメソッドの学習には、こちらのサイト(全体的)こちらのサイト(.pack() を特に)を参考にさせてもらいました。


ウィジェットの位置の指定するために


 .pack() メソッド


7    widget.pack()

 これが、一番基本的なウィジェットの位置を指定できる、メソッドです。とりあえず、表示したいなら、これをウィジェットを作った後に、書けばいいだけです。デフォルトだと、上の中央に表示されます。





 ですが、表示したい位置もありますし、大きさとかも変えたい時もあるかもしれません。そんな時のための、オプションが、いくつかあります。実際に使って、表示させてみます。

 .pack(fill = 'x', padx = 10, pady = 5) で出力!fill は、横いっぱい('x')、縦いっぱい('y')に、ウィジェットを広げるオプション。padx と pady は、外枠からの余白を表しています。



 .pack(ipadx = 10, ipady = 5) で出力した場合。ipadx と ipady は、内枠からの余白です。わかりにくいですが、一番最初の、.pack() のみの出力と見比べてもらうと、枠のより中央に位置している感覚ですかね。↓




 複数を連続させて、.pack(fill = 'x') で表示させてみると……↓



 縦一列に表示されます。これは、つまり、デフォルトが、side = 'top' であるということです。つまり、横一列に表示したいなら、side = 'left' とかっこの中に、入れるだけで、次のように表示できます。ちなみに、fill は縦('y')でも使えます。↓



 では、横と縦を組み合わせて表示することはできるのでしょうか? ということで、4つのウィジェットを順番に、side = 'top', 'top', 'left', 'top' で試してみます。狙っているのは、右半分が、上と下で分かれたような、配置なのですが……↓




 おぉ、うまくいって……↓



 ないんですね。top やleft はどちら側に寄せているか、ということで、順番によって、ウィンドウが配置できているわけではありません。なので、横や縦一列に一次元方向に、配置する際には便利なのですが、二次元となると、それができないのです。

 それでは、二次元で配置する際は、どうすれば良いのでしょうか? それが、次の .grid() メソッドです。


 .grid() メソッド


8    widget.grid()

 ということで、.grid() では、二次元で配置ができるのですが、まずは、基本的な使い方から。かっこに何も入力しないで、出力してみると、左上の角に表示されました。↓




 複数個のウィジェットを、同時に、.grid() で表示してみると……↓




 先ほどとそれほど変わらないことがわかります。先ほどと大きく見た目が異なるのは、fill のオプションが使われていないためです。実際にいうと、fill というオプションは、.grid() にはないのです。

その代わりに、sticky というオプションがあります。これは、余裕があれば、fill のように広げる役割があるのですが、今後使いながら、確認していきたいと思います。

 しかし、まだ .gird() の凄さは伝わっていないでしょう。grid の最も大きい特徴は、文字通り、ウィンドウで表示する位置を、格子状に選択することができるのです。

8'   widget.grid(row = Number, column = Number)

 このコードをみてもらえば変わると思いますが、ここでは、配置場所を、縦の列と横の列を指定して、表示しています。そのため、ウィジェット同士の位置関係をはっきりとさせることができるのです。

 それでは、先ほど、.pack() では、できなかった二次元配列をしてみましょう。


 四色を2x2で並べたい時には、それぞれ (0, 0) (1, 0) (0, 1) (1, 1) の順番で、.grid() メソッドを使っていきます。↓




 格子状のように、配置されていることがよくわかりますね。

 それでは、先ほど .pack() で失敗してしまった、横並びの最後の二つが、上下で分かれて表示するようにするには、どうすればいいのでしょうか?

 それには、また別のオプションが必要になります。いくつかの縦の列に表示する際には、rowspan を、横の列の場合は、columnspan を使います。使い方は、簡単。通常通り、row と column で選択する最初の枠を選択して、rowspan と columnspan で、その長さを選択します。

 例えば、次のコードを実行させると、狙った配置で表示できます。

1    import tkinter as tk
2    
3    root = tk.Tk()
4    root.title(".pack() practice")
5    
6    red = tk.Label(root, text = "red", bg = "red", fg = "white")
7    blue = tk.Label(root, text = "blue", bg = "blue", fg = "white")
8    green = tk.Label(root, text = "green", bg = "green")
9    yellow = tk.Label(root, text = "yellow", bg = "yellow")
10   
11   red.grid(row= 0, rowspan = 2, column = 0)
12   blue.grid(row = 1, rowspan = 2, column = 1)
13   green.grid(row = 0, column = 2)
14   yellow.grid(row = 1, column = 2)
15   
16   root.mainloop()




 まだまだ、オプションもあるのですが、今回は、あくまで確認程度に配置のためのメソッドを学んでいきます。それにして、.grid() が一番使いやすそうと、私は感じました。配置場所がはっきりしているので、.pack() よりも多少面倒ですが、確実です。


 .place() メソッド


 これまで、.pack() はウィンドの枠からの位置関係、.grid() はウィンドウの左上からの位置関係を用いて、表示してきました。ですが、ウィジェットを、ウィンドウの好きな場所に自由に表示させたい時には、面倒ですよね。

 ということで、.place() は狙ったところを確実に表示できるメソッドになります。

9    widget.place(x=Number, y=Number)

 このコードの場合は、それぞれ x 軸と y 軸方向に、ピクセル数を入れて、ウィンドウの狙ったいちに、表示できます。なので、二つのウィジェットを (x=10, y=20)、そして、(x=15, y=30) とすることで、次のように、部分的に重ねることもできます。↓




 また、絶対に、位置を設定しなければならないわけではなくて、相対的な位置に配置するオプションもあるみたいです。ですが、今回は、あくまで、さらっと確認。また、.place() メソッドは多用するようでは、まだなさそうなので、これで .place() メソッドについては、終わりです。


最後に


 このように、.pack() と .grid() そして .place() の三つの配置メソッドを学んでいきました。色々な配置の仕方がわかって、楽しんじゃいましたね。ですが、まだ現時点では、意味もない、文字列を表示させているだけ。

 ですが、まだまだウィジェットの種類はあります。なので、次回は、他のウィジェットを学びながら、色々と配置していけたらいいです。

 また、今回は、画像多いため、重くなったり、わかりにくかったりした場合はすみません。コードを打っている私はまだしも、説明が難しいですね。これからも頑張ります。


前回:Tkinter のウィンドウをカスタマイズする方法

次回:tk.Label と tk.Button で画像を表示する