【pack／grid／placeの使い分け】Pythonのtkinterで制作のGUIアプリでの部品のレイアウト方法【Docker & Jupyterlab環境】

はじめに

一応デザイナーでもあるので、tkinterで制作のGUIアプリであろうと、レイアウトには気を配りたい。
性格的に、寸法に寸分違わず配置したい性分でもある。

ということで、tkinterで制作のGUIアプリでの部品のレイアウト方法について解説していく。

tkinterでのレイアウト手法

pack、grid、placeの3種類がある。以下に各々の概要を記す。

pack

一番簡単なレイアウト手法。

配置用の数値を用いずに、画面上部から下へ順に配置するだけならこのpackで十分。

grid

画面を任意の数に分割された碁盤の目に見立て、それに合わせてレイアウトする手法。

一見きっちりレイアウト出来そうだが、凝ったレイアウトの場合、思わぬところでレイアウトが崩れる場合があり、制御が難しくなる嫌いがある。

入り組んだレイアウトではないが、そこそこのレイアウトをしたい時に。

place

画面のある点（分かりやすいのは画面左端上）を基点に、画面を平面上の直交座標系（デカルト座標系）に見立て、パーツの位置を（x, y）で決めて配置する手法。

他の影響を受けずレイアウト出来る。
Adobe IllustratorやAdobe InDesignと同じ考え方なので、自分的には一番しっくり来る。

入り組んだ、凝ったレイアウト向け。

ここでは、pack、gridの使い方は他に譲り、placeの使い方を解説する。

placeでのレイアウト手法

紙面デザインやWEBデザインでのレイアウト手法として、Grid Systemというものがある。
紙面や画面を何分割かしてグリッドを作り、そのグリッド上にパーツを配置する手法である。

gridは恐らくこの手法の考えを取り入れたものなのだろうが、凝った配置ではレイアウトが崩れる。

それよりも、place使用時にこの手法を採用する方がレイアウトを制御しやすい。
画面の縦横を適当な長さで分割し、交差点の座標に合わせて配置するだけである。

Windowの画面サイズを決める

例では、1920x1176にしている（自分のPCの画面フルサイズ）。

グリッドを定める

画面サイズを適宜何分割かにして、というかぶっちゃけ適当に縦横サイズを各々素因数分解いって、自分の好みの分割を探っていく。

例では、横1920は16分割にし、1グリッド当たり120に、縦1176は14分割にし、1グリッド当たり84にした。

画面は、横を16分割に、縦を14分割に

基点を決める

Window左上端が分かりやすい。

フレームを配置

先にフレームを配置する。
各フレームの座標の基点は、Window左上端である。

例では、上部と左右の3つのフレームを配置する。

青枠が3つのフレームを表す

パーツのサイズ

配置するパーツは、グリッドに合わせたサイズにする。

例では、パーツの横幅は、120の倍数に、パーツの縦幅は、84の倍数に。

ただし実際は、横幅は120の倍数だけでなく、その半分または1/4の、60および30も、縦幅は84の半分または1/4の、42および21も使用して、微調整を行う。

各パーツの座標

各パーツを配置する座標は、各パーツの左上端を基点にグリッドに合わせる。
前項「パーツのサイズ」と同様に、x座標は120の倍数に、y座標は、84の倍数にし、適宜その半分または1/4も追加して定める。

各パーツの左上端が座標の基点になる

ここで注意！
各パーツの座標は、パーツが含まれるフレームの左上端を基点とする罠が潜んでいるので、例で言うところの右フレームに配置されるパーツは右フレームの左上端が基点になるので、ウインドウの左上端と間違えないようにする。

例では、左右対称になるように配置座標を定める。

各フレームの左上端が、それに含まれるパーツの座標の基点になる

各パーツの配置

パーツをグリッドに沿って配置する。

例では、下図のようなパーツ構成と配置とした。
各パーツがグリッドに沿って配置されているが、一部グリッド線から外れているのは、グリッドサイズの半分・1/4サイズを考慮しているからである。