kivyMDチュートリアル其の参什参 Components - Tooltip篇

9441 ワード
MaterialDesign kivymd Python python3.7 kivyMD-v0.104.1 Python テキストリンク

やっほーー(某Youtuber風、息してる?と問いかける方ではない)。

さぁ、今週はいかがだったでしょうか。私はまずまずといったところです。
というわけで、今週は変わったニュースもありませんでしたが元気にやっていきま
しょう。今日は最後?と思わせぶりなTooltip篇となります。本当は最後ではあり
ません。

いきなり話は逸れますが、今日チュートリアルの方を見たらなんかTransition
というものが増えてますね。というか全体的に変更点がありそう。中を覗いていたら
、これも後々実装される見込みなのですね。version 1.0.0で新しくとあるので、
今後の期待ということでしょうか。乞うご期待を。

Tooltip

ということでさっそくやっていこうと思います。
はい、マテリアルデザインのリンクは読んでおいてもらえれば。

まぁ、私が説明するまでもなくそれほど古いUIを触っているとかでもなければ、
見たことはあるかと思われます。主にアイコンなどに使用することが言えるでしょ
うか。リンクを見てみると意外と気づきにくいものやこう使っちゃやーよというこ
とも書かれているので、一読はしておいたほうがいいかも。

で、マニュアルとしては以下のように書かれています。

Tooltips display informative text when users hover over,
focus on, or tap an element.

ある動作をしたときにテキストが現れますよーということですよね。タップしたとき
に出すことは個人的には知らなかったですね。

また、以下のように続き、使い方について書かれています。

To use the MDTooltip class, you must create a new class
inherited from the MDTooltip class:

In Kv-language:

<TooltipMDIconButton@MDIconButton+MDTooltip>

In Python code:

class TooltipMDIconButton(MDIconButton, MDTooltip):
    pass

使用したいクラスからもう1つ、MDTooltipをmixinさせることで使用することが
できます。kvでもpython(クラス)コードでも同様、使用したいクラス(MDIconButton)
とMDTooltipが指定されていますね。使用したいクラスはアイコンもしくはアイコン付きの
ボタンと覚えてもよいかもしれませんね。

と思ったら、こんな注意書きが。

MDTooltip only works correctly with button and label classes.

ラベルも大丈夫というか、ラベルを継承しているMDIconということでしょうか。
詳しくは該当マニュアルか以下リンクをご覧ください。

そして、以下にサンプルコードがありますね。早速見てみましょう。

xxxiii/tooltip.py
from kivy.lang import Builder

from kivymd.app import MDApp

KV = '''
<TooltipMDIconButton@MDIconButton+MDTooltip>


MDScreen:

    TooltipMDIconButton:
        icon: "language-python"
        tooltip_text: self.icon
        pos_hint: {"center_x": .5, "center_y": .5}
'''


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


Test().run()

はい、こちらもマニュアルの通りですね。冒頭で使用方法について触れているので
特にこちらでは触れるところはありません。サンプルコード側ではkv側でmixinを
させていますね。

結果

さくさく進んでいますね。別にサボりたいからということではないことは前もって
いっておきます。ツールチップを表示させたときの様子を載せておきます。

特に問題なさそうですね。くっきりクリアに表示されているのが分かります。

icon with tooltip(番外編)

ここで終わってもよかったのですが、なにか味気がありません。あとは、さっき
言ったようにサボってると思われたくないというのが大きいかもw

ということで、ここでは何をやりたいかということを言う前に、以前やったicon De-
finitions篇を覚えていますでしょうか？Components章ではなく、だいぶ前のThe-
mes章の中にあったものですね。少し古いので、そんなことやったっけ？って方も多いの
ではないでしょうか。

はい、なんとなく分かってきた方もいらっしゃるとは思いますが、そうです。機能追加を
します。と言っても、ツールチップを実装するだけなんですけどね。

ということで前回を思い出すために、コードを全て載っけるところからスタートしても
よいのですが、こればっかりは過去に投稿をしているのでそこは過去の投稿を見てもらえ
ればと思います。過去すでに見たも今回新しく見た方も同様ですね。マニュアルで十分だよ
という方はマニュアルの方を見ればよいと思います。

なので、ここからはそこで扱ったコードからどのように追加をおこなったかを差分ベースで
コードを抜粋しようと思います。コードについてはマニュアルからそれほど変更はありません。


from xxxiii/icon_with_tooltip.py

from kivy.lang import Builder
from kivy.properties import StringProperty
from kivy.uix.screenmanager import Screen

from kivymd.icon_definitions import md_icons
+ from kivymd.uix.tooltip import MDTooltip
from kivymd.app import MDApp

(略)

Builder.load_string(
    '''
#:import images_path kivymd.images_path

<CustomOneLineIconListItem>:

(略)

                size_hint_y: None
                height: self.minimum_height
                orientation: 'vertical'
'''
)

- class CustomOneLineIconListItem(OneLineIconListItem)
+ class CustomOneLineIconListItem(OneLineIconListItem, MDTooltip):
    icon = StringProperty()

class PreviousMDIcons(Screen):

    def set_list_md_icons(self, text="", search=False):
        '''Builds a list of icons for the screen MDIcons.'''

(略)

                    "callback": lambda x: x,
+                    "tooltip_text": name_icon

(略)

上記で変更点は以上となります。実装が完了して、UIを向上させたいというときでも
それほど工数のネックさはないような気もします。詳しく差分が見たいなぁという方は
Githubの方をご覧いただけたらと思います。

結果

ということで、こちらもどのようになっているか見てみましょう。
今度は動画キャプチャになります。

見事に、リスト形式でもツールチップが表示されることがわかるかと思われます。でも
待ってください。何か重要な点を見落としていますね。そうです、冒頭の注意文を完全に
見落としていますね。

なにかというと、ツールチップはボタンとラベルしか機能を正しくなさないということが
ありました。これはというと、アイコンがあるとは言えリストにもツールチップをなすと
いうことが言えるかと思われます。これはkivyMD側に問題があるというよりは、注意書き
がある以上このような使い方は推奨されないように思えます。まさにアンチパターン。

コントリビューターや海外の人がこれを見て混乱しないように、英文でも意思表示を示して
おきます。あまり必要はなさそうですが。

This is unti-pattern.

じゃ、なんでこれ実装したのよということになりますが、これを実装したときは冒頭の注意
書きを知らなかったのですw　ただただ、それだけの理由になります。

API - kivymd.uix.tooltip.tooltip

ということでここからは、本日使用したAPIをここでも触れていきます。

class kivymd.uix.tooltip.tooltip.MDTooltip(**kwargs)

tooltip_text

Tooltip text.

tooltip_text is an StringProperty and defaults to ‘’.

今日、唯一使ったものになりますね。デフォルトは何も値は入っていません。

tooltip_font_style

Tooltip font style. Available options are: ‘H1’, ‘H2’, ‘H3’, ‘H4’, ‘H5’, ‘H6’, ‘Subtitle1’, ‘Subtitle2’, ‘Body1’, ‘Body2’, ‘Button’, ‘Caption’, ‘Overline’, ‘Icon’.

tooltip_font_style is an OptionProperty and defaults to ‘Caption’.

フォントも使えるようですね。少し使える種類も異なるようです。デフォは'Caption'。
となると、フォントを追加すれば好きなようにフォントが使えるということになることは
重要な点となりそうです。

tooltip_radius

Corner radius values.

radius is an ListProperty and defaults to [dp(7),].

tooltip_display_delay

Tooltip dsiplay delay.

tooltip_display_delay is an BoundedNumericProperty and defaults to 0,
min of 0 & max of 4. This property only works on desktop.

あとはこれらのようなものも。きめ細かく動かしたいときは重宝しそうですね。

class kivymd.uix.tooltip.tooltip.MDTooltipViewClass(**kwargs)

Box layout class. See module documentation for more information.

あとは、このようなクラスも。少しどんなものか分からなかったですが、気になるということで
こちらでも記載をしておきます。

tooltip_bg_color

See tooltip_bg_color.

他多数あり

んー、なんなのでしょうか、これらは。ツールチップをまとめるものなのでしょうか。

まとめ

さて、いかがだったでしょうか。自分としてはちょうどよい分量でした。

と、どうでも良いことは置いておいて、ツールチップの使い方を今日は触れておきました。
なかなか使い方もシンプルなので、導入コストとしては少ない方ではないでしょうか。そし
て、得られる利益というのは計り知れないものがあることでしょう。

ただし、パーツの中でアイコンがあるだとかラベルがあるだとか、というケースはなかなか
使いこなすことは難しそうです。少なくとも冒頭の注意書きは守っておいたほうが良さそう
ですね。今はそれを守り、限定して使用するという選択を取っておいた方が良さそうです。

ということで、(v0.104.1における)KivyMDのコンポーネンツに関しては全て完了しました。
と言ってもバージョンアップも控えているし、動かなかったやつを回収しなければいけないの
ですけどもね。

ということで来週は、Transitionなんていうのは取り組めないので、いよいよバージョンア
ップに望んでいきます。結構時間掛かりそうであれば、また翌週なんてこともあるかもw

ということで今日はこのへんで。

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

参照

Components » Tooltip
https://kivymd.readthedocs.io/en/latest/components/tooltip/