kivyMDチュートリアル其の弍什 Components - Label篇

みなさん、おはこんばんは。いかが、お過ごしでしょうか。

暑くなり少しジメジメ感が漂ってきて、夏の到来が感じてくるようになりましたね。
避暑したい気持ちがマンマンです。

今週はというと、またGitHubが障害を起こしていたようですね。そのときは、触れては
いなかったのですが今週末だとバッドエンドでした(そこまでではない)。でも、安心して
ください(なにが)。GitHubがなくならない以上は、KivyMDのお時間はなくなりません(
当たり前)。サービスエンドしたときは、GitLabに移行しようかな(しらないよ)。

とまぁ、グダグダ続けてきたわけなのですが、なんとComponentsの半分を差し掛かるよう
になりました！これも皆さんのおかげです。なんか早いですね、1年くらい掛かるかなぁと
思っていたのに。GW特別企画頑張ったからかな。でもまぁ、気を緩まず精進していこうと
思います。お付き合い頂ければ本望です。

とまぁ、前置きが長くなってきたのでさっそく今週も元気にやっていきましょう！
今日は、とても大事なLabel篇となります。

Label

はい、今日はめずらしく「See also」パネルにあるリンクがありません。
最初に概要が記載されています。

The MDLabel widget is for rendering text.

で、謎に今日のお題目でもある以下のコンポーネントらが列挙されています。

● MDLabel
● MDIcon

図々しくもMDIconがくっ付いてきていますね。なぜなのでしょうか。このことについては、
後々触れることにします。

MDLabel

ここでも概要が記載されています。

Class MDLabel inherited from the Label class but for
MDLabel the text_size parameter is (self.width, None)
and default is positioned on the left:

MDLabelはkivyのLabelを継承していますが、text_sizeパラメータは上記の通りであり、
デフォルトは左寄りで配置されるとのことです。

で、さっそくコードに入っていきます。今日はコードの参照が多いので、修正量を
少なめにして結果を即座に映すことにします。

xx/mdlabel.py

from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
Screen:

    BoxLayout:
        orientation: "vertical"

        MDToolbar:
            title: "MDLabel"

        MDLabel:
            text: "MDLabel"

        # add
        MDLabel:
            text: "MDLabel"
            halign: "center"
'''


class Test(MDApp):
    def build(self):
        return Builder.load_string(KV)


Test().run()

マニュアルでは、デフォルトとセンター配置しているMDLabelの定義がありましたので
上記では両方の挙動を見ています。追加文はコメントアウトしているところあたりになります。
さっそく修正しているわけですが。。

これといって、目新しいものはないので、初めてですが触れ込みはなしとすることにします。
ですが、「Note」と題したパネルでは以下のように記載があります。

See halign and valign attributes of the Label class

このプロパティはkivyMDのAPIあたりに書かれているものではなく、kivy側のLabel
クラスにあるプロパティのようですね。探すのに少し苦労しました。とまぁどうでもよい
ことは置いておいて、v・hとありピンときた方もいられるかもですが左右上下に配置できる
よーというものですね。気になった方は以下をご参照ください。

結果

さくさく結果まできてしまいましたね。どんな挙動になったか見てみましょう。

ちゃんと、マニュアル通りに動いています。デフォルトは左に寄っていることが分かります。

MDLabel color:

こちらも概要として以下が記載されています。

MDLabel provides standard color themes for label color management:

ここは自信がなかったので、依頼をしてみました。

MDLabelは、ラベルの色を管理するための標準的なカラーテーマを提供します。

とのことです。このこともコードで見てみましょう。

xx/mdlabel_color.py

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel

KV = '''
Screen:

    BoxLayout:
        id: box
        orientation: "vertical"

        MDToolbar:
            title: "MDLabel"
        
        # add 
        MDLabel:
            text: "Custom color"
            halign: "center"
            theme_text_color: "Custom"
            text_color: 0, 0, 1, 1
'''


class Test(MDApp):
    def build(self):
        screen = Builder.load_string(KV)
        # Names of standard color themes.
        for name_theme in [
            "Primary",
            "Secondary",
            "Hint",
            "Error",
            "ContrastParentBackground",
        ]:
            screen.ids.box.add_widget(
                MDLabel(
                    text=name_theme,
                    halign="center",
                    theme_text_color=name_theme,
                )
            )
        return screen


Test().run()

ここもコードを少しアレンジしています。カスタムで色変えれんよ(られるよ)という以下の
記載があるので合わせてそちらも見ています。同様、コードの方はコメントアウトあたりを
追加しているのみです。

To use a custom color for MDLabel, use a theme ‘Custom’. After that,
you can specify the desired color in the rgba format in the text_color parameter:

ここも、とりとめがないのですが、触れるとするならば以下Testクラスのbuildメソッドに
なるでしょうか。一旦追加分(コメントアウト周辺部分)はマニュアル通りなので省略します。

(略)

class Test(MDApp):
    def build(self):
        screen = Builder.load_string(KV)
        # Names of standard color themes.
        for name_theme in [
            "Primary",
            "Secondary",
            "Hint",
            "Error",
            "ContrastParentBackground",
        ]:
            screen.ids.box.add_widget(
                MDLabel(
                    text=name_theme,
                    halign="center",
                    theme_text_color=name_theme,
                )
            )
        return screen

(略)

テキストで表示されるもろもろは色が決まっているということなのですね。これも次の実行
結果を見てみましょう。

結果

いや、さくさく進んでいますね。気持ちがいい。

おっと、肝心なことを忘れてはいけません。結果に入ります。

ここも追加分を合わせてもマニュアル通りですね。試してはないですが、ダークテーマにすると
とても見づらいものもありますね。両方ともに適合するテーマカラーはなんだろうかと考えて
みるのもデザインの登竜門になりますでしょうか(多分ない)。

font_style parameter

ここも章立てしているわけではありませんが、分かりやすくするためにここでは章立てる
ことにしました。また、概要としては以下のように記載があります。

MDLabel provides standard font styles for labels. To do this,
specify the name of the desired style in the font_style parameter:

こちらに関しては、最初あたりにやりましたね。なつかしい。詳しくは以下をご覧ください。

内容が見づらいことはお詫び申し上げということになりますが、フォントのスタイルはマテリ
アルデザイン同様でkivyMDでも決まっています。リンクを見ていなく、なんのことじゃいって
なっている方はコードと実行結果を見れば一目瞭然となると思われます。

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
from kivymd.font_definitions import theme_font_styles


KV = '''
Screen:

    BoxLayout:
        orientation: "vertical"

        MDToolbar:
            title: "MDLabel"

        ScrollView:

            MDList:
                id: box
'''


class Test(MDApp):
    def build(self):
        screen = Builder.load_string(KV)
        # Names of standard font styles.
        for name_style in theme_font_styles[:-1]:
            screen.ids.box.add_widget(
                MDLabel(
                    text=f"{name_style} style",
                    halign="center",
                    font_style=name_style,
                )
            )
        return screen


Test().run()

上記のコードは、マニュアル同様で特に変更点はありません。こちらも先述リンクの
「Font Definitions」篇を見ていた方は周知の事実ですが、何も触れないのは少し
おサボりな気がしてならないので少し触れ込んでみます。

import文

Builder・MDAppパッケージは恒例のごとく表れていますが、Testクラス側での呼び
出しにMDLabel及びtheme_font_stylesパッケージを使用する場合は以下のように
指定する必要があります。kvで完結する場合は必要がありません。

from kivymd.uix.label import MDLabel
from kivymd.font_definitions import theme_font_styles

Testクラス側

ここも先述リンクのおさらいですが、theme_font_stylesはH1だとかH2だとかの
フォントのスタイルである文字列を格納しているリストになります。それを終了イン
デックスが-1と指定されているのでH1からOverlineを取り出すことになり、1つ1つ
MDLabelに流し込んで、idがboxのMDListにガコーンガコーンと詰め込んでいます。

class Test(MDApp):
    def build(self):
        screen = Builder.load_string(KV)
        # Names of standard font styles.
        for name_style in theme_font_styles[:-1]:
            screen.ids.box.add_widget(
                MDLabel(
                    text=f"{name_style} style",
                    halign="center",
                    font_style=name_style,
                )
            )
        return screen

textプロパティとfont_styleプロパティに取り出したものが指定されていますね。
これでテキスト表示とフォントのスタイルは問題ないようすです。

結果

はい、さっそくですが結果に入ります。
マニュアル通りで少しつまらないのは申し訳ないですが...

ってあれッッッ！！！表示狂ってるやんけ？！(突然の方言)
最初表示したときはウイルスにでも感染したか？とかバカなことを思ってたのですが
少し(というか結構な時間つぶして)調査をしてははーん問題ないのだなと確信しました。

確信という強い表現を使ったのは、次の結果を見てもらうと一目瞭然な気がします。

でしょ？！だから私言いましたよね！！(一部界隈でよく使われる文言)

すみません、調子に乗りました。。
特別大掛かりなことをやったわけでもありません。どんなことをやったかということを
コードで示しておきます。

xx/mdlabel_fontstyle.py

(略)

            MDList:
                id: box
+               padding: dp(50)
+               spacing: dp(100)
'''

class Test(MDApp):

(略)

とりわけ重要なのはspacingの方になりますね。これが大きく設定されていないことで
先程のようなグチャっとした表示になったわけなのです。マニュアルを執筆したときは
MDListのデフォルトの仕様が異なっていたのか、spacingなどをサンプルに書き忘れた
のか真相のところは定かではありませんが起こっていることは事実です。ちなみにですが、
paddingは上のMDToolbarとの間隔になります。

まぁ、これを見てもフガフガ言わないようにしましょう。ミスは誰にでも起こるものです。
むしろ、コントリビューターが私たちに試練を与えて頂いているというスーパーポジティブ
シンキングで物事を考えると心が穏やかになるものです。
# 誰目線で言ってんだと言われそうですが

ということで一件落着になりますかね。続いて本日最後のお題目、MDIconになります。

MDIcon

えぇ、お前ついてくんのと少しお互い気まずい雰囲気が出ている気がしますが、これには
理由がありそうです。まずは冒頭文の引用から。

You can use labels to display material design icons using the MDIcon class.

高校英語くらい(この文法はまさか...中学...？)文法って大事ですね。。
もうすっかり忘れてしまっていて直訳できないくらいになりました。TOEICやり直そうかな。。
# TOEICの綴りも忘れそうだったなんて恥ずかしくて言えないッ！

という自己申告はどうでもよくて、DeepLに依頼するとと以下のようになります。

MDIconクラスを使用して、マテリアルデザインアイコンを
表示するラベルを使用することができます。

少し微妙な気がして、でも使役の〜させるを当てはめてもおかしいしで。。
ということで、私の訳も載せておきます。いらないかなと思いましたけど。。

MDIconクラスを使用してマテリアルデザインのアイコンを
表示するためにラベルを使用することができます。
# 間違ってたら指摘プリーズ！

んで、そのあとはここで正体を表したか！といつものマテリアルデザインのリンクが載って
ありますが、いつものごとくここではパスします。

続いて、ここで先程の理由がはっきりと分かる案内が書かれています。

The MDIcon class is inherited from MDLabel and has the same parameters.

ははーんと分かれば今日はこれでおしまい！となるくらいの1文ですね。なんと、
MDIconクラスはMDLabelを継承しているのでした。んで以下を除くパラメータ
は同じものを保持しているとのことです。

Warning
For the MDIcon class, you cannot use text and font_style options!

MDLabel継承する必要あった？と言いたくなる気持ちもありますが、ここで忘れてはいけ
ないことがあります。そう、MDLabelはLabelを継承しています。つまり、LabelはMDIcon
のおじいちゃんにあたるので、おじいちゃんのプロパティを使える(意味不明)ので必要は...
あるのか...？とまぁ、ここあたりはなにかしらの意図がありそうなったのでしょう！でなけ
れば次に進めないw

ということで、ここでもコードと実行結果を見てみないと分からないので次のようなものを用意
してみました。まずはコードから。

xx/

from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.uix.label import MDIcon
from kivymd.icon_definitions import md_icons


KV = '''
Screen:

    BoxLayout:
        orientation: "vertical"

        MDToolbar:
            title: "MDIcon"

        ScrollView:

            MDList:
                id: box
                padding: dp(20)
                spacing: dp(30)
'''


class Test(MDApp):
    def build(self):
        screen = Builder.load_string(KV)
        # Names of standard font styles.
        for name_icon in md_icons.keys():
            screen.ids.box.add_widget(
                MDIcon(
                    halign="center",
                    icon=name_icon,
                )
            )
        return screen


Test().run()

サンプルに載ってなくどんなものが来るんだ！と期待感があった方は、すみません。
先程のmdlabel_fontstyle.pyとほとんど同じです。マニュアルでもMDIconの
使い方は載っているし、コードは本当に先程とそっくりそのままなので触れ込みは
割愛させてもらいます。

ざっと説明すればmd_icon・MDIconパッケージを呼び出してアイコンを全て表示して
いるだけのものになります。MDIconってなんなんだよ〜！！という方はご安心を。上位
互換なサンプルはすでに用意しています。というか過去に「Icon Definitions篇」で
やっていますね。少しこちらはちゃんと(コントリビューターたちが)作っているコード
なので少し難しいですが。なので気になる方は以下をご参照ください。

結果

今日も長くなってしまった。。どうでもよいことは置いておいて結果の方にうつります。

これらも問題はなさそうですね。シンプルにアイコンが表示されているだけになります。
※ 実行する場合は少し重いのでお気をつけを

API - kivymd.uix.label

今日使ったAPI群を引用しておきます。

class kivymd.uix.label.MDLabel(**kwargs)

もっと情報が欲しいか？、欲しけりゃくれてやるぜ...
探してみろ、コードの中においてきた！と〇〇ピースのような
誰かのセリフみたいに説明があります。module documentationってコードで
合ってんのかな...

font_style

Label font style.

Available vanilla font_style are: ‘H1’, ‘H2’, ‘H3’, ‘H4’, ‘H5’, ‘H6’,
‘Subtitle1’, ‘Subtitle2’, ‘Body1’, ‘Body2’, ‘Button’, ‘Caption’, ‘Overline’, ‘Icon’.

font_style is an StringProperty and defaults to ‘Body1’.

デフォルトはBody1なんですね。知らなかった。
あと、バニラ フォントスタイルってなんだ...？

text

Text of the label.

言うまでもなくですね。

theme_text_color

Label color scheme name.

Available options are: ‘Primary’, ‘Secondary’, ‘Hint’, ‘Error’,
‘Custom’, ‘ContrastParentBackground’.

theme_text_color is an OptionProperty and defaults to None.

こちらも同様。

text_color

Label text color in rgba format.

text_color is an ColorProperty and defaults to None.

こちらはカスタムでの指定で使用しましたね。

class kivymd.uix.label.MDIcon(**kwargs)

こちらも先程と同様、詳細は別のところに置いてきたッ...！というものですね。

icon

Label icon name.

icon is an StringProperty and defaults to ‘android’.

デフォルトはアンドロイドのアイコンです。確かどこかでやった記憶が。。

source

Path to icon.

source is an StringProperty and defaults to None.

自分でアイコンを用意する場合はこちらを使います。

まとめ

さぁ、いかがだったでしょうか。
ラベルが少しでも分かったよーとなってもらえれば嬉しいです。結構重要な項目なので
使いまわせるくらいになりたいものです。分からん！となった方は色々実際に試して
もらった方がいいかもしれません。

ちょっと、短めで済ませようと思いましたが長くなってしまいました。
でも、マニュアルと同等の量があるので参考になれば幸いです。

来週は順番通りでList篇になります。今日は長くなってきたのでこの辺で。

それでは、ごきげんよう。

参照

Components » Label
https://kivymd.readthedocs.io/en/latest/components/label/

DeepL翻訳/DeepL Translate
https://www.deepl.com/ja/translator