[Kivy] TextInputの設定　複数行のテキスト

2023.10.13

目標

　Textinputは、maltilineにFalseを指定しなければ複数行の文字を入力することが可能です。複数行のテキストでは行間やマウスのホイールによるスクロール量を指定することができ、各プログラムに適した動作を指定することが可能です。

　今回は、複数行のテキストで使用する設定やテキストを読み取り専用にする方法などを紹介します。

今回紹介する内容
　・ テキスト周りの隙間を指定する
　・ テキストの行間を指定する
　・ マウスホイールによるテキスト
のスクロール量を指定する
　・ テキストを読み込み専用にする

[Kivy] TextInputの設定　一行のテキストについて
Kivyでのテキスト入力に使用するkivy.uix.textinputはlabelと同じように、表示する文字のフォント、サイズ、色、書体、表示位置を指定することが可能です。また、入力する値の限定（数値のみ入力可能など）やヒントの表示をおこなうことができます。今回は、kivy.uix.textinputについて設定を変更する方法を紹介します。
tannipat.blog
2023.10.11

kivy.uix.textinputの設定②

テキスト周りの隙間を指定する

　テキスト周りの隙間はpaddingによって指定します。paddingの値は、四方の隙間をそれぞれ指定する場合は[左側の隙間、上側の隙間、右側の隙間、下側の隙間]の形で指定します。その他にも水平方向と垂直方向で隙間を指定する場合は[水平方向の隙間、垂直方向の隙間]の形で指定し、四法の隙間をまとめて指定する場合は[隙間]の形で指定します。

        TextInput:
            text:'テキスト１：multiline\nテキスト１：multiline\nテキスト１：multiline\nテキスト１：multiline\nテキスト１：multiline'
            font_name: 'MPLUS1-Medium.ttf'
            font_size: '20pt'
            line_spacing: 10
            lines_to_scroll: 2
            padding: [20]

テキストの行間を指定する

　TextInputの行間は、line_spacingで指定します。(line_spacingのデフォルト値は0です)

        TextInput:
            text:'テキスト１：multiline\nテキスト１：multiline\nテキスト１：multiline\nテキスト１：multiline\nテキスト１：multiline'
            font_name: 'MPLUS1-Medium.ttf'
            font_size: '20pt'
            line_spacing: 10
            line_to_scroll: 2

マウスホイールによるテキストのスクロール量を指定する

　TextInputでのマウスホイールによるスクロール量は、lines_to_scrollにより指定します。(lines_to_scrollのデフォルト値は3です)

        TextInput:
            text:'テキスト１：multiline\nテキスト１：multiline\nテキスト１：multiline\nテキスト１：multiline\nテキスト１：multiline'
            font_name: 'MPLUS1-Medium.ttf'
            font_size: '20pt'
            line_spacing: 10
            lines_to_scroll: 2

テキストを読み込み専用にする

　TextInputを読み込み専用にするには、readonlyにTrueを指定します。

        TextInput:
            text:'テキスト２：multiline\nテキスト２：multiline\nテキスト２：multiline\nテキスト２：multiline\nテキスト２：multiline'
            font_name: 'MPLUS1-Medium.ttf'
            font_size: '20pt'
            readonly: True

サンプルプログラム

　下記の２つのファイルを同じフォルダに保存して、プログラムを実行すると下図のような画面が表示されます。画面に表示される２つのTextInputには、以下のような内容を指定しています。
　上側のTextInput：テキスト周りの隙間変更、テキスト行間の変更、スクロール量変更
　下側のTextInput：読み込み専用

#:kivy 2.0


<TextInputTestWidget>:
    BoxLayout:
        size: root.size
        orientation: 'vertical'
        padding: 20
        canvas.before:
            Color:
                rgba: 0.7, 0.7, 0.7, 1
            Rectangle:
                size: self.size
                pos: self.pos

        TextInput:
            text:'テキスト１：multiline\nテキスト１：multiline\nテキスト１：multiline\nテキスト１：multiline\nテキスト１：multiline'
            font_name: 'MPLUS1-Medium.ttf'
            font_size: '20pt'
            line_spacing: 10
            lines_to_scroll: 2
            padding: [20]

        TextInput:
            text:'テキスト２：multiline\nテキスト２：multiline\nテキスト２：multiline\nテキスト２：multiline\nテキスト２：multiline'
            font_name: 'MPLUS1-Medium.ttf'
            font_size: '20pt'
            readonly: True

# -*- 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', '400')

Builder.load_file(os.path.dirname(__file__) + "/interface.kv")


class TextInputTestWidget(Widget):

    def __init__(self, **kwargs):
        super(TextInputTestWidget, self).__init__(**kwargs)


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をコピーしました