TextInputについて
Kivyでテキスト入力をおこなうのに使用するkivy.uix.textinputは、Labelと同じように表示する文字のフォント、サイズ、色、書体、表示位置を指定することが可能です。また、入力する値の限定(数値のみ入力可能など)やヒントの表示をおこなうことができます。
今回は、kivy.uix.textinputについて設定を変更する方法を紹介します。
今回紹介する内容
・ テキストの表示位置を指定する
・ テキストにヒント表示を追加する
・ テキストを数字のみを入力可能にする
・ テキストに自作した入力フィルタを設定する
![](https://tannipat.blog/wp-content/uploads/2023/10/kit_text_textinput.webp)
kivy.uix.textinputの設定
テキストの表示位置を指定する
テキストの水平方向の表示位置は、プロパティhalignで指定します。
halignの値には、’auto'(デフォルトの値), ’left’, ‘center’, ‘right’があります。
※ 今回は、1行のテキストを使用するため、multiline: Falseを指定しています。
TextInput:
text:'テキスト1'
halign: 'right'
font_name: 'MPLUS1-Medium.ttf'
font_size: '20pt'
multiline: False
テキストにヒント表示を追加する
テキストのヒント表示をするには、ヒントをhint_textで指定します。また、hint_text_colorを指定することで、ヒントの色を指定することができます。
TextInput:
font_name: 'MPLUS1-Medium.ttf'
font_size: '20pt'
hint_text:'テキスト2'
hint_text_color: [0.0, 0.0, 1.0, 1.0]
multiline: False
テキストを数字のみを入力可能にする
TextInputへ入力可能な文字を制限するのには、プロパティinput_filterを使用します。input_filterの値には以下の3つを選択可能です。
’int’ : テキストには整数が入力可能。
’float’: テキストには小数を入力可能。
関数を指定: 次作の入力フィルタが設定可能(次で説明)
このため、テキストに数字のみを入力可能にするには、input_fileに ‘int’を指定します。
TextInput:
font_name: 'MPLUS1-Medium.ttf'
font_size: '20pt'
hint_text:'テキスト3:数値入力'
hint_text_color: [0.0, 1.0, 0.0, 1.0]
input_filter: 'int'
multiline: False
テキストに自作した入力フィルタを設定する
input_filerには自作したフィルタ(関数)を指定することが可能であり、その場合は「input_filter: root.(関数名)」と記入します。そして、pythonファイルに同じ関数名を付けた関数を作成すると、その関数に記入したルールでフィルタ処理がおこなわれます。
TextInput:
font_name: 'MPLUS1-Medium.ttf'
font_size: '20pt'
hint_text:'テキスト4:アルファベット入力'
hint_text_color: [0.0, 1.0, 0.0, 1.0]
input_filter: root.my_input_filter
multiline: False
def my_input_filter(self, string, bool):
out = re.match(r'[a-zA-Z0-9.!#$%&@]', string)
if out is None:
return ''
else:
return out.group()
サンプルプログラム
下記の2つのファイルを同じフォルダに保存して、プログラムを実行すると下図のような画面が表示されます。画面に表示されるテキストインプットには、以下のような内容を指定しています。
・1個目のテキストインプット: フォント指定、フォントサイズ指定、右寄り
・2個目のテキストインプット: フォント指定、フォントサイズ指定、ヒント内容、ヒントの色、
左寄り
・3個目のテキストインプット: フォント指定、フォントサイズ指定、数値のみ入力可能、
ヒント内容、ヒントの色、左寄り
・4個目のテキストインプット: フォント指定、フォントサイズ指定、自作の入力フィルタ、
ヒント内容、ヒントの色、左寄り
![](https://tannipat.blog/wp-content/uploads/2023/10/kit_text_textinput.webp)
#:kivy 2.0
<TextInputTestWidget>:
BoxLayout:
size: root.size
orientation: 'vertical'
spacing: 20
padding: 20
canvas.before:
Color:
rgba: 0.7, 0.7, 0.7, 1
Rectangle:
size: self.size
pos: self.pos
TextInput:
text:'テキスト1'
halign: 'right'
font_name: 'MPLUS1-Medium.ttf'
font_size: '20pt'
multiline: False
TextInput:
font_name: 'MPLUS1-Medium.ttf'
font_size: '20pt'
hint_text:'テキスト2'
hint_text_color: [0.0, 0.0, 1.0, 1.0]
multiline: False
TextInput:
font_name: 'MPLUS1-Medium.ttf'
font_size: '20pt'
hint_text:'テキスト3:数値入力'
hint_text_color: [0.0, 1.0, 0.0, 1.0]
input_filter: 'int'
multiline: False
TextInput:
font_name: 'MPLUS1-Medium.ttf'
font_size: '20pt'
hint_text:'テキスト4:アルファベット入力'
hint_text_color: [0.0, 1.0, 0.0, 1.0]
input_filter: root.my_input_filter
multiline: False
# -*- coding: utf-8 -*-
import os
import re
import kivy
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.config import Config
kivy.require('2.2.0')
# 画面サイズの指定
Config.set('graphics', 'width', '500')
Config.set('graphics', 'height', '340')
Builder.load_file(os.path.dirname(__file__) + "/interface.kv")
class TextInputTestWidget(Widget):
def __init__(self, **kwargs):
super(TextInputTestWidget, self).__init__(**kwargs)
def my_input_filter(self, string, bool):
out = re.match(r'[a-zA-Z0-9.!#$%&@]', string)
if out is None:
return ''
else:
return out.group()
class TextInputTestApp(App):
def __init__(self, **kwargs):
super(TextInputTestApp, self).__init__(**kwargs)
self.title = 'TextInput Test'
def build(self):
return TextInputTestWidget()
if __name__ == '__main__':
app = TextInputTestApp()
app.run()