bitWalk's: スライダー (Slider) 〜 Kivy

2022-07-26

スライダー (Slider) 〜 Kivy

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

Wikipedia より引用、翻訳、編集

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

今回はスライダーのサンプルを紹介します。

Python のコードのみのサンプルと、UI 部分を分離して Kv 言語で記述した同じ動作をするサンプルを併せて紹介しています。

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

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

トップへ

Slider (Python)

スライダーは、スクロールバーのようなウィジェットです。水平方向と垂直方向の配置、最小値／最大値、デフォルト値の設定をサポートしています。

kivy_slider.py

	import japanize_kivy
	from kivy.app import App
	from kivy.core.window import Window
	from kivy.uix.boxlayout import BoxLayout
	from kivy.uix.label import Label
	from kivy.uix.slider import Slider

	Window.size = (200, 200)


	class KivySlider(BoxLayout):
	lbl: Label = None

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

	def init_ui(self):
	sld = Slider(min=0, max=100, step=1, value=0)
	sld.bind(on_touch_down=self.on_slider_move)
	sld.bind(on_touch_move=self.on_slider_move)
	sld.bind(on_touch_up=self.on_slider_move)
	self.add_widget(sld)
	self.lbl = Label(text=str(sld.value))
	self.add_widget(self.lbl)

	def on_slider_move(self, instance, value):
	self.lbl.text = str(instance.value)
	print('スライダーの値は %.2f です。' % instance.value)


	class ExampleApp(App):
	def build(self):
	self.title = 'Slider'
	return KivySlider()


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

view raw kivy_slider.py hosted with ❤ by GitHub

kivy_slider.py の実行例

[INFO   ] [Window      ] virtual keyboard not allowed, single mode, not docked
[INFO   ] [Base        ] Start application main loop
[INFO   ] [GL          ] NPOT texture support is available
スライダーの値は 0.00 です。
スライダーの値は 38.00 です。
スライダーの値は 38.00 です。
スライダーの値は 38.00 です。
スライダーの値は 38.00 です。
スライダーの値は 39.00 です。
スライダーの値は 39.00 です。
スライダーの値は 40.00 です。
スライダーの値は 40.00 です。
スライダーの値は 41.00 です。
スライダーの値は 41.00 です。
スライダーの値は 42.00 です。
スライダーの値は 42.00 です。
スライダーの値は 43.00 です。
スライダーの値は 43.00 です。

トップへ

Slider (Python + Kv)

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

kivy_slider_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_slider_1.kv')
	Window.size = (200, 200)


	class KivySlider(BoxLayout):
	def on_slider_move(self, instance, value):
	print('スライダーの値は %.2f です。' % instance.value)


	class ExampleApp(App):
	def build(self):
	self.title = 'Slider'
	return KivySlider()


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

view raw kivy_slider_1.py hosted with ❤ by GitHub

kivy_slider_1.kv

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

	Slider:
	id: sld
	min: 0
	max: 100
	step: 1
	value: 0
	on_touch_down: root.on_slider_move(self, self.value)
	on_touch_move: root.on_slider_move(self, self.value)
	on_touch_up: root.on_slider_move(self, self.value)

	Label:
	id: lbl
	text: str(sld.value)