wxPython でレイアウトを調整する

Pythonで、GUIプログラムを作成するためのライブラリは、いくつか存在します。

代表的なものだと「Tkinter（ティーキンター）」「Kivy（キビー）」「PyQt（パイキュート）」があります。

そして、今回紹介する「wxPython（ダブリュエックスパイソン）」も代表的なライブラリの１つです。

それぞれの利点はコチラ！

【Tkinter】
Pythonに標準的に組み込まれているため、すぐに使えます。

【Kivy】
レイアウト作成用の言語が用意されているので直感的にレイアウトが指定できます。

【PyQt】
C++のQtライブラリのPython版で、GUIを美しく作りやすくなっています。

【wxPython】
APIが洗練されており、またその数も非常に豊富です。このためかなり凝ったGUIを作ることができます。

上記の利点を見ると、どのライブラリも、一長一短ではあります。

ですが、wxPython を使えれば、ほとんどのGUIプログラムを作る事ができるのでオススメです。

今回は、この wxPython で、「レイアウトをどのように調整するのか」についてご紹介したいと思います。

wxPythonのレイアウト

GUIの基本である、画面のレイアウト。

wxPython の場合、２つの設定方法があります。

絶対位置指定

1つめは「絶対位置を指定する」方法です。

Windowsプログラムの GUI では、この方法も多いかと思います。

フローレイアウト

2つ目は「フローレイアウト」という方法です。

これは、画面のサイズに合わせて、画面上の部品の位置が、自動的に変わります。

ブラウザで表示しているホームページの大半は、このフローレイアウトです。

それぞれ、コーディングの方法が若干異なりますので、これから解説していきたいと思います。

wxPythonの絶対位置指定レイアウト

ホームページの大半はフローレイアウトではありますが、「絶対位置指定の方が便利」というケースもあります。

特に、業務アプリケーションなどで、画面サイズが固定の場合は、わざわざフローレイアウトにする必要はありません。

絶対位置指定のレイアウト例

それでは、絶対位置指定のレイアウト例を見てみましょう。

1import wx
2
3app = wx.App(False)
4
5frame = wx.Frame(None, wx.ID_ANY, "絶対位置指定", size=(800, 600))
6panel = wx.Panel(frame, -1)
7cmb_array = ('toyota', 'honda', 'mazda')
8cmb = wx.ComboBox(panel, wx.ID_ANY, choices=cmb_array, style=wx.CB_DROPDOWN, pos=(100, 50), size=(100, 24))
9txt = wx.TextCtrl(panel, wx.ID_ANY, pos=(210, 50), size=(100, 24))
10frame.Show(True)
11
12app.MainLoop()

絶対位置指定のポイントは、コンストラクタ（ wx.ComoboBox() など）の引数で、posパラメータを指定することです。

1. コンボボックスは、pos=(100, 50)
2. テキストボックスは、pos=(210, 50)

このコードではこんな指定をしています。

確認

こうすることで、ウィンドウ上の（正確には Panel 上の）位置が固定されます。

wxPythonのフローレイアウト

フローレイアウトの指定方法

続いて、フローレイアウトの指定方法を見ていきましょう！

1import wx
2
3app = wx.App(False)
4frame = wx.Frame(None, wx.ID_ANY, "フローレイアウト", size=(200, 100))
5panel = wx.Panel(frame, -1)
6layout = wx.GridSizer(rows=1, cols=2, gap=(0, 10))
7panel.SetSizer(layout)
8
9cmb_array = ('toyota', 'honda', 'mazda')
10cmb = wx.ComboBox(panel, wx.ID_ANY, choices=cmb_array, style=wx.CB_DROPDOWN)
11txt = wx.TextCtrl(panel, wx.ID_ANY)
12layout.Add(cmb)
13layout.Add(txt, wx.ALIGN_RIGHT)
14
15frame.Show(True)
16
17app.MainLoop()

フローレイアウトの場合、画面のサイズに合わせて、画面上の部品が移動します。

上記コードを実行すると、画面のサイズに合わせて、テキストボックスが移動するのが解ると思います。

フローレイアウトのポイントは、絶対位置指定では無かった「レイアウト」クラスを使用する点です。

レイアウトクラス GridSizer

上記コードでは、「GridSizer」がこのレイアウトクラスに該当します。

GridSizer は、文字通り「グリッド」のレイアウトを司るレイアウトクラスです。

本例では、１行２列のグリッドレイアウトを作成しています。

そして、表示したい画面部品を、「レイアウトインスタンス（本例ではlayout）」に「Add」して下さい。

画面に、フローレイアウトとして表示されるようになります。

この時、アライメントを指定することで、フローする時の位置を「右付き」「左付き」「センタリング」に指定することもできます。

GridSizer 以外のレイアウトクラス

レイアウトクラスには、今回使用した GridSizer 以外にも、「BoxSizer」や「FlexGridSizer」もあります。

一般的には、複雑な画面をフローレイアウトで作成する場合は、FlexGridSizer を使用します。

FlexGridSizer は、配置領域を「行」と「列」を指定して変更できるので、よりイメージに近いレイアウトを作成することが可能です。

確認

さいごに

wxPython における、レイアウト調整についてご紹介しました。

wxPython でのレイアウト指定は、大きく「絶対位置指定」と「フローレイアウト」の２種類があり、それぞれコーディングが微妙に異なります。

レイアウトクラスを使用する分、フローレイアウトの方がコードが複雑になります。

1. 画面サイズを固定して良い場合は「絶対位置指定」
2. 画面サイズを固定できない場合は「フローレイアウト」

という風に使い分けると良いでしょう！

こちらの記事もオススメ！

2020.07.28機械学習 特集知識編人工知能・機械学習でよく使われるワード徹底まとめ！機械学習の元祖「パーセプトロン」とは？【人工知能】ニューラルネ...

2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...