【Python】KivyでDropDownを実装する方法 基礎編
こんにちは、にわこまです！
今回はkivyでドロップダウンを実装する方法を紹介します。単純なボタンに飽きて、ちょっと凝ったボタンを作成してい方向けです。
スポンサードサーチ
完成イメージ
今回作成するドロップダウンの完成イメージを以下に示します。
曜日と時間帯を単純なボタンで作成します。ボタンをクリックするとドロップダウンが展開します。
曜日をクリックすると、ドロップダウンが展開されMondayからSundayの7つの択がリストで表示されます。
任意の曜日をクリックすると、ドロップダウンが閉じ選択した曜日が表示されます。
時間帯をクリックすると、ドロップダウンが展開され09:00から16:00の7つの択がリストで表示されます。
任意の時間帯をクリックすると、ドロップダウンが閉じ選択した時間帯が表示されます。
DropDown
上記で示したドロップダウンを実現するためのファイル一覧を以下に示します。
current_directory
├ main.py # 実行ファイル
├ my_screen.kv # 画面のデザインファイル
└ my_screen.py # ドロップダウンの設定を記載しているファイル上記で示したmy_screen.pyファイルを以下に示します。
from kivy.uix.screenmanager import Screen
from kivy.uix.dropdown import DropDown
from kivy.uix.button import Button
# load kv files
from kivy.lang import Builder
Builder.load_file('./my_screen.kv')
class MyScreen(Screen):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.dow_list = ["Monday", "Tuseday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]
self.time_list = ["09:00", "10:00", "11:00", "13:00", "14:00", "15:00", "16:00",]
# create dropdown for btn_dow
self.dd_dow = DropDown()
for dow in self.dow_list:
btn = Button()
btn.size_hint_y = None
btn.height = 50
btn.text = dow
btn.bind(on_press=self.on_press_btn_for_dow)
self.dd_dow.add_widget(btn)
# create dropdown for btn_time
self.dd_time = DropDown()
for time in self.time_list:
btn = Button()
btn.size_hint_y = None
btn.height = 50
btn.text = time
btn.bind(on_press=self.on_press_btn_for_time)
self.dd_time.add_widget(btn)
self.ids.btn_dow.bind(on_press=self.on_press_btn_dow)
self.ids.btn_time.bind(on_press=self.on_press_btn_time)
def on_press_btn_dow(self, instance):
print("MyScreen: on_press_btn_dow")
self.dd_dow.open(instance)
def on_press_btn_time(self, instance):
print("MyScreen: on_press_btn_time")
self.dd_time.open(instance)
def on_press_btn_for_dow(self, instance):
print("MyScreen: on_press_btn_for_dow")
self.ids.btn_dow.text = instance.text
self.dd_dow.dismiss()
def on_press_btn_for_time(self, instance):
print("MyScreen: on_press_btn_for_time")
self.ids.btn_time.text = instance.text
self.dd_time.dismiss()
全てのソースコードはこちらからダウンロードできます。
解説
14行目と15行目はドロップダウンに表示する文字列をリストで定義しています。
18行目から25行目は曜日のドロップダウンを作成しています。
21行目はButtonオブジェクトの高さを比率で設定するプロパティであるsize_hint_yにNoneを代入しています。size_hint_yプロパティにNoneを設定しておかないと、heightプロパティに代入した値が適応されません。
22行目はButtonオブジェクトの高さを固定値で設定するプロパティであるheightに50を代入しています。
23行目はButtonオブジェクトに表示する文字列を設定しています。
24行目はButtonオブジェクトがクリックされた場合に実行する関数を設定しています。関数については後述します。
25行目は作成したButtonオブジェクトをDropDownオブジェクトに追加しています。
ここで作成したButtonオブジェクトはDropDownリストにより展開されるボタンです。もともと表示しているボタンのことではないです。
28行目から35行目は時間帯のドロップダウンを作成しています。
31行目はButtonオブジェクトの高さを比率で設定するプロパティであるsize_hint_yにNoneを代入しています。size_hint_yプロパティにNoneを設定しておかないと、heightプロパティに代入した値が適応されません。
32行目はButtonオブジェクトの高さを固定値で設定するプロパティであるheightに50を代入しています。
33行目はButtonオブジェクトに表示する文字列を設定しています。
34行目はButtonオブジェクトがクリックされた場合に実行する関数を設定しています。関数については後述します。
35行目は作成したButtonオブジェクトをDropDownオブジェクトに追加しています。
ここで作成したButtonオブジェクトはDropDownリストにより展開されるボタンです。もともと表示しているボタンのことではないです。
37行目と38行目はもともと表示されているボタンがクリックされた場合に実行する関数を設定しています。関数については後述します。
40行目から42行目は曜日ボタンがクリックされた場合に実行する関数を定義しています。
42行目は曜日のドロップダウンを展開しています。
44行目から46行目は時間帯ボタンがクリックされた場合に実行する関数を定義しています。
46行目は時間帯のドロップダウンを展開しています。
48行目から51行目は曜日のドロップダウンによって展開されたボタンがクリックされた場合に実行する関数を定義しています。
50行目は曜日ボタンに表示される文字列を更新しています。
51行目は曜日のドロップダウンによって展開したボタンを閉じています。
53行目から56行目は時間帯のドロップダウンによって展開されたボタンがクリックされた場合に実行する関数を定義しています。
55行目は時間帯ボタンに表示される文字列を更新しています。
56行目は時間帯のドロップダウンによって展開したボタンを閉じています。
スポンサードサーチ
動作確認
動作確認を実施します。
コードを保存し、コマンドプロンプトを開きます。コードを保存したフォルダまで移動し、以下のコマンドを実行します。
python main.py
以下の画面が表示されます。
曜日ボタンをクリックします。つまりMondayをクリックします。
曜日ドロップダウンが展開されます。
適当な曜日をクリックします。ここではFridayをクリックします。曜日ドロップダウンが閉じることを確認できます。
次に時間帯ボタンをクリックします。つまり09:00をクリックします。
時間帯ドロップダウンが展開されます。
適当な時間帯をクリックします。ここでは15:00をクリックします。時間帯ドロップダウンが閉じることを確認できます。
上記で選択した曜日と時間帯がボタンに表示されていることを確認できます。
まとめ
今回はkivyでドロップダウンを実装する方法を紹介しました。基本編ということで基本的な実装方法を紹介しました。
今回紹介した方法では展開するドロップダウンの要素が多すぎる場合、展開されないという問題があります。応用編ではその問題に対応します。
参考にした公式サイトを以下に示します。
最後までお読みいただきありがとうございます。
スポンサードサーチ
