[Kivy] TextInputの設定 一行のテキストについて

TextInputについて

 Kivyでテキスト入力をおこなうのに使用するkivy.uix.textinputは、Labelと同じように表示する文字のフォント、サイズ、色、書体、表示位置を指定することが可能です。また、入力する値の限定(数値のみ入力可能など)やヒントの表示をおこなうことができます。 

 今回は、kivy.uix.textinputについて設定を変更する方法を紹介します。

今回紹介する内容
 ・ テキストの表示位置を指定する
 ・ テキストにヒント表示を追加する
 ・ テキストを数字のみを入力可能にする
 ・ テキストに自作した入力フィルタを設定する

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個目のテキストインプット: フォント指定、フォントサイズ指定、自作の入力フィルタ、
                 ヒント内容、ヒントの色、左寄り

#: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()
タイトルとURLをコピーしました