こんにちは.これからwxPythonを使ってみる(3)について始めたいと思います.
対象や動作環境などのはじめに必要な情報はwxPythonを使ってみる(1) と同じになります.
また,今回の内容はwxPythonを使ってみる(2) の続きとなります.是非読んで見てください.

特徴

前回では,wx.Frameの基礎的な知識について学んだが,今回はSizerを使ったレイアウトについて学んで行きたいと思います.
wx.Sizerのサブクラスである各種Sizerを利用したレイアウトが一般的に行われています.
まず,Sizerの中のBoxSizerについて学びましょう.
BoxSizerは,垂直BoxSizerと水平BoxSizerの組み合わせでできています.これを使っていろんな複雑なレイアウトを作ることができます.

item引数

window_display06.py
import wx
class CustomFrame(wx.Frame):
    def __init__(self,title):
        wx.Frame.__init__(self,None,-1,title,size=(400,400))

        panel = wx.Panel(self)

        layout = wx.BoxSizer(wx.VERTICAL)
#       layout = wx.BoxSizer(wx.HORIZONTAL)
        layout.Add(wx.Button(panel,wx.ID_ANY,"B01"))
        layout.Add(wx.Button(panel,wx.ID_ANY,"B02"))
        layout.Add(wx.Size(0,50))
        layout.Add(wx.Button(panel,wx.ID_ANY,"B03"))
        layout.Add(wx.Button(panel,wx.ID_ANY,"B04"))

        panel.SetSizer(layout)
        self.Show()

app = wx.App(False)
CustomFrame("BoxSizer")
app.MainLoop()

Add関数は,item引数として渡すことができる帯ジェクトは次の3つです.
1. wx.Windowを継承しているオブジェクトはwx.Button
2. wx.Sizerを継承しているオブジェクトはwx.BoxSizer
3. wx.Sizeオブジェクト

wx.Sizeで指定した(0,50)の高さ分のスペースが確保されます.
また,サンプルコードの6行と7行のwx.VERTICALとwx.HORIZONTALそれぞれ垂直方向への配置と水平方向の配置となっています.サンプルコードを実行しますと,下の図となります.

スクリーンショット 2018-05-01 11.36.27.png

proportion引数

proportionは,配置されたアイテムのコンテナー領域内に占める割合を制御しています.proportionは1以上の数値が指定されたアイテムは,コンテナーの残領域を占有するように配置されます.
また,複数のアイテムで1以上の数値が指定された場合は,それぞれの数値によって占有率が変化します.

window_display07.py
import wx
class CustomFrame(wx.Frame):
    def __init__(self,title):
        wx.Frame.__init__(self,None,-1,title,size=(400,400))

        panel = wx.Panel(self)

        layout = wx.BoxSizer(wx.VERTICAL)
        layout.Add(wx.Button(panel,wx.ID_ANY,"B01"))
        layout.Add(wx.Button(panel,wx.ID_ANY,"B02"),proportion=1)
        layout.Add(wx.Button(panel,wx.ID_ANY,"B03"))
        layout.Add(wx.Button(panel,wx.ID_ANY,"B04"))

        panel.SetSizer(layout)
        self.Show()

app = wx.App(False)
CustomFrame("BoxSizer")
app.MainLoop()

proportionへ1以上を指定されると下の図のようになります.矢印で示した範囲はB02の範囲となります.

スクリーンショット 2018-05-01 11.43.15.png

また,B01~B04のB03を4,B04を1に変更してみます.

・・・
layout.Add(wx.Button(panel,wx.ID_ANY,"B01"))
layout.Add(wx.Button(panel,wx.ID_ANY,"B02"))
layout.Add(wx.Button(panel,wx.ID_ANY,"B03"),proportion=4)
layout.Add(wx.Button(panel,wx.ID_ANY,"B04"),proportion=1)
・・・

実行した結果は,下の図となります.B03とB04の比例は4対1となります.
スクリーンショット 2018-05-01 11.49.21.png

今回のwxPythonを使ってみる(3)は以上で終わりましす.
読んでいただいてありがとうございます.
また今度で会いましょ!


「wxpythonを使ってみる」目次

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.