bitWalk's: テキストインプット (TextInput) 〜 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

トップへ

TextInput (Python)

テキストインプットは、編集可能なプレーンテキスト用のボックスを提供します。

kivy_textinput.py

	import japanize_kivy
	from kivy.app import App
	from kivy.core.window import Window
	from kivy.uix.boxlayout import BoxLayout
	from kivy.uix.textinput import TextInput

	Window.size = (200, 200)


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

	def init_ui(self):
	txt_a = TextInput(size_hint=(1, .8))
	txt_a.bind(
	focus=self.on_focus,
	text=self.on_text,
	)
	self.add_widget(txt_a)
	txt_b = TextInput(multiline=False, size_hint=(1, .2))
	txt_b.bind(
	focus=self.on_focus,
	on_text_validate=self.on_enter,
	text=self.on_text,
	)
	self.add_widget(txt_b)

	def on_focus(self, instance, value):
	if value:
	print('%s がフォーカスされました。' % instance)
	else:
	print('%s のフォーカスが外れました。' % instance)

	def on_enter(self, instance):
	print('%s で改行キーが押されました。' % instance)

	def on_text(self, instance, value):
	print('ウィジェット %s の入力:\n%s' % (instance, value))


	class ExampleApp(App):
	def build(self):
	self.title = 'TextInputs'
	return KivyTextInput()


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

view raw kivy_textinput.py hosted with ❤ by GitHub

サンプルは、複数行を入力（デフォルト）するものと入力が一行の場合の２つのテキストインプットを表示しています。

kivy_textinput.py の実行例

kivy_textinput.py の出力例

ウィジェット <kivy.uix.textinput.TextInput object at 0x7f59336c05f0> の入力:
テキストインプットは、編集可能なプレーンテキスト用のボックスを提供します。
<kivy.uix.textinput.TextInput object at 0x7f59336c05f0> のフォーカスが外れました。
<kivy.uix.textinput.TextInput object at 0x7f59336e6110> がフォーカスされました。
ウィジェット <kivy.uix.textinput.TextInput object at 0x7f59336e6110> の入力:
テキストインプットは、編集可能なプレーンテキスト用のボックスを提供します。

トップへ

TextInput (Python + Kv)

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

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


	class KivyTextInput(BoxLayout):
	def on_focus(self, instance, value):
	if value:
	print('%s がフォーカスされました。' % instance)
	else:
	print('%s のフォーカスが外れました。' % instance)

	def on_enter(self, instance):
	print('%s で改行キーが押されました。' % instance)

	def on_text(self, instance, value):
	print('ウィジェット %s の入力:\n%s' % (instance, value))


	class ExampleApp(App):
	def build(self):
	self.title = 'TextInputs'
	return KivyTextInput()


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

view raw kivy_textinput_1.py hosted with ❤ by GitHub

kivy_textinput_1.kv

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

	TextInput:
	id: txt_a
	size_hint: (1, .8)
	on_focus: root.on_focus(self, self.focus)
	on_text: root.on_text(self, self.text)

	TextInput:
	id: txt_b
	multiline: False
	size_hint: (1, .2)
	on_text_validate: root.on_enter(self)
	on_focus: root.on_focus(self, self.focus)
	on_text: root.on_text(self, self.text)

view raw kivy_textinput_1.kv hosted with ❤ by GitHub

kivy_textinput_1.py の実行例

ショートカット

テキストインプットでは、下記のショートカットキーが利用できます。

ショートカット	説　　明
`Left`	カーソルを左に移動。
`Right`	カーソルを右に移動。
`Up`	カーソルを上に移動。
`Down`	カーソルを下に移動。
`Home`	カーソルを行の先頭に移動させる。
`End`	カーソルを行の末尾に移動させる。
`PageUp`	カーソルを三行前の先頭に移動させる。
`PageDown`	カーソルを三行後の先頭に移動させる。
`Backspace`	カーソルの直前にある文字を一文字削除する。
`Del`	カーソルの直後にある文字を一文字削除する。
`Shift` + <dir>	文字列選択の開始。<dir> は選択を始める方向で `Up`, `Down`, `Left` あるいは `Right`。
`Control` + `c`	選択範囲をコピーする。
`Control` + `x`	選択範囲をカットする。
`Control` + `v`	クリップボードの内容をペースト（貼り付け）する。
`Control` + `a`	Select all the contentすべての内容を選択する。
`Control` + `z`	undo（アンドゥ）、直前の操作を取り消して元の状態に戻す。
`Control` + `r`	redo（リドゥ）、直前の操作を取り消す（アンドゥ）機能で一旦取り消した操作をやり直す。