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


BoxSizer

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

まずは横方向への配置です。処理の順番は下記の通りで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"ボタン1")
button_2 = wx.Button(panel, wx.ID_ANY, u"ボタン2")
button_3 = wx.Button(panel, wx.ID_ANY, u"ボタン3")

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には、わかりやすくするために色を付けています。

wxPython_boxsizer_01



次は縦方向への配置です。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"ボタン1")
button_2 = wx.Button(panel, wx.ID_ANY, u"ボタン2")
button_3 = wx.Button(panel, wx.ID_ANY, u"ボタン3")

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

panel.SetSizer(layout)

frame.Show()
application.MainLoop()

--実行結果--

wxPython_boxsizer_02



配置する部品をフレームサイズの大きさに応じて、連動させる事も可能です。 「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"ボタン1")
button_2 = wx.Button(panel, wx.ID_ANY, u"ボタン2")
button_3 = wx.Button(panel, wx.ID_ANY, u"ボタン3")

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()

--実行結果--

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

wxPython_boxsizer_03



配置を細かく制御するには「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"ボタン1", size=(80,30))
button_2 = wx.Button(panel, wx.ID_ANY, u"ボタン2", size=(80,30))
button_3 = wx.Button(panel, wx.ID_ANY, u"ボタン3", size=(80,30))
button_4 = wx.Button(panel, wx.ID_ANY, u"ボタン4", size=(80,30))
button_5 = wx.Button(panel, wx.ID_ANY, u"ボタン5", size=(80,30))
button_6 = wx.Button(panel, wx.ID_ANY, u"ボタン6", size=(80,30))
button_7 = wx.Button(panel, wx.ID_ANY, u"ボタン7", 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にて左右に配置されます。ボタン7が他のボタンに比べて小さいのはフレームのサイズが足りないためで、「SHAPED」に従い縦横比率を維持したままリサイズされた結果となります。

wxPython_boxsizer_04



「border」で余白のピクセル数を指定し、「flag」で余白部分を指定します。 使用出来る余白部分の指定は「wx.TOP」「wx.LEFT」「wx.RIGHT」「wx.BOTTOM」「wx.ALL 」の5つです。

# -*- 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となります。

wxPython_boxsizer_05



Python
スタートブック


入門 Python 3


Effective
Python


退屈なことは
Pythonにやらせよう

 
 
 

タイトル付き!StaticBoxSizer!



確かな力が身につく
Python「超」入門




P  R