【Python】KivyでToggleButtonを実装する方法 応用編
こんにちは、にわこまです！
今回はkivyでトグルボタンを実装する方法を紹介します。単純なボタンに飽きて、ちょっと凝ったボタンを作成したい方におすすめです。
今回は応用編ということで、トグルボタンがクリックされた場合に背景の図形を動かすアニメーションを付与します。
スポンサードサーチ
完成イメージ
今回作成するトグルボタンの完成イメージを以下に示します。
上部にラベルを作成します。ラベルの下にトグルボタンを3つ作成します。
ラベルは選択中のトグルボタンの文字列が表示される様にします。
またラベルには初期値の文字列を表示します。これに伴いトグルボタンを選択されている状態にします。
FirstトグルボタンをクリックするとラベルにFirstという文字列が表示されます。もともと表示されていた文字列は削除されます。
ThirdトグルボタンをクリックするとラベルにThirdという文字列が表示されます。もともと表示されていた文字列は削除されます。
SecondトグルボタンをクリックするとラベルにSecondという文字列が表示されます。もともと表示されていた文字列は削除されます。
上記は基礎編で作成したトグルボタンと全く同じです。
下記は応用編で新たに作成したトグルボタンです。
トグルボタンをクリックすると、もともと選択されていたトグルボタンの背景がクリックしたトグルボタンに移動します。
また、移動中に他のトグルボタンをクリックすると背景が新たにクリックされたトグルボタンに移動します
ToggleButton
上記で示したトグルボタンを実現するためのファイル一覧を以下に示します。
current_directory
├ main.py # 実行ファイル
├ my_screen.kv # 画面のデザインファイル
└ my_screen.py # トグルボタンの設定を記載しているファイル上記で示したmy_screen.pyファイルを以下に示します。
from kivy.animation import Animation
from kivy.graphics import Color
from kivy.graphics import RoundedRectangle
from kivy.uix.screenmanager import Screen
# load kv files
from kivy.lang import Builder
Builder.load_file('./my_screen.kv')
class MyScreen(Screen):
def __init__(self, **kwargs):
super().__init__(**kwargs)
init_state = {"number": "Second"}
# set selected text
self.ids.selected.text = self.ids[init_state["number"]].text
self.ids[self.ids.selected.text].state = "down"
# set background RoundedRectangle
with self.ids.box_for_toggle.canvas.before:
# cornflowerblue
Color(rgb=(0.39215686274509803, 0.5843137254901961, 0.9294117647058824))
self.bgrr = RoundedRectangle(
pos=self.ids.box_for_toggle.pos,
size=[self.ids.box_for_toggle.width / 3, self.ids.box_for_toggle.height]
)
self.ids[self.ids.selected.text].bind(pos=self.update_bgrr)
self.ids.box_for_toggle.bind(size=self.update_bgrr)
self.ids.First.bind(on_press=self.on_press_toggle_button_number)
self.ids.Second.bind(on_press=self.on_press_toggle_button_number)
self.ids.Third.bind(on_press=self.on_press_toggle_button_number)
def on_press_toggle_button_number(self, instance):
print("MyScreen: on_press_toggle_button_number")
self.ids.selected.text = instance.text
self.animation_bgrr(instance)
def update_bgrr(self, *args):
print("MyScreen: update_bgrr")
self.bgrr.pos = self.ids[self.ids.selected.text].pos
self.bgrr.size = [self.ids.box_for_toggle.width / 3, self.ids.box_for_toggle.height]
def animation_bgrr(self, instance):
print("MyScreen: move_rectangle")
animation = Animation(pos=instance.pos)
animation.start(self.bgrr)
全てのソースコードはこちらからダウンロードできます。
解説
基礎編で説明した処理は省略します。
基礎編はこちら。
22行目から28行目は、トグルボタンの背景に表示する図形を定義しています。
22行目は、トグルボタンを子要素に持つBoxLayoutのcanvas.beforeというリソースにアクセスしています。
24行目は、後述するRoundedRectangleの色を設定しています。具体的にはコーンフラワーブルーを設定しています。
25行目から28行目は、角が丸いRoundedRectangleを定義しています。※bgrrとはBack Ground Rounded Rectangleの頭文字です。
26行目は、図形の初期表示位置を設定しています。
27行目は、図形のサイズをトグルボタンと同じサイズになるように設定しています。横幅は1/3になるように設定しています。
29行目はトグルボタンの表示位置が変更された場合、後述するupdate_bgrrという関数を実行するように設定しています。
30行目はトグルボタンを子要素に持つBoxLayoutのサイズが変更された場合、後述するupdate_bgrrという関数を実行するように設定しています。
39行目は、後述するanimation_bgrrという関数を実行するように設定しています。
41行目から44行目は、背景の図形の表示位置とサイズを更新しています。
43行目は、表示位置を現在選択されているトグルボタンの表示位置に更新しています。
44行目は、サイズをトグルボタンと同じサイズになるように更新しています。
46行目から49行目は、背景の図形のアニメーションを定義しています。
48行目は、アニメーションのオブジェクトを生成しています。移動後の表示位置を引数に設定しています。
49行目は、上記で定義したアニメーションを開始しています。
スポンサードサーチ
動作確認
動作確認を実施します。
コードを保存し、コマンドプロンプトを開きます。コードを保存したフォルダまで移動し、以下のコマンドを実行します。
python main.py
まとめ
今回はkivyでトグルボタンを実装する方法を紹介しました。
応用編ということで、トグルボタンクリック時に背景の図形が動くようにアニメーションを付与しました。
参考にした公式サイトを以下に示します。
最後までお読みいただきありがとうございます。
スポンサードサーチ
