[Kivy] Buttonを使用してkivy.uix.dropdownを作成

Buttonを使用したkivy.uix.dropdown

　kivy.uix.dropdown（以下、DropDownという）は、Kivy.uix.spinner（以下、Spinnerという）と同じようにドロップダウンリストから項目を選択しるWidgetですが、Spinnerが値を選択肢に指定するのに対して、DropDownは、Widgetを選択肢に指定することができます。

　今回は、kivy.uix.button（以下、Buttonという）を選択肢にしたDropDownを作成する方法を紹介します。

メインボタンのみの状態

選択肢ボタンを表示した状態

今回紹介する内容
　- Buttonを選択肢に使用したDropDownを作成する。

Buttonを使用してDropDownの作成

　選択肢にButtonを使用したDropDownを作成するのには、以下の作業を行います。

DorpDownのメイン部分の作成
DropDownの定義と関数の設定
DropDownへの選択肢(Button)の追加

DorpDownのメイン部分の作成

　DropDownのメイン部分は画面に載せる必要があるので、以下のようにkv languageに記入します。


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

        Button:
            id: mainbutton
            text: 'Select Button'
            size_hint: 1, 0.2

DropDownの定義と関数の設定

　DropDownは、メインボタン(id:mainbutton)に紐付けるので、Pythonファイルで以下のように定義します。

        self.dropdown = DropDown()

　メインボタンが押されるとDropDownが開くようにするために、メインボタンのon_release()にself.dropdown.open()を紐付けます。
　また、DropDownの選択肢(Button)が選択されると、メインボタンのテキストを選択肢のテキストに変更するために、DropDownのon_select()に対して、ラムダ式でメインボタンのテキストのプロパティをx（選択肢のテキスト：次のDropDownの項目追加で指定することで送られてくる）に変更するように指定しています。

    self.ids.mainbutton.bind(on_release=self.dropdown.open)
    self.dropdown.bind(
        on_select=lambda instance,
        x: setattr(self.ids.mainbutton, 'text', x))

DropDownの項目追加

　DropDownの選択肢のButtonはDropDownに紐付けるので、以下のような手順でPythonファイルに記入します。
①Buttonを定義（テキストとサイズを指定）する。
②on_release()に、Buttonを選択した場合の処理を記入する。
　ラムダ式でButtonを押した場合にDropDownのselectにbtn.textを
　引数にして実行するように指定しています。
③ButtonをDropDownに追加する。

選択肢は、Pythonファイルに記入した順に追加されます。

        btn = Button(text='button1', size_hint_y=None, height=44)
        btn.bind(on_release=lambda btn: self.dropdown.select(btn.text))
        self.dropdown.add_widget(btn)
        btn = Button(text='button2', size_hint_y=None, height=44)
        btn.bind(on_release=lambda btn: self.dropdown.select(btn.text))
        self.dropdown.add_widget(btn)
        btn = Button(text='button3', size_hint_y=None, height=44)
        btn.bind(on_release=lambda btn: self.dropdown.select(btn.text))
        self.dropdown.add_widget(btn)

サンプルプログラム

　サンプルプログラムを実行すると下部に”Button ?”(DropDownのメインボタン)のある画面が表示されます。”Button ?”をクリックすると、DropDownの選択肢が表示され、選択肢のうちの１つをクリックすると、選択肢が閉じて、クリックした選択肢のテキストがメインボタンに表示されます

# -*- 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.button import Button
from kivy.uix.dropdown import DropDown

kivy.require('2.2.0')

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


Builder.load_string('''

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

        Button:
            id: mainbutton
            text: 'Select Button'
            size_hint: 1, 0.2

''')


class MainDisp(Widget):

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

        self.dropdown = DropDown()

        btn = Button(text='button1', size_hint_y=None, height=44)
        btn.bind(on_release=lambda btn: self.dropdown.select(btn.text))
        self.dropdown.add_widget(btn)
        btn = Button(text='button2', size_hint_y=None, height=44)
        btn.bind(on_release=lambda btn: self.dropdown.select(btn.text))
        self.dropdown.add_widget(btn)
        btn = Button(text='button3', size_hint_y=None, height=44)
        btn.bind(on_release=lambda btn: self.dropdown.select(btn.text))
        self.dropdown.add_widget(btn)

        self.ids.mainbutton.bind(on_release=self.dropdown.open)
        self.dropdown.bind(
            on_select=lambda instance,
            x: setattr(self.ids.mainbutton, 'text', x))


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

    def build(self):
        return MainDisp()


if __name__ == '__main__':
    app = MainDispApp()
    app.run()