bitWalk's: トグルボタン (ToggleButton) 〜 Kivy

Kivy は、NUI (Natural User Interface) を持つモバイルアプリやその他のマルチタッチアプリケーションソフトウェアを開発するためのフリーでオープンソースの Python フレームワークです。MIT ライセンスのもとで配布され、Android, iOS, Linux, macOS そして Windows で動作させることができます。

Wikipedia より引用、翻訳、編集

使ったことのなかった Python の GUI ライブラリ（フレームワーク）、Kivy に興味を持ったので^[1]、ひととおりウィジェットのサンプルを作ってみようとしています。サンプルを作っていくにあたって、どんなスタイルでコーディングするか、テンプレートみたいなものを固めていこうとあれこれ試し始めました。

今回はトグルボタンのサンプルを紹介します。Python のコードのみと Python と、同じ動作をする UI 部分を分離して Kv 言語で記述したファイルのサンプルを併せて紹介しています。

下記の環境で動作確認をしています。

	Fedora Linux 36	x86_64
	python3	3.10.5-2.fc36.x86_64
	Kivy	2.1.0

トップへ

ToggleButton (Python)

トグルボタンは、チェックボックスのように動作します。タッチまたはクリックすると、状態が 'normal' と 'down' の間で切り替わります。押されている間だけ 'down' になるボタンとは対照的です。

kivy_togglebutton.py

	import japanize_kivy
	from kivy.app import App
	from kivy.core.window import Window
	from kivy.uix.boxlayout import BoxLayout
	from kivy.uix.togglebutton import ToggleButton

	Window.size = (200, 200)


	class KivyToggleButton(BoxLayout):
	def __init__(self):
	super().__init__()
	self.orientation = 'vertical'
	self.init_ui()

	def init_ui(self):
	tgb_a = ToggleButton(text='トグルボタンＡ')
	tgb_a.bind(on_press=self.on_togglebutton_pressed)
	self.add_widget(tgb_a)
	tgb_b = ToggleButton(text='トグルボタンＢ')
	tgb_b.bind(on_press=self.on_togglebutton_pressed)
	self.add_widget(tgb_b)
	tgb_c = ToggleButton(text='トグルボタンＣ')
	tgb_c.bind(on_press=self.on_togglebutton_pressed)
	self.add_widget(tgb_c)

	def on_togglebutton_pressed(self, instance):
	print('%s がクリックされて %s になりました。' % (instance.text, instance.state))


	class ExampleApp(App):
	def build(self):
	self.title = 'ToggleButtons'
	return KivyToggleButton()


	if __name__ == '__main__':
	ExampleApp().run()

view raw kivy_togglebutton.py hosted with ❤ by GitHub

kivy_togglebutton.py の実行例

kivy_togglebutton.py の出力例

[INFO   ] [Window      ] virtual keyboard not allowed, single mode, not docked
[INFO   ] [Base        ] Start application main loop
[INFO   ] [GL          ] NPOT texture support is available
トグルボタンＡ がクリックされて down になりました。
トグルボタンＢ がクリックされて down になりました。

トップへ

ToggleButton (Python + Kv)

指定したファイルを読み込むようにしたいので、ここでは Builder.load_file() を使って読み込むようにしています。

kivy_togglebutton_1.py

	import japanize_kivy
	from kivy.app import App
	from kivy.core.window import Window
	from kivy.lang import Builder
	from kivy.uix.boxlayout import BoxLayout

	Builder.load_file('kivy_togglebutton_1.kv')
	Window.size = (200, 200)


	class KivyToggleButton(BoxLayout):
	def on_togglebutton_pressed(self, instance):
	print('%s がクリックされて %s になりました。' % (instance.text, instance.state))


	class ExampleApp(App):
	def build(self):
	self.title = 'ToggleButtons'
	return KivyToggleButton()


	if __name__ == '__main__':
	ExampleApp().run()

view raw kivy_togglebutton_1.py hosted with ❤ by GitHub

kivy_togglebutton_1.kv

	<KivyToggleButton>:
	orientation: 'vertical'
	size: root.size

	ToggleButton:
	id: tgb_a
	text: "トグルボタンＡ"
	on_press: root.on_togglebutton_pressed(self)

	ToggleButton:
	id: tgb_b
	text: "トグルボタンＢ"
	on_press: root.on_togglebutton_pressed(self)

	ToggleButton:
	id: tgb_c
	text: "トグルボタンＣ"
	on_press: root.on_togglebutton_pressed(self)

view raw kivy_togglebutton_1.kv hosted with ❤ by GitHub

kivy_togglebutton_1.py の実行例

ToggleButton グループ化 (Python)

トグルボタンはグループ化してラジオボタンすなわち、グループ内のひとつのボタンだけを 'down' の状態にすることができます。

kivy_togglebutton_group.py

	import japanize_kivy
	from kivy.app import App
	from kivy.core.window import Window
	from kivy.uix.boxlayout import BoxLayout
	from kivy.uix.togglebutton import ToggleButton

	Window.size = (200, 200)


	class KivyToggleButton(BoxLayout):
	def __init__(self):
	super().__init__()
	self.orientation = 'vertical'
	self.init_ui()

	def init_ui(self):
	tgb_a = ToggleButton(text='トグルボタンＡ', group='tgb')
	tgb_a.bind(on_press=self.on_togglebutton_pressed)
	self.add_widget(tgb_a)
	tgb_b = ToggleButton(text='トグルボタンＢ', group='tgb')
	tgb_b.bind(on_press=self.on_togglebutton_pressed)
	self.add_widget(tgb_b)
	tgb_c = ToggleButton(text='トグルボタンＣ', group='tgb')
	tgb_c.bind(on_press=self.on_togglebutton_pressed)
	self.add_widget(tgb_c)

	def on_togglebutton_pressed(self, instance):
	print('%s がクリックされて %s になりました。' % (instance.text, instance.state))


	class ExampleApp(App):
	def build(self):
	self.title = 'ToggleButtons (group)'
	return KivyToggleButton()


	if __name__ == '__main__':
	ExampleApp().run()

view raw kivy_togglebutton_group.py hosted with ❤ by GitHub

kivy_togglebutton_group.py の実行例

kivy_togglebutton_group.py の出力例

[INFO   ] [Window      ] virtual keyboard not allowed, single mode, not docked
[INFO   ] [Base        ] Start application main loop
[INFO   ] [GL          ] NPOT texture support is available
トグルボタンＡ がクリックされて down になりました。
トグルボタンＢ がクリックされて down になりました。

トップへ

ToggleButton グループ化 (Python + Kv)

指定したファイルを読み込むようにしたいので、ここでは Builder.load_file() を使って読み込むようにしています。

kivy_togglebutton_group_1.py

	import japanize_kivy
	from kivy.app import App
	from kivy.core.window import Window
	from kivy.lang import Builder
	from kivy.uix.boxlayout import BoxLayout

	Builder.load_file('kivy_togglebutton_group_1.kv')
	Window.size = (200, 200)


	class KivyToggleButton(BoxLayout):
	def on_togglebutton_pressed(self, instance):
	print('%s がクリックされて %s になりました。' % (instance.text, instance.state))


	class ExampleApp(App):
	def build(self):
	self.title = 'ToggleButtons (group)'
	return KivyToggleButton()


	if __name__ == '__main__':
	ExampleApp().run()

view raw kivy_togglebutton_group_1.py hosted with ❤ by GitHub

kivy_togglebutton_group_1.kv

	<KivyToggleButton>:
	orientation: 'vertical'
	size: root.size

	ToggleButton:
	id: tgb_a
	text: "トグルボタンＡ"
	group: "tgb"
	on_press: root.on_togglebutton_pressed(self)

	ToggleButton:
	id: tgb_b
	text: "トグルボタンＢ"
	group: "tgb"
	on_press: root.on_togglebutton_pressed(self)

	ToggleButton:
	id: tgb_c
	text: "トグルボタンＣ"
	group: "tgb"
	on_press: root.on_togglebutton_pressed(self)