本記事は、
- Pythonのスキル、初心者以上の方
を対象にした内容になっております。
本記事を含む、一連の記事を読むことで、（全７回）
- かっこよくて
- おしゃれな
「簡単なGUIアプリ」を作成できるようになります。
例えば、wxPythonで、画像表示アプリを作ってみました。
上絵みたいな、見た目（Macの場合）となります。
本記事は、下記の続編となります。
前回の記事を読んでいなくても、内容が理解できるよう、配慮しています。
本記事のゴールイメージ
本記事では、前回予告した通り
- よく使用するウィジェット（ボタン等）の紹介、設置方法
を紹介します。
※ 全体を俯瞰的に見れるよう、スタイル等の詳細設定には、触れない内容になっています。（別記事にします。）
wxPython ウィジェットの紹介と設置方法
紹介するウィジェットは
- ラベル
- テキストコントロール
- ボタン
- チェックボックス
- ラジオボタン
- リストボックス
- コンボボックス
- スライダー
- イメージ コントロール（画像表示に使用）
- メディア コントロール（動画再生に使用）
となります。
以下の章で紹介しているコードは、下記コードの7〜9行目に相当する部分になります。
import wx
class MyFrame(wx.Frame):
def __init__(self):
super().__init__(None, id=-1, title='wxPython')
######################################
# ここに入るコードのみ、紹介していきます。
######################################
self.Show()
if __name__ == '__main__':
app = wx.App()
frame = MyFrame()
app.MainLoop()
今回紹介するウィジェットは、
・ 見た目がおかしい
状態になっています。
次回の記事にて、見た目の修正方法をご紹介します。
ラベルの設置
コード
label = wx.StaticText(self, id=-1, label='任意の文字')上記コードの
- 第1引数 → 親を表します。（このケースでは、MyFrameオブジェクト自身なので、self になっています。）
- 第2引数 → 自分自身のIDを指定。 指定がない場合 -1（wx.ID_ANY でもOK）
他のウィジェットも、同じ設定をします。
実行結果
テキストコントールの設置
ラベルと異なり、キーボート等により、文字入力可能なウィジェットです。
コード
text = wx.TextCtrl(self, -1, value='最初に表示する文字')実行結果
画面全体にテキストコントロールが広がっています。
（下記画像の青枠部分がテキストコントロールです。）
ボタンの設置
コード
btn = wx.Button(self, -1, label='ボタン名')実行結果
チェックボックスの設置
コード
checkbox = wx.CheckBox(self, -1, '表示したいラベル')実行結果
ラジオボタンの設置
コード（横に並べる場合）
radio_array = ('選択1', '選択2', '選択3', '選択4')
radio_box = wx.RadioBox(self, -1, '枠に表示したい文字', choices=radio_array)実行結果
コード（縦に並べる場合）
radio_array = ('選択1', '選択2', '選択3', '選択4')
radio_box = wx.RadioBox(self, -1, '枠に表示したい文字',
choices=radio_array, style=wx.RA_VERTICAL)実行結果
リストボックスの設置
コード（単独選択の場合）
list_array = ('list1', 'list2', 'list3', 'list4')
listbox = wx.ListBox(self, -1, choices=list_array)実行結果
コード（複数選択の場合）
ListBox( )内の引数「style」を、下記の通り設定します。
list_array = ('list1', 'list2', 'list3', 'list4')
listbox = wx.ListBox(self, -1, choices=list_array, style=wx.LB_MULTIPLE)実行結果
コンボボックスの設置
コード
choices = ['選択A', '選択B', '選択C']
combo = wx.ComboBox(self, -1, '選択して下さい。', choices=choices)実行結果
下記ウインドウの 🔽 を押した時の画面です。
表示位置がおかしな位置になっていますが、次回記事にて、修正方法を解説します。
スライダーの設置
コード
slider = wx.Slider(self, -1)
# 縦方向のスライダーにしたい場合は、下記
# slider = wx.Slider(self, -1, style=wx.SL_VERTICAL)実行結果
イメージコントロールの設置
コード
# bitで表現させる
bitmap = wx.Image('画像ファイルへのパス').ConvertToBitmap()
# イメージコントロールを配置
wx.StaticBitmap(parent=self,
bitmap=bitmap,
size=bitmap.GetSize()
)実行結果
下記画像は一例です。
メディアコントールの設置
コード
# 下記importが必要
import wx.media
media = wx.media.MediaCtrl(self, -1)実行結果
空のウインドウが表示されるだけです。
動画ファイルを読み込んで、再生する方法は、別記事にて紹介いたします。
不具合内容と、次回予告
今回の設定では、途中でお話しした通り、
- ウィジェットの見た目がおかしい
状態になっています。
その他の問題点として、ウィジェットを複数設置した場合、重なって表示されます。
ウィジェット 複数設置の例；
例えば、下記コードを入力した場合、
label = wx.StaticText(self, id=-1, label='label:')
text = wx.TextCtrl(self, id=-1, value='aa')実行結果は、以下の通りになります。
これを回避するには、以下の方法があります。（非推奨）
下記のように、ウィジェットに表示位置を設定(2行目のposを追加)して、回避する事もできます。
label = wx.StaticText(self, id=-1, label='label: ')
text = wx.TextCtrl(self, id=-1, value='aa', pos=(0, 50))posとは、ウィジェットの場所を、ウインドウ左上を基準にして、絶対座標（ピクセル）で指定するものです。
実行結果
その他にも問題点があります。
ウインドウサイズを大きくした場合（マウスのドラッグ等にて）、期待した通りの見た目になっていません。
下記の通りです。
ウインドウサイズが大きくなっても、各ウィジェットの配置場所が、左上端を基準にした位置に、固定されています。
いい感じに、再レイアウトして欲しいところです。
次回は、これらの問題点を修正するため、レイアウトの紹介をします。
次回記事へのリンクです。
最後まで、読んで頂き、ありがとうございました。
またお会いしましょう。
