kivyMDチュートリアル其の什弐 Components - Chip篇

12152 ワード
python3.7 MaterialDesign Python kivymd Python テキストリンク

ハロー、Developer。どうも、Vir...って言おうと考えていましたが、あまり慣れないこと
やるとダメですね。マンネリ打破しようと思いましたが、アプリ開発同様上手くいきません。
最近は作業感が強く感じて、そろそろアプリを開発したほうがいいのかなと思いますがまだ
まだこの作業を続けていきます。だって具体的な作り方がよくわかんないんだもの。

そんなことはどうでもよくて、さっそくkivyMDに入っていきましょう。
今日のお題はChip篇となります。

Chip

冒頭のMaterialDesignリンクしかり、Chipがこんなものだよと書かれています。
1言で言えば、コンパクトなエレメントだよということなのですがスマホアプリでは
あまり出てこないかもですね。Webとかだとみたことあるかなぁという感じでしょうか。

Usage

使い方はこんな感じだよという案内がマニュアルにはあります。
具体的な方法は以下の通りです。

MDChip:
    text: 'Coffee'
    color: .4470588235118, .1960787254902, 0, 1
    icon: 'coffee'
    on_release: app.callback_for_menu_items(self)

言ってしまえば、これまでなのですが使い方はこんな感じです。

また、上記のon_releaseコールバックの使い方ですがここでは省略するようにします。
理由としては第一に、この使い方では使えんよということになるためです。というか
この通りにすると動きませんでした。詳細の方はソースを見ないとですが、今日お見せする
というか公式のGitHub上でのサンプルコードではcallbackコールバック(誰かの構文みたい)を
使用していました。詳細は後ほど。

また色々チップの種類もあるのですが、列挙すると以下のようになるでしょうか。

  • Use custom icon
  • Use without icon
  • Chips with check
  • Choose chip

使い方としては以上になりますが、あぁー！じれったいという方もいるかもしれないので
さっそくサンプルコードを以下に載せておきます。自分が作ったわけではなく、「See full
example」とリンクが載せてあった先のコードをピックアップして改変しています。

あ、あと先に言っておきますが以下のサンプルコードはナットレコメンドです(急な横文字)。
詳細は後ほど言いますが、スマホとかタブレットだとかで表示が狂う可能性があります。
# じゃあなんで載せてんだ！とツッコミが来そうですが...

xii/chip.py
from kivy.lang import Builder

from kivymd.app import MDApp
from kivymd.toast import toast

kv = """
Screen:

    MDToolbar:
        title: app.title
        pos_hint: {"top": 1}
        left_action_items: [["menu", lambda x: x]]

    MDLabel:
        text: "Chips"
        pos_hint: {"center_x": .5, "center_y": .85}

    MDSeparator:
        pos_hint: {"center_x": .5, "center_y": .8}

    ### Use custom icon    

    MDChip:
        label: "Coffee"
        color: .4470588235294118, .19607843137254902, 0, 1
        icon: "coffee"
        callback: app.callback
        pos_hint: {"center_x": .15, "center_y": .7}

     ### Use without icon 

    MDChip:
        label: "Without icon"
        icon: ""
        callback: app.callback
        pos_hint: {"center_x": .15, "center_y": .6}

    ### Chips with check 

    MDChip:
        label: "Check with icon"
        icon: "city"
        check: True
        callback: app.callback
        pos_hint: {"center_x": .22, "center_y": .5}

    ### Choose chip

    MDChooseChip:

        MDChip:
            label: "Earth"
            icon: "earth"
            callback: app.callback
            selected_chip_color: .21176470535294, .098039627451, 1, 1

        MDChip:
            label: "Face"
            icon: "face"
            callback: app.callback
            selected_chip_color: .21176470535294, .098039627451, 1, 1

        MDChip:
            label: "Facebook"
            icon: "facebook"
            callback: app.callback
            selected_chip_color: .21176470535294, .098039627451, 1, 1
"""


class MainApp(MDApp):
    def __init__(self, **kwargs):
        self.title = "KivyMD Examples - Chips"
        super().__init__(**kwargs)

    def build(self):
        self.root = Builder.load_string(kv)

    def callback(self, instance, value):
        # print(instance) # chip object
        # print(value)    # text
        toast(value)


if __name__ == "__main__":
    MainApp().run()

少し長くなっていると思われるかもですが、単にチップを列挙しただけなのでそう感じ
られるだけになります。Chip自体はMDAppパッケージに含まれる形となるので、特別な
インポートは必要ありません。また、MainAppクラス側でも特別なことはやっていません
のでそちらに関しては省略します。

kv側

先にChip以外でこんなものもあるんだというものを触れておきます。

アプリ側で境界線みたいなものを引きたいなといったときには以下のウィジェットが使える
ようです。自身も含めですが、便利なので覚えておきましょう。

MDSeparator:

はい、今日のメインディッシュですがChipの使い方のおさらい並びに仕様になります。

使用方法(おさらい)

MDChip:
        label: "なんでもすきなものいれたらいいよ"
        color: すきな色を指定してね
        icon: "coffee"           # アイコンなしの場合は空文字列
        check: True              # チェック付きはこのように指定
        callback: app.callback   # マニュアルみたいな使い方すると動かなくなるよ

仕様

API - kivymd.uix.chip

class kivymd.uix.chip.MDChip(**kwargs)

This mixin class provides Button behavior.
Please see the button behaviors module documentation
for more information.

text

Chip text.
text is an StringProperty and defaults to ‘’.

icon

Chip icon.
icon is an StringProperty and defaults to ‘checkbox-blank-circle’.

color

Chip color in rgba format.
color is an ColorProperty and defaults to None.

check

If True, a checkmark is added to the left when touch to the chip.
check is an BooleanProperty and defaults to False.

selected_chip_color

The color of the chip that is currently selected in rgba format.
selected_chip_color is an ColorProperty and defaults to None.

上記仕様に関しては、書かれているものがその通りなのですが
少し注意が必要なところもあります。

まず、アイコンですがこちら必要なければ空文字にする必要があります。
指定しない方法というか書かなくなるとどうなるかというと、くぼみみたいな
アイコンの枠が表示されたままとなりなんだか不恰好なチップとなります。
まぁ、あえてそんな形にするという方法もなくはないですが。

そして次は色になります。こちらは何も指定しないとどうなるかというと
デフォルトのメインテーマの色が引き継ぐ形となります。これは後ほどの
結果でその様子が分かるかと。また、チップを押した後の色を変化させる
ために、selected_chip_colorプロパティというものもあります。
これはサンプルのMDChooseChipのそれぞれのChipが該当します。

最後に確認マーク(check)ですが、これは必要な場合にプロパティを定義する
ことが必要になります。ないとこのマークが反映されません。

MDChooseChipとしては、それほど仕様の記載がないのですが任意のウィジェットを
配下に配置できるようですね。ラベルとか他のウィジェットを固めて配置させるとか
に有用かもしれません。

結果

では上記のサンプルがどう表示されるのか見てみましょう。

こんな感じになりました。怪しい感じが醸し出されているのはどうしても否めません。

チップを押したときの挙動は「Bottom Sheet篇」とかでも一緒ですが、toastの挙動が
なされます。試しにCoffeeを押してみます。

一見そんな変なことねぇーじゃんと思われるかもしれませんが(そんなことはない)、
次のキャプチャだと雲行きが怪しくなります。チェック付きのアイコンを押してみます。

さらに最後のキャプチャになると、顔を防ぎたくなるようになります。

うーん、これはダメだw
タブレットでこんな表示がされてしまうと、短気な方はタブレットを指で貫通させてしまう
かもしれません。これはkivyMD側が悪いことは全然全然全然なく、開発者側の責任です。
「See full example」のリンクでは、Layoutで配置しているのでそれほど崩れることは
ありません。

ではどうしてこんなことがあったかというと、2点あります。

1点目は私の怠惰というか、知識不足になりますね。別に開き直っているわけではありませんが、
単にLayoutの知識がなく過去のコードから応用できるかなという安易な考えから上記が生み出され
ちゃいました。2点目は1点目に繋がりますが、知識が足りなくpos_hintプロパティを使用した点
になります。あまりこれに頼りすぎると、他機種に対応が出来ないのは目に見えて分かります。
MDChooseChipとかだとこれが効きません（泣）。

ですので、今回のChipに関しては上記のようなアンチパターンとも言える書き方はやめて
おきましょう。良いことはあまりないと言っても過言ではありません。

まとめ

さて、いかがだったでしょうか。じゃあ、どう書けばいいのよと継続してツッコまれそうですが
素直に「See full example」リンクを辿ればいいじゃないという返しになります。最初はそれを
触れ込んでいこうかと思っていましたが、コードが長いのです。。ちゃんとしたもの見たいのだが！
という方はそちらをご参照ください。

今回は知らないこともあったので、簡潔に書こうと思いこんな形になりました。

まぁでもアンチパターン的なことも出てきましたし、単にレイアウトを知らないということで
それほど致命的なことにならなくて良かったかもしれません。国外の人もビックリのポジティブ
シンキングですが、これでいいのです。あ、ちがった、これでいいのだ！

安心してください。レイアウトに関してはGWあたりでまとめて取り掛かる予定なので。
時間の余裕があれば、こちらを再トライしてもいいかもしれませんね。

ということで今週は良い時間になってきたのでこれまでということで〜。

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

参照

Components » Chip
https://kivymd.readthedocs.io/en/latest/components/chip/

Components Chip
https://github.com/kivymd/KivyMD/wiki/Components-Chip