wxPythonでレイアウトを調整するには？
2020.02.21
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 でのレイアウト指定は、大きく「絶対位置指定」と「フローレイアウト」の２種類があり、それぞれコーディングが微妙に異なります。
レイアウトクラスを使用する分、フローレイアウトの方がコードが複雑になります。
- 画面サイズを固定して良い場合は「絶対位置指定」
- 画面サイズを固定できない場合は「フローレイアウト」
という風に使い分けると良いでしょう！
ライトコードよりお知らせ
にゃんこ師匠
ミツオカにゃんこ師匠ミツオカにゃんこ師匠ミツオカ一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております！
採用情報はこちら書いた人はこんな人
エンジニアになろう！2020.04.02【iOSアプリ開発】プロビジョニングプロファイルを作成するには？- IT技術2020.03.31【Unity】meshlabで出力した点群データを軽量化して可視化する
- IT技術2020.03.27【Python】ArtistAnimationを使って複数の図からアニメーションを作ってみた
- IT技術2020.03.26【Unity】アクションゲームを１から作る
関連記事
採用情報
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
\ センスで挑め！ /
UI/UXデザイナー
\ 世界を震撼させろ！ /
WEB開発ディレクター
\ 妄想野郎カモン！ /
ゲームプランナー
\ ゲーム好き集合ー！ /
ゲームエンジニア
