Python入門から応用までの学習サイト

BoxSizerと並び、wxPythonの基本的なSizerであるGridSizerです。GridSizerはマス目状に部品を配置します。

• 基本的な使い方
• 配置の詳細制御
• 余白の指定

Python＆データサイエンスオンライン講座

まずはパラメータなどを指定せずに部品を追加します。処理の順番は下記の通りです。

• アプリケーションの初期化  (5行目)
• フレームの初期化  (10行目)
• フレームを親としてパネルを初期化  (12行目)
• 配置するボタンを初期化  (11,12,13,14行目)
• GridSizerを２列・２行で初期化  (16行目)
• GridSizerへボタンの追加  (17,18,19,20行目)
• パネルへGridSizerをセット  (22行目)

※ 配置をわかりやすくするために「Button」を使用していますが、Buttonについては別項にて解説します。

# -*- coding: utf-8 -*- 

import wx

application = wx.App()
frame = wx.Frame(None, wx.ID_ANY, u"テストフレーム", size=(300,300))

panel = wx.Panel(frame, wx.ID_ANY)
panel.SetBackgroundColour("#AFAFAF")

button_1 = wx.Button(panel, wx.ID_ANY, u"１")
button_2 = wx.Button(panel, wx.ID_ANY, u"２")
button_3 = wx.Button(panel, wx.ID_ANY, u"３")
button_4 = wx.Button(panel, wx.ID_ANY, u"４")

layout = wx.GridSizer(2, 2)
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」と同じ）また「 | 」を使用して、さらに詳細な配置場所の指定を行う事も可能です。

# -*- coding: utf-8 -*- 

import wx

application = wx.App()
frame = wx.Frame(None, wx.ID_ANY, u"テストフレーム", size=(600,300))

panel = wx.Panel(frame, wx.ID_ANY)
panel.SetBackgroundColour("#AFAFAF")

button_1 = wx.Button(panel, wx.ID_ANY, u"１", size=(30,30))
button_2 = wx.Button(panel, wx.ID_ANY, u"２", size=(30,30))
button_3 = wx.Button(panel, wx.ID_ANY, u"３", size=(30,30))
button_4 = wx.Button(panel, wx.ID_ANY, u"４", size=(30,30))
button_5 = wx.Button(panel, wx.ID_ANY, u"５", size=(30,30))
button_6 = wx.Button(panel, wx.ID_ANY, u"６", size=(30,30))
button_7 = wx.Button(panel, wx.ID_ANY, u"７", size=(30,30))
button_8 = wx.Button(panel, wx.ID_ANY, u"８", size=(30,30))
button_9 = wx.Button(panel, wx.ID_ANY, u"９", size=(30,30))

layout = wx.GridSizer(3, 3)
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.TOP」「wx.LEFT」「wx.RIGHT」「wx.BOTTOM」「wx.ALL 」の５つです。

# -*- coding: utf-8 -*- 

import wx

application = wx.App()
frame = wx.Frame(None, wx.ID_ANY, u"テストフレーム", size=(300,300))

panel = wx.Panel(frame, wx.ID_ANY)
panel.SetBackgroundColour("#AFAFAF")

button_1 = wx.Button(panel, wx.ID_ANY, u"１")
button_2 = wx.Button(panel, wx.ID_ANY, u"２")
button_3 = wx.Button(panel, wx.ID_ANY, u"３")
button_4 = wx.Button(panel, wx.ID_ANY, u"４")

layout = wx.GridSizer(2, 2)
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となります。