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

前項までにいくつかのSizerを紹介してきましたが、それらを組み合わせて使用する事によって、より複雑な配置をする事が可能となります。サンプルとして電卓のレイアウトを見てみましょう。

• 電卓のレイアウトサンプル
• レイアウト階層

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

レイアウトのみでイベント設定はしていません。さらにまだ紹介していない「MenuBar」や「TextCtrl」なども登場していますが、これは別項にて説明します。

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

import wx


#--------------------------------------
#    フレームを継承した
#    トップレベルウィンドウクラス
#--------------------------------------
class CalcFrame(wx.Frame):

    def __init__(self):
        
        wx.Frame.__init__(self, None,wx.ID_ANY, u"電卓ﾚｲｱｳﾄ", size=(300,280))

        #    ステータスバーの初期化
        self.CreateStatusBar()
        self.SetStatusText("http://www.python-izm.com/")
        self.GetStatusBar().SetBackgroundColour(None)

        #    メニューバーの初期化
        self.SetMenuBar(CalcMenu())
        
        #    本体部分の構築
        root_panel = wx.Panel(self, wx.ID_ANY)

        text_panel       = TextPanel(root_panel)
        cmdbutton_panel  = CommandButtonPanel(root_panel)
        calcbutton_panel = CalcButtonPanel(root_panel)

        root_layout = wx.BoxSizer(wx.VERTICAL)
        root_layout.Add(text_panel, 0, wx.GROW | wx.ALL, border=10)
        root_layout.Add(cmdbutton_panel, 0, wx.GROW | wx.LEFT | wx.RIGHT, border=20)
        root_layout.Add(calcbutton_panel, 0, wx.GROW | wx.ALL, border=10)
        root_panel.SetSizer(root_layout)
        root_layout.Fit(root_panel)

#--------------------------------------
#    CalcFrameにセットする
#    メニューバークラス
#--------------------------------------
class CalcMenu(wx.MenuBar):

    def __init__(self):

        wx.MenuBar.__init__(self)
        
        menu_file = wx.Menu()
        menu_file.Append(wx.ID_ANY, u"保存")
        menu_file.Append(wx.ID_ANY, u"終了")
        menu_edit = wx.Menu()
        menu_edit.Append(wx.ID_ANY, u"コピー")
        menu_edit.Append(wx.ID_ANY, u"ペースト")
        
        self.Append(menu_file, u"ファイル")
        self.Append(menu_edit, u"編集")

#--------------------------------------
#    画面上部に表示されるテキスト部分
#--------------------------------------
class TextPanel(wx.Panel):

    def __init__(self,parent):
    
        wx.Panel.__init__(self, parent, wx.ID_ANY)
        
        calc_text = wx.TextCtrl(self, wx.ID_ANY, style=wx.TE_RIGHT)
        layout = wx.BoxSizer(wx.HORIZONTAL)
        layout.Add(calc_text, 1)
        self.SetSizer(layout)

#--------------------------------------
#    画面中部に表示されるボタン部分
#--------------------------------------
class CommandButtonPanel(wx.Panel):

    def __init__(self,parent):

        wx.Panel.__init__(self, parent, wx.ID_ANY)

        button_ce = wx.Button(self, wx.ID_ANY, "CE")
        button_c  = wx.Button(self, wx.ID_ANY, "C")
        layout = wx.BoxSizer(wx.HORIZONTAL)
        layout.Add(button_ce, flag=wx.GROW)
        layout.Add(button_c, flag=wx.GROW)
        self.SetSizer(layout)

#--------------------------------------
#    画面下部に表示されるボタン部分
#--------------------------------------
class CalcButtonPanel(wx.Panel):

    def __init__(self,parent):
    
        wx.Panel.__init__(self, parent, wx.ID_ANY)

        button_collection = ("7","8","9","+",
                             "4","5","6","-",
                             "1","2","3","*",
                             "0",".","=","/")

        layout = wx.GridSizer(4, 4, 3, 3)
        
        for i in button_collection:
            layout.Add(wx.Button(self, wx.ID_ANY, i, size=(30,25)), 1, wx.GROW)

        self.SetSizer(layout)


#--------------------------------------
#    カスタムフレームを初期化して
#    アプリケーションを開始
#--------------------------------------
if __name__ == "__main__":

    application = wx.App()
    frame = CalcFrame()
    frame.Show()
    application.MainLoop()

--実行結果--

イベント設定していないので、実行しても動作しません。

上記サンプルのレイアウト構造は、階層で表示するとこのようになります。人によっては違った印象を持つかもしれませんし、異なる方法で全く同じ配置をする事も可能なので、あくまで一例として考えてください。

(1) Frame -- CalcFrame

        (2) MenuBar -- CalcMenu

        (2) Panel -- root_panel
             縦方向のBoxSizerで3つのパネルを配置

                        (3) Panel -- TextPanel
                             横方向のBoxSizerで1個のテキストを配置

                        (3) Panel -- CommandButtonPanel
                             横方向のBoxSizerで2個のボタンを配置

                        (3) Panel -- CalcButtonPanel
                             4x4マスのGridSizerで16個のボタンを配置

        (2)StatusBar