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

BoxSizerはwxPythonにおける基本的なSizerの一つで、ボタンやテキストなどの部品を縦方向もしくは横方向へ連続して配置します。

• 横配置
• 縦配置
• フレームサイズとの連動
• 配置の詳細制御
• 余白の指定

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

まずは横方向への配置です。処理の順番は下記の通りで15行目から18行目がポイントです。

• アプリケーションの初期化  (5行目)
• フレームの初期化  (6行目)
• フレームを親としてパネルを初期化  (8行目)
• 配置するボタンを初期化  (11,12,13行目)
• BoxSizerを横配置で初期化  (15行目)
• BoxSizerへボタンの追加  (16,17,18行目)
• パネルへBoxSizerをセット  (20行目)

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

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

import wx

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

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"ボタン３")

layout = wx.BoxSizer(wx.HORIZONTAL)
layout.Add(button_1)
layout.Add(button_2)
layout.Add(button_3)

panel.SetSizer(layout)

frame.Show()
application.MainLoop()

--実行結果--

BoxSizerをセットしているPanelには、わかりやすくするために色を付けています。

次は縦方向への配置です。15行目が先程のソースコードからの変更点となります。

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

import wx

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

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"ボタン３")

layout = wx.BoxSizer(wx.VERTICAL)
layout.Add(button_1)
layout.Add(button_2)
layout.Add(button_3)

panel.SetSizer(layout)

frame.Show()
application.MainLoop()

--実行結果--

配置する部品をフレームサイズの大きさに応じて、連動させる事も可能です。 「Add」の「proportion」に「1」を指定します。 先程のソースコードのように「proportion」に何も指定が無いと、デフォルト値として「0」が適用され、ボタンのサイズはそのまま保持されます。

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

import wx

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

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"ボタン３")

layout = wx.BoxSizer(wx.VERTICAL)
layout.Add(button_1, proportion=1)
layout.Add(button_2, proportion=1)
layout.Add(button_3, proportion=1)

panel.SetSizer(layout)

frame.Show()
application.MainLoop()

--実行結果--

先程の実行結果と違い、余白が無くなりました。フレームの最大化を行っても、それに応じて適切なサイズへリサイズされます。

配置を細かく制御するには「flag」を指定します。「GROW」は自身に割り当てられている領域を全て使用するようにリサイズされ、「SHAPED」は自分自身の縦横比率を維持したままフレームサイズに合わせてリサイズされます。（「EXPAND」は「GROW」と同じ）また「 | 」を使用して、さらに詳細な配置場所の指定を行う事も可能です。

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

import wx

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

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

button_1 = wx.Button(panel, wx.ID_ANY, u"ボタン１", size=(80,30))
button_2 = wx.Button(panel, wx.ID_ANY, u"ボタン２", size=(80,30))
button_3 = wx.Button(panel, wx.ID_ANY, u"ボタン３", size=(80,30))
button_4 = wx.Button(panel, wx.ID_ANY, u"ボタン４", size=(80,30))
button_5 = wx.Button(panel, wx.ID_ANY, u"ボタン５", size=(80,30))
button_6 = wx.Button(panel, wx.ID_ANY, u"ボタン６", size=(80,30))
button_7 = wx.Button(panel, wx.ID_ANY, u"ボタン７", size=(80,30))

layout = wx.BoxSizer(wx.HORIZONTAL)
layout.Add(button_1, flag=wx.GROW)
layout.Add(button_2, flag=wx.SHAPED)
layout.Add(button_3, flag=wx.SHAPED | wx.ALIGN_TOP)
layout.Add(button_4, flag=wx.SHAPED | wx.ALIGN_BOTTOM)
layout.Add(button_5, flag=wx.SHAPED | wx.ALIGN_CENTER)
layout.Add(button_6, flag=wx.SHAPED | wx.ALIGN_LEFT)
layout.Add(button_7, flag=wx.SHAPED | wx.ALIGN_RIGHT)

panel.SetSizer(layout)

frame.Show()
application.MainLoop()

--実行結果--

「ALIGN_LEFT」「ALIGN_RIGHT」はHORIZONTALでは変化がありません。VERTICALにて左右に配置されます。ボタン７が他のボタンに比べて小さいのはフレームのサイズが足りないためで、「SHAPED」に従い縦横比率を維持したままリサイズされた結果となります。

「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,200))

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

inner_panel_1 = wx.Panel(panel, wx.ID_ANY)
inner_panel_2 = wx.Panel(panel, wx.ID_ANY)
inner_panel_3 = wx.Panel(panel, wx.ID_ANY)

inner_panel_1.SetBackgroundColour("#FF0000")
inner_panel_2.SetBackgroundColour("#00FF00")
inner_panel_3.SetBackgroundColour("#0000FF")

layout = wx.BoxSizer(wx.VERTICAL)
layout.Add(inner_panel_1, proportion=1, flag=wx.EXPAND | wx.TOP,  border=10)
layout.Add(inner_panel_2, proportion=1, flag=wx.EXPAND | wx.LEFT, border=10)
layout.Add(inner_panel_3, proportion=1, flag=wx.EXPAND | wx.ALL,  border=10)

panel.SetSizer(layout)

frame.Show()
application.MainLoop()

--実行結果--

赤いパネルが上部に余白10px、緑のパネルが左部に余白10px、青パネルが全方位に余白10pxとなります。