wxPythonでレイアウトを調整するには？
2021.12.20
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の絶対位置指定レイアウト
ホームページの大半はフローレイアウトではありますが、「絶対位置指定の方が便利」というケースもあります。
特に、業務アプリケーションなどで、画面サイズが固定の場合は、わざわざフローレイアウトにする必要はありません。
絶対位置指定のレイアウト例
それでは、絶対位置指定のレイアウト例を見てみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 | import wx app = wx.App(False) frame = wx.Frame(None, wx.ID_ANY, "絶対位置指定", size=(800, 600)) panel = wx.Panel(frame, -1) cmb_array = ('toyota', 'honda', 'mazda') cmb = wx.ComboBox(panel, wx.ID_ANY, choices=cmb_array, style=wx.CB_DROPDOWN, pos=(100, 50), size=(100, 24)) txt = wx.TextCtrl(panel, wx.ID_ANY, pos=(210, 50), size=(100, 24)) frame.Show(True) app.MainLoop() |
絶対位置指定のポイントは、コンストラクタ（ wx.ComoboBox() など）の引数で、posパラメータを指定することです。
- コンボボックスは、 pos=(100, 50)
- テキストボックスは、 pos=(210, 50)
このコードではこんな指定をしています。
確認
こうすることで、ウィンドウ上の（正確には Panel 上の）位置が固定されます。
wxPythonのフローレイアウト
フローレイアウトの指定方法
続いて、フローレイアウトの指定方法を見ていきましょう！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import wx app = wx.App(False) frame = wx.Frame(None, wx.ID_ANY, "フローレイアウト", size=(200, 100)) panel = wx.Panel(frame, -1) layout = wx.GridSizer(rows=1, cols=2, gap=(0, 10)) panel.SetSizer(layout) cmb_array = ('toyota', 'honda', 'mazda') cmb = wx.ComboBox(panel, wx.ID_ANY, choices=cmb_array, style=wx.CB_DROPDOWN) txt = wx.TextCtrl(panel, wx.ID_ANY) layout.Add(cmb) layout.Add(txt, wx.ALIGN_RIGHT) frame.Show(True) app.MainLoop() |
フローレイアウトの場合、画面のサイズに合わせて、画面上の部品が移動します。
上記コードを実行すると、画面のサイズに合わせて、テキストボックスが移動するのが解ると思います。
フローレイアウトのポイントは、絶対位置指定では無かった「レイアウト」クラスを使用する点です。
レイアウトクラス GridSizer
上記コードでは、「GridSizer」がこのレイアウトクラスに該当します。
GridSizer は、文字通り「グリッド」のレイアウトを司るレイアウトクラスです。
本例では、１行２列のグリッドレイアウトを作成しています。
そして、表示したい画面部品を、「レイアウトインスタンス（本例ではlayout）」に「Add」して下さい。
画面に、フローレイアウトとして表示されるようになります。
この時、アライメントを指定することで、フローする時の位置を「右付き」「左付き」「センタリング」に指定することもできます。
GridSizer 以外のレイアウトクラス
レイアウトクラスには、今回使用した GridSizer 以外にも、「BoxSizer」や「FlexGridSizer」もあります。
一般的には、複雑な画面をフローレイアウトで作成する場合は、FlexGridSizer を使用します。
FlexGridSizer は、配置領域を「行」と「列」を指定して変更できるので、よりイメージに近いレイアウトを作成することが可能です。
確認
さいごに
wxPython における、レイアウト調整についてご紹介しました。
wxPython でのレイアウト指定は、大きく「絶対位置指定」と「フローレイアウト」の２種類があり、それぞれコーディングが微妙に異なります。
レイアウトクラスを使用する分、フローレイアウトの方がコードが複雑になります。
- 画面サイズを固定して良い場合は「絶対位置指定」
- 画面サイズを固定できない場合は「フローレイアウト」
という風に使い分けると良いでしょう！
こちらの記事もオススメ！
書いた人はこんな人
- 「好きなことを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もりは大歓迎！
また、WEBエンジニアとモバイルエンジニアも積極採用中です！
ご応募をお待ちしております！
ITエンタメ2022.05.25COBOL開発者は「コンピューターおばあちゃん」で海軍准将!?グレース・ホッパー- ITエンタメ2022.05.23マイクロソフトの壁は穴だらけ!?デヴィッド・カトラー
- ITエンタメ2022.05.13ホーコン・ウィウム・リーが提唱したCSSの過去と未来
- ITエンタメ2022.04.28ラスムッセン兄弟が作ったグーグルマップの軌跡
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
