デザインのメモ

ロゴやフォント、フォトショ・イラレのお話をします

wxPython(Phoenix)で始めるGUIプログラミング【パネル】

この記事について

こちらにまとめられています。

nippori30.hatenablog.com

今回、何をするか?

パネルを利用して、ウインドウの中を分割してみたいと思います!

とりあえず動かしてみよう!

赤い背景の上に、緑の領域と、青い領域を作ってみたいと思います。

# app.py
import wx


class MyApp(wx.Frame):

    def __init__(self, *args, **kw):
        super(MyApp, self).__init__(*args, **kw)

        self.init_ui()

    def init_ui(self):
        self.SetTitle('タイトル')
        self.SetBackgroundColour((255, 0, 0))
        self.SetPosition((200, 100))
        self.SetSize((400, 300))
        self.Show()

        panel_G = wx.Panel(self, -1, pos=(10, 10), size=(180, 260))
        panel_G.SetBackgroundColour((0, 255, 0))

        panel_B = wx.Panel(self, -1)
        panel_B.SetBackgroundColour((0, 0, 255))
        panel_B.SetPosition((210, 10))
        panel_B.SetSize((180, 260))


app = wx.App()
MyApp(None)
app.MainLoop()

次のように実行するとこのような画面ができるはずです。

> pythonw app.py

f:id:nippori30:20170916050841p:plain

解説

前回からの変更点のみを解説していきます。

        panel_G = wx.Panel(self, -1, pos=(10, 10), size=(180, 260))
        panel_G.SetBackgroundColour((0, 255, 0))

まず、緑のパネルを作ります。今回はパネルの引数にPanel(親, ID, 場所, 大きさ)を指定しました。
親は、パネルを表示する土台を設定します。今回はウインドウに直に置くのでselfとします。パネルを重ねる時は、重ねる元のパネルを親にします。
IDは、パネルなどの識別子として使いますが、特に必要がない限りデフォルトの-1と設定しておけば良いでしょう。
場所は、親からの相対座標となります。ただし、注意しなければならないのが、ウインドウサイズにはタイトルバーの大きさも含まれるのですが、ウインドウを親とした時の座標は描画領域の左上が原点になるということです。言葉では分かりにくいので、図を用意しました。(分かりにくかったらすいません。。。)
f:id:nippori30:20170916050940p:plain

        panel_B = wx.Panel(self, -1)
        panel_B.SetBackgroundColour((0, 0, 255))
        panel_B.SetPosition((210, 10))
        panel_B.SetSize((180, 260))

こちらは、青のパネルを作ります。
先ほどよりもPanel()の引数が少ないですが、そのあとに、ウインドウの時と同じように場所や大きさを指定しています。

Panel()に引数として渡しても、後から設定してもできるので、好みの方で自由にパネルを作ってみましょう。

次回

ウインドウに文字を表示するために、ラベルを作ります。