[Kivy] Popupでメッセージダイアログボックスを作成する(Kv language)

Kivyでのメッセージダイアログボックス

 GUIプログラムでユーザーに情報を提供する方法の一つに、メッセージダイアログボックスで表示というものがあります。Kivyには、メッセージダイアログボックスは無いので、Popupなどでメッセージダイアログボックスのようなものを作成する必要があります。

 今回は、インスタンスを呼び出す時にメッセージ内容を指定するタイプのメッセージダイアログボックスを作成しました。

今回紹介する内容
 ・ Popupによるメッセージダイアログボックスの作成

Popupによるメッセージダイアログボックスの作成

 メッセージダイアログボックスを作成するのに、以下の作業をおこなっています。今回作成するメッセージダイアログダイアログは、インスタンスを作成する時にタイトルやコメントを指定できるようにしています。
  1. Kv languageで、メッセージダイアログボックスのレイアウトを定義する。
   メッセージダイアログボックスを閉じるボタンの処理も、Kv languageに記入する。
  2. Python側でメッセージダイアログボックスのクラスを定義する。
  3. Python側でメッセージダイアログボックスを呼び出す。

1. Kv languageで、メッセージダイアログボックスのレイアウトを定義する。

 Kv languageには、Popupの名前(PopupD)の下にWidgetを記入します。今回作成するダイアログでは、呼び出す時に指定した値を表示させるため、titleやtextの値をroot.titleやroot.text1、root.text2にしています。これらの値は、Python側から受け取ります。

 緑字の部分は、ダイアログのレイアウトを指定している部分であり、この値を変更することで
 ダイアログの形や表示位置を変更することができます。

<PopupD>
    id: popup
    title: root.title
    auto_dismiss: False
    size_hint: (.8, .6)

    BoxLayout:
        orientation: 'vertical'

        Label:
            id: text1
            text: root.text1
            text_size: self.size
            halign: 'left'
            valign: 'middle'
            font_size: '14pt'
            size_hint_y: 0.3

        Label:
            id: text2
            text: root.text2
            text_size: self.size
            halign: 'left'
            valign: 'top'
            size_hint_y: 0.5

        Button:
            id: close_button
            size_hint_y: 0.2
            text: 'Close'
            on_release: root.dismiss()

メッセージダイアログボックスを閉じるボタンの処理

 ダイアログは、閉じる時に他に作業をおこなわないので、Kv languageにon_release: root.dismiss()と記入することでダイアログを閉じる作業をおこなっています。

        Button:
            id: close_button
            size_hint_y: 0.2
            text: 'Close'
            on_release: root.dismiss()

2. Python側に、メッセージダイアログボックスのクラスを定義する。

 1.で定義したダイアログを呼び出せるように、PopupDのクラスを定義します。PopupDのタイトル(title)やメッセージ内容(text1, text2)を呼び出し時に指定できるようにするため、クラスには以下の記入をおこないます。
 1. 変数title,text1, text2を作成する。 (例: title = StringProperty())
 2. 定義時に指定される値を取得できるように__init__()にtitle,text1,text2を記入する。
 3. 1.で作成した変数に、2.で取得した値を入れる。

class PopupD(Popup):
    title = StringProperty()
    text1 = StringProperty()
    text2 = StringProperty()

    def __init__(self, title, text1, text2, **kwargs):
        super(PopupD, self).__init__(**kwargs)
        self.title = title
        self.text1 = text1
        self.text2 = text2

3. Python側でメッセージダイアログボックスを呼び出す。

 ダイアログを開くには、引数に3つのテキスト(title, text1, text2)の値を指定してPopupDを呼び出して、open()により、ダイアログを表示します。

 このため、引数を変更してPopupDを呼び出すことにより、異なるメッセージのダイアログを同じクラス(PopupD)を使用して表示することができます。

    def on_release(self):
        self.popup = PopupD('Infomation', 'Main Text', 'Sub Text')
        self.popup.open()

サンプルプログラムの仕様

 今回のプログラムでは、プログラムを実行すると左図のような画面が表示されます。中央の”click me!”ボタンを押すと、左図のようなPopupが表示されます。

 PopupのタイトルやPopup内のLabelのテキストは、Popupを定義する時に指定した値になります。

左図: メイン画面

右図: Popupで作成したダイアログ

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

import kivy

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.config import Config
from kivy.uix.popup import Popup
from kivy.properties import StringProperty

kivy.require('2.2.0')

Config.set('graphics', 'width', '600')
Config.set('graphics', 'height', '500')

Builder.load_string('''
<MainDisp>
    FloatLayout:
        size: root.size
        canvas.before:
            Color:
                rgba: 0.7, 0.7, 0.7, 1
            Rectangle:
                size: self.size
                pos: self.pos

        Button:
            id: open_button
            text: 'click me!'
            size_hint: (.5, .5)
            pos_hint: {'center_x': .5, 'center_y': .5}
            on_release: root.on_release()


<PopupD>
    id: popup
    title: root.title
    auto_dismiss: False
    size_hint: (.8, .6)

    BoxLayout:
        orientation: 'vertical'

        Label:
            id: text1
            text: root.text1
            text_size: self.size
            halign: 'left'
            valign: 'middle'
            font_size: '14pt'
            size_hint_y: 0.3

        Label:
            id: text2
            text: root.text2
            text_size: self.size
            halign: 'left'
            valign: 'top'
            size_hint_y: 0.5

        Button:
            id: close_button
            size_hint_y: 0.2
            text: 'Close'
            on_release: root.dismiss()

''')


class PopupD(Popup):
    title = StringProperty()
    text1 = StringProperty()
    text2 = StringProperty()

    def __init__(self, title, text1, text2, **kwargs):
        super(PopupD, self).__init__(**kwargs)
        self.title = title
        self.text1 = text1
        self.text2 = text2


class MainDisp(Widget):

    def __init__(self, **kwargs):
        super(MainDisp, self).__init__(**kwargs)

    def on_release(self):
        self.popup = PopupD('Infomation', 'Main Text', 'Sub Text')
        self.popup.open()


class MainDispApp(App):
    def __init__(self, **kwargs):
        super(MainDispApp, self).__init__(**kwargs)
        self.title = 'Popup Test'

    def build(self):
        return MainDisp()


if __name__ == '__main__':
    app = MainDispApp()
    app.run()
タイトルとURLをコピーしました