[Kivy] ToggleButtonの状態に合わせてテキストを変更する(Kv language)

ToggloButtonの状態をテキストでも表示したい

 KivyのToggloButtonは状態(’normal’と’down’)ごとに背景色が変わることで、ユーザーに状態を認識できるようにしています。この方法では、’normal’と’down’の色を理解しておく必要があり、直感的ではありません。

 その改善方法として一番簡単なのは、ToggleButtonのテキストを状態ごとに変えて、テキストを読めばユーザーが状態を把握できるようにすることであると思います。この作業をKv language側のみで簡単におこなう方法を紹介します。

ToggleButtonの状態によりテキストを変更する

 ToggleButtonのテキストを状態によって変更するには、以下の作業を行います。
 1. textに最初の状態のテキストを指定する。
 (今回は、state: ‘down’を指定しているので’down’の状態のテキストを指定しています。)
 2. on_stateに、
  self.text=‘normal時のテキスト’ if self.state == ‘normal’ else ‘down時のテキスト’
  を記入する。

 設定することで、’normal’時には、’normal時のテキスト’が、’down’時には、’down時のテキスト’が表示されます。


        ToggleButton:
            state: 'down'
            text: 'On'
            on_state:
                self.text='Off' if self.state == 'normal' else 'On'

サンプルプログラム

 以下のサンプルプログラムは、ToggleButtonの状態ごとにテキストが変更するものです。

 実行すると、左図のような画面が表示され、ToggleButtonをクリックするたびにテキストが変更しれます。(状態が’down’の場合は’On’、’normal’の場合は’Off’と表示します。)

# -*- 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

kivy.require('2.2.0')

Config.set('graphics', 'width', '300')
Config.set('graphics', 'height', '100')

Builder.load_string('''

<MainD>
    BoxLayout:
        size: root.size
        padding: 20

        ToggleButton:
            state: 'down'
            text: 'On'
            on_state:
                self.text='Off' if self.state == 'normal' else 'On'

''')


class MainD(Widget):

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


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

    def build(self):
        return MainD()


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