BoxSizerと並び、wxPythonの基本的なSizerであるGridSizerです。GridSizerはマス目状に部品を配置します。
基本的な使い方
まずはパラメータなどを指定せずに要素を追加します。処理の順番は下記の通りです。
※ 配置をわかりやすくするためにButtonを使用していますが、Buttonについては別項にて解説します。
- アプリケーションの初期化 (3行目)
- フレームの初期化 (8行目)
- フレームを親としてパネルを初期化 (10行目)
- 配置するボタンを初期化 (9-12行目)
- GridSizerを２列・２行で初期化 (14行目)
- GridSizerへボタンの追加 (15-18行目)
- パネルへGridSizerをセット (20行目)
import wx
application = wx.App()
frame = wx.Frame(None, wx.ID_ANY, 'テストフレーム', size=(300, 300))
panel = wx.Panel(frame, wx.ID_ANY)
panel.SetBackgroundColour('#AFAFAF')
button_1 = wx.Button(panel, wx.ID_ANY, '１')
button_2 = wx.Button(panel, wx.ID_ANY, '２')
button_3 = wx.Button(panel, wx.ID_ANY, '３')
button_4 = wx.Button(panel, wx.ID_ANY, '４')
layout = wx.GridSizer(rows=2, cols=2, gap=(0, 0))
layout.Add(button_1)
layout.Add(button_2)
layout.Add(button_3)
layout.Add(button_4)
panel.SetSizer(layout)
frame.Show()
application.MainLoop()
GridSizerをセットしているPanelには、わかりやすくするために色を付けています。
配置の詳細制御
配置を細かく制御するにはflagを指定します。GROWは自身に割り当てられている領域を全て使用するようにリサイズされ、SHAPEDは自分自身の縦横比率を維持したままフレームサイズに合わせてリサイズされます。（EXPANDはGROWと同じ）また「 | 」を使用して、さらに詳細な配置場所の指定を行う事も可能です。
import wx
application = wx.App()
frame = wx.Frame(None, wx.ID_ANY, 'テストフレーム', size=(600, 300))
panel = wx.Panel(frame, wx.ID_ANY)
panel.SetBackgroundColour('#AFAFAF')
button_1 = wx.Button(panel, wx.ID_ANY, '１', size=(30, 30))
button_2 = wx.Button(panel, wx.ID_ANY, '２', size=(30, 30))
button_3 = wx.Button(panel, wx.ID_ANY, '３', size=(30, 30))
button_4 = wx.Button(panel, wx.ID_ANY, '４', size=(30, 30))
button_5 = wx.Button(panel, wx.ID_ANY, '５', size=(30, 30))
button_6 = wx.Button(panel, wx.ID_ANY, '６', size=(30, 30))
button_7 = wx.Button(panel, wx.ID_ANY, '７', size=(30, 30))
button_8 = wx.Button(panel, wx.ID_ANY, '８', size=(30, 30))
button_9 = wx.Button(panel, wx.ID_ANY, '９', size=(30, 30))
layout = wx.GridSizer(rows=3, cols=3, gap=(0, 0))
layout.Add(button_1)
layout.Add(button_2)
layout.Add(button_3, flag=wx.GROW)
layout.Add(button_4, flag=wx.SHAPED)
layout.Add(button_5, flag=wx.SHAPED | wx.ALIGN_TOP)
layout.Add(button_6, flag=wx.SHAPED | wx.ALIGN_BOTTOM)
layout.Add(button_7, flag=wx.SHAPED | wx.ALIGN_CENTER)
layout.Add(button_8, flag=wx.SHAPED | wx.ALIGN_LEFT)
layout.Add(button_9, flag=wx.SHAPED | wx.ALIGN_RIGHT)
panel.SetSizer(layout)
frame.Show()
application.MainLoop()
フレームのサイズを変えてみると、より詳細に挙動が判ると思います。
余白の指定
borderで余白のピクセル数を指定し、flagで余白部分を指定します。使用出来る余白部分の指定はwx.TOPwx.LEFTwx.RIGHTwx.BOTTOMwx.ALLの５つです。
import wx
application = wx.App()
frame = wx.Frame(None, wx.ID_ANY, 'テストフレーム', size=(300, 300))
panel = wx.Panel(frame, wx.ID_ANY)
panel.SetBackgroundColour('#AFAFAF')
button_1 = wx.Button(panel, wx.ID_ANY, '１')
button_2 = wx.Button(panel, wx.ID_ANY, '２')
button_3 = wx.Button(panel, wx.ID_ANY, '３')
button_4 = wx.Button(panel, wx.ID_ANY, '４')
layout = wx.GridSizer(rows=2, cols=2, gap=(0, 0))
layout.Add(button_1, flag=wx.EXPAND | wx.TOP, border=10)
layout.Add(button_2, flag=wx.EXPAND | wx.LEFT, border=10)
layout.Add(button_3, flag=wx.EXPAND | wx.RIGHT, border=10)
layout.Add(button_4, flag=wx.EXPAND | wx.ALL, border=10)
panel.SetSizer(layout)
frame.Show()
application.MainLoop()
ボタン１の上部に余白10px、ボタン２の左部に余白10px、ボタン３の右部に余白10px、ボタン４の全方位に余白10pxとなります。
