[Kivy] Labelの設定

Labelについて

　Kivyでのラベル表示に使用するkivy.uix.labelは、表示する文字のフォント、サイズ、色、書体、表示位置を指定することができます。また、日本語対応のフォントを指定することにより、Kivyのプログラム上に、日本語を表示することが可能になり、ユーザーにとってよりわかり易いプログラムを作成することができるようになります。今回は、kivy.uix.labelに表示するテキストの表示位置や文字の指定方法について紹介します。

今回紹介する内容
kivy.uix.labelについて以下の内容を紹介します。
　・　文字の表示位置を指定する
　・　フォント名とフォントサイズを指定する
　・　文字の色や書体を変更する
　・　文字の色や書体を変更する（マークアップの使用）

kivy.uix.labelの設定

文字の表示位置を指定する

　フォントの表示位置は、水平方向をhalign、垂直方向をvalignで指定します。
　halignの値には、’auto'(デフォルトの値), 　’left’,　 ‘center’,　 ‘right’,　 ‘justify’があります。
　また、valignの値には、’bottom'(デフォルトの値), 　’middle’,　’center’,　 ‘top’があります。

　表示位置の指定を有効にするためには、text_sizeによりテキストを配置する境界ボックス（この場合Label）のサイズを指定する必要があります。

        Label:
            text:'ラベル１'
            text_size: self.size
            halign: 'right'
            valign: 'bottom'
            font_name: 'MPLUS1-Medium.ttf'
            font_size: '20pt'

フォント名とサイズを指定する。

　kivyでWidgetへのテキストの表示に使用するフォントはfont_name、フォントのサイズはfont_sizeで指定します。

　下のように記入すると、Labelのフォントは、kvファイルと同じフォルダに保存した’MPLUS1-Medium.ttf’というファイル名のフォントになります。

        Label:
            text:'ラベル１'
            text_size: self.size
            halign: 'right'
            valign: 'bottom'
            font_name: 'MPLUS1-Medium.ttf'
            font_size: '20pt'

文字の色や書体を変更する（マークアップの使用）

　Kivyではマークアップを使用することができ、フォントの色や書体などを変更することが可能です。変更方法については以下のページにまとめられています。

Text Markup

# フォントの色を変更する
        Label:
            text: '[color=ffff33]ラベル[/color][color=ff33ff]3[/color]'
            markup: True
            font_name: 'MPLUS1-Medium.ttf'
            font_size: '20pt'

# フォントの書体を変更する
        Label:
            text: '[i]label[/i] [b]4[/b]'
            markup: True
            font_size: '20pt'

サンプルプログラム

　下記の２つのファイルを同じフォルダに保存して、プログラムを実行すると下図のような画面が表示されます。画面に表示されるラベルには、以下のような内容を指定しています。
　・ラベル１：　フォント指定、フォントサイズ指定、右寄り、下寄り
　・ラベル２：　フォント指定、フォントサイズ指定、左寄り、上寄り
　・ラベル３：　フォント指定、フォントサイズ指定、フォント色指定
　・ラベル４：　フォントサイズ指定、フォント書体指定

#:kivy 2.0


<JapanFontTestWidget>:
    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

        Label:
            text:'ラベル１'
            text_size: self.size
            halign: 'right'
            valign: 'bottom'
            font_name: 'MPLUS1-Medium.ttf'
            font_size: '20pt'

        Label:
            text:'ラベル２'
            text_size: self.size
            halign: 'left'
            valing: 'top'
            font_name: 'MPLUS1-Medium.ttf'
            font_size: '20pt'

        Label:
            text: '[color=ffff33]ラベル[/color][color=ff33ff]3[/color]'
            font_size: '20pt'
            markup: True
            font_name: 'MPLUS1-Medium.ttf'

        Label:
            text: '[i]label[/i] [b]4[/b]'
            font_size: '20pt'
            markup: True

# -*- coding: utf-8 -*-

import os
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 JapanFontTestWidget(Widget):

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


class JapanFontTestApp(App):
    def __init__(self, **kwargs):
        super(JapanFontTestApp, self).__init__(**kwargs)
        self.title = 'Label Test'

    def build(self):
        return JapanFontTestWidget()


if __name__ == '__main__':
    app = JapanFontTestApp()
    app.run()