kivyMDチュートリアル其の什玖 Components - Image List篇

ハロー、Qiita。どうもVirty(n)です。
ただ挨拶をパクってるだけですが、みなさんはいかがお過ごしでしょうか。

5月も終わろうとして特にとりとめもなく、緊急事態宣言は解除されずにといった
ところで、なかなかダルさも消え失せなさそうですね。# 私だけ？

とは言ったところで、kivyMDに関しては毎週と謳っているのでここでめげては
いけません。奇跡的にも皆勤賞で投稿出来ております。

というわけで、今週も元気にやっていきましょう！今日はタイトルの通り、
Image List篇となります。

Image List

恒例行事です。なんのことか分からない！って方は過去のページ見てもらえると助かります。

タイトルから言うとそのままというか、写真のリストと言えばそこまでです。
しかし、リンクを辿るとただただ写真を載っけるだけではダメですよという意図がプンプン
伝わってきます。やたらと画像の上に線が乗っかっているので、サンプルコードでもあることですが
ここはGrid Layoutを使用しておけば無難な気がします。# なにそれという方はこちらを参照ください

これについてはマニュアルでもこういった文言が記載されています。

Image lists display a collection of images in an organized grid.

ただし、必ずしも必須というわけでもないので、表示したいものがあれば臨機応変にといったところ
でしょうか。# わざと崩したレイアウトなどはkivy(MD)でやろうと思うと少々難易度が高いよう
にも思えます

1つ注意点があり、リンク元をたどると[IMPREMENTATION]タブがAndroid筆頭に参照コードを
載せていませんでした。これはあくまで独自の見解で偏見かもしれませんが、

スマホアプリには向いていない...!

ということでしょうか。。気のせいであればよいのですが。

少し長くなってきたので、推測の話はこの辺にして実際にImage Listを使用できるクラスを以下に
列記します。というか、マニュアルそのままですが。

KivyMD provides the following tile classes for use:

● SmartTileWithStar
● SmartTileWithLabel

SmartTileWithStar

ということで、さっそくサンプルコードを見てみましょう。あまり、前置きが長すぎるのも
問題がありまクリスティーです。# あっ！少しお待ちくださいッ、もうちょっとなので！

xix/imagelist_smarttilewithstar.py

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
<MyTile@SmartTileWithStar>
    size_hint_y: None
    height: "200dp"


ScrollView:

    MDGridLayout:
        cols: 1
        adaptive_height: True
        padding: dp(4), dp(4)
        spacing: dp(4)

        MyTile:
            stars: 5
            source: "./sample1.jpg"

        MyTile:
            stars: 5
            source: "./sample2.jpg"

        MyTile:
            stars: 5
            source: "./sample3.jpg"
'''


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


MyApp().run()

kv側

ウィジェットはkv側でまとまっているので、特にimport文は変わったことはありません。
なので、こちらは省略していきなりkv側に入っています。

<MyTile@SmartTileWithStar>
    size_hint_y: None
    height: "200dp"

まずはそれぞれImageを表示する元となるMyTileウィジェットになります。
実際のUsageにもなるところですが、SmartTileWithStarクラスを継承させている
のが分かりますね。size_hint_y及びheightプロパティがあることによりSmartTile-
WithStarは、はーん何かしらLayoutを継承してんだなーとイキがってみます。間違えて
いたらチョー恥ずかしいので一旦裏付けとして以下を参照しておきます。

(略)

class SmartTile(
    ThemableBehavior, RectangularRippleBehavior, ButtonBehavior, MDFloatLayout
):
    """
    A tile for more complex needs.

(略)

※ 以下リンクにおける200-204行目を参照
※ APIでも出てきますがSmartTileWith*はSmartTileを継承しています

おっふ、なんと継承してたのはMDFloatLayoutだったのですね。GridLayoutではないんだ。。
まぁなんにせよLayoutを継承していることが分かっただけでもヨシ！とします。# 目視確認大事

ScrollView:

    MDGridLayout:
        cols: 1
        adaptive_height: True
        padding: dp(4), dp(4)
        spacing: dp(4)

        MyTile:
            stars: 5
            source: "./sample1.jpg"

続いてはルートウィジェット以下のScrollViewからとなります。
配下にMDGridLayout(ここで出てきた!)を持たせて、そのまた配下にMyTileを持たせています。
adaptive_heightとかpaddingって何？となった場合は、再掲しますがこちらを参照ください。

おい、待て！マニュアルと違うとこあるじゃねーか！という方がいらっしゃいましたら、するどい
です。実はcolsプロパティの値と、MyTileのsourceプロパティの値を変更しています。まず、
colsプロパティに関してですが、見やすさのため1列表示としました。sourceプロパティについて
はこの後説明します。なお、MyAppクラス以下はとりとめもないので省略ということで。

結果

一旦、結果の方に移ります。最後に持ってくると忘れちゃうので。。

「この後説明します」のところが説明出来ていませんでした。なぜ値を変えてんだということですが、
こちらは簡単な話で、おなじみ?の猫ちゃんが使えなくなったからです。マニュアルに猫ちゃんが出て、
触れ込みで猫ちゃんを出してどうしようと言うのですか(うるさい)。そんな野暮ったいことは私出来ま
せんよ(知らないよ)。

ということで、せっかくなので癒される好きなものを貼り付けたいという意味不明な衝動がありまして
値を変更したわけでした。じゃあ、何の画像使ってんのよという話ですが、それは

茜さやさんです

ネット広告では見たことない人がいないのではというくらいのお方です。
詳細なプロフィールは以下をご覧ください。

この方を選んだのも理由があります。
というのも好きな画像をなんでもかんでも載せてしまうと著作権・肖像権に引っかかってしまいます。
茜さやさんは「ぱくたそ」というフリーの写真素材サイトに素材を提供しており、このサイトの規約では
素材を商品化しないのであれば無償で使用してもかまわないと謳っています。一応規約の一部を引用します。

ぱくたその写真素材は、誰でも自由に無料で何度でもご利用いただけます。写真を個別に購入したり、ライセンス費用をお支払いする必要はありません。いくら利用しても使用料が発生しないロイヤリティフリー（※1）の写真素材です。CC0や著作権フリーのサイトではありません。

● 国、地方自治体、企業、個人、団体、にご利用いただけます。なお、日本語で連絡が取れない方はご利用なれません。
● 商用利用可能です。なお、写真素材を商品化して販売できません。
● 写真素材はぱくたそから直接取得、または、ぱくたその写真素材であると説明を受けて取得することとし、
　それ以外の手段によって取得した写真素材はご利用なれません。
● 写真素材を加工、合成、変形または変換してご利用いただけます。

※1　ロイヤリティフリーについて

この言葉には、「すべてにおいて無料で利用可能」「著作権を考慮せずに利用可能」といった
「フリー」という言葉から一般的に連想できる意味合いは含まれていません。あくまでも「事前の
取り決めの範囲内で利用するのなら追加の使用料を免除する」といった意味に過ぎず、実際には購入
したり会員費を支払う必要があるものや、必ず著作権表示（クレジット）が必要なものがあります。

参照リンク
https://www.pakutaso.com/userpolicy.html

ということなので、フリーで使用できることや猫ちゃん並みにフォトジェニックであることから
茜さやさんを選びました。本当はただのファンだったりして。

また、取得したリンクURLなどは添付しておき、このサイトから取得しておきましたよという意思表示は
ここで残しておきます(最後の[参照]にて)。また元ある画像はそのまま載せ改変していないことをここで
表明しておきます(それは意味あるのか)。

少し写真素材を商品化出来ないことはほぇーとなりましたが、それをやってしまうと一発アウトに
なります。見かけたときはぱくたそさんに通報しておきましょう。あとは、ぱくたそ以外からダウン
ロードすることもアウトってことは注意が必要ですね。

ということで、前置きが長くなりすぎてしまっているのでこの辺りにしておいて、さっそく見て
みましょう。先程のコードの中の「sample*.jpg」はダウンロードしてみて変更しておいてくだ
さいね。

表示したときは、「女神じゃ〜女神がここにいるぞよ」としばらくボーっとしてしまいましたが、
どうでしょうか。中にはみたことあるぞ！というものもあるかと思われます。ここで所感を述べ
すぎるのは、単にキモいというのとページの意図とそぐわないということでこの辺りにしたいと
思います。

SmartTileWithLabel

あぶないあぶない、こちらを忘れてしまいそうでしたね。
先程と同様、サンプルコードから変更したものを載せておきます。

xix/imagelist_smarttilewithlabel.py

from kivymd.app import MDApp
from kivy.lang import Builder

KV = '''
<MyTile@SmartTileWithLabel>
    size_hint_y: None
    height: "240dp"


ScrollView:

    MDGridLayout:
        cols: 1
        adaptive_height: True
        padding: dp(4), dp(4)
        spacing: dp(4)

        MyTile:
            source: "./sample1.jpg"
            text: "[size=26]Keikan 1[/size]\\n[size=14]Shibuya no Kesiki[/size]"

        MyTile:
            source: "./sample2.jpg"
            text: "[size=26]Keikan 2[/size]\\n[size=14]Tokyo Sky Tree No Shashin[/size]"
            tile_text_color: app.theme_cls.accent_color

        MyTile:
            source: "./sample3.jpg"
            text: "[size=26][color=#ffffff]Keikan[/color][/size]\\n[size=14]Shinjuku No Kesiki[/size]"
            tile_text_color: app.theme_cls.accent_color
'''


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


MyApp().run()

こちらは、特にSmartTileWithStarから変更点はあまりありません。
逆に変更点はどこなのよって思うかもしれないので、ピックアップして以下に再掲しておきます。

        MyTile:
            source: "./sample1.jpg"
            text: "[size=26]Keikan 1[/size]\\n[size=14]Shibuya no Kesiki[/size]"

見事にstarsからtextプロパティに変更されていますね。
このプロパティはタグを付与することもできます。別に専用のプロパティを用意しなかったのかな。。

結果

前半飛ばしすぎたというのもあって、バテていますw
早く結果を見たほうがいいとは思うので、結果のほうに移ります。

同じで、ぱくたそさんから画像を使わせてもらってます。今度はなかなか外出が不自由になっている
ということもあり、気晴らしに都内の景観でも見ましょうかね。

上から順番に渋谷、スカイツリー、新宿となっています。綺麗に撮られていますね。
kivyMD側の表示でも、高画質な点は問題ない結果となりました。

画像の途中までしか映っていなかった、新宿です。問題ありませんね。

補足

1つ疑問であって、LabelとStarは併用できますかねぇというところですが、気になって
試してみました。

うーん、かわいい。
じゃなかったですねすみません、併用部分に関してでした汗

特に問題なさそうな感じはありますが、文字数だとかタイトルと補足文をどうするかといった
設計部分が難しくなってきそうです。まぁこれもそもそもアプリの設計で固定されそうな気が
しますがね。

あとは、スマホで表示するのであればcolsプロパティの値は2とかに留めておいた方がいいの
ではと勝手に思っていましたが、ギャラリー表示だとかその辺も考えるとやっぱり臨機応変に
対応した方がいいような気もします。

API

ここで、使用したAPIを引用しておきます。

class kivymd.uix.imagelist.SmartTile(**kwargs)

A tile for more complex needs.

Includes an image, a container to place overlays and
a box that can act as a header or a footer,
as described in the Material Design specs.

kivyMDのコードでも出てきたところですね。いろんなクラスがMixInされています。
下記で登場のSmartTileWithStarとSmartTileWithLabelクラスの親クラスになります。

source

Path to tile image. See source.

source is a StringProperty and defaults to ‘’.

MDGridLayoutの配下のMyTileで使用していましたね。これはSmartTile側で保持しています。

class kivymd.uix.imagelist.SmartTileWithLabel(**kwargs)

紹介文はSmartTileと同じなので省略します。

tile_text_color

Tile text color in rgba format.

tile_text_color is a ColorProperty and defaults to (1, 1, 1, 1).

ラベルテキストの色になりますね。これをつけるとテキストすべてが色付けされることに
なります。動作確認では、色分けができることも試していますね。

text

Determines the text for the box footer/header.

text is a StringProperty and defaults to ‘’.

これは言うまでもなくですね。デフォルトは何も文字列がありません。

font_style

Tile font style.

font_style is a StringProperty and defaults to ‘Caption’.

こちらは使用していませんが、注目ポイントとして挙げておきます。
フォント使用可能なようですね。

class kivymd.uix.imagelist.SmartTileWithStar(**kwargs)

ここも省略ということで。

stars

Tile stars.

stars is a NumericProperty and defaults to 1.

これもtext同様ですね。starの数は限りあるのかと色々見てみましたがやろうと思えば
100とかでも可能なようです。ただし、画面が見切れちゃうのでご使用はあくまで計画的に...

まとめ

はい、今日はここまで！
ということでいかがだったでしょうか。半分くらいぱくたその触れ込みになりましたが。。

好きな画像などあれば試してみてもよいのではないでしょうか。
ただし、あくまで個人用ということにしておいて、公開するのは少し慎重にしておいた
方がよいと思います。まぁ、公開する方法もまだ伝えられてないないんですけどね。。

次回は順番通りで、Label篇となります。お楽しみに〜。

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

参照

Components » Image List
https://kivymd.readthedocs.io/en/latest/components/image-list/

「一緒に食べないの？」と問いかける美女の写真素材
https://www.pakutaso.com/20160203053post-7025.html

「そろそろ時間だから行こっか」のフリー素材
https://www.pakutaso.com/20160452095post-7493.html

「本日の特集はこちら！」フリップを見せる女子アナのフリー素材
https://www.pakutaso.com/20160223053post-7030.html

渋谷の夜景と工事現場のクレーンのフリー素材
https://www.pakutaso.com/20210327070post-33572.html

東京スカイツリーと同じ高さ（上空）から夜景撮影のフリー素材
https://www.pakutaso.com/20190545148post-21045.html

上空から都庁と新宿を見下ろす（夜景）のフリー素材
https://www.pakutaso.com/20190541148post-21044.html