kivyMDチュートリアル其の肆什参乃弍 Behaviors - Elevation篇

ハロー、Qiita!いかがお過ごしでしょうか。

今年もあと3週間ほどとなりました。いやー、ほんとに1年て早いですね。
クリスマスソングが街で鳴り響く中、筆者は家でカタカタ記事を書こうとしています。
誰ですか?!うわーっとか言っているのは!やめてくださいッ！

まぁそんな馬鹿なことも言っておりますが、安定的に投稿出来るのも平和な象徴という
ことでしょうか(どういうこと)。ということで自分でも何言っているか分からなくなって
きたので、さっさと本題に入っていこうと思います。

今日はというと、先週Elevationをやっていて残りがあるので、それの続きとなります。
ということで、レッツラゴ。

Elevation

button with a rectangular elevation effect

投稿者すらどこまでやったっけ?となっていましたが、今一度振り返ってみます。
どこまでやっていたかというと、全然進んでいなくサイコロのようなものを表示をして
いて、その様子をキャプチャとして残していました。使用方法とサンプルコードが一緒に
なっていて、最初のサンプルコードがそれに当たりますね。

んで、今日はどこからやるのということですが、その次で本タイトルにあたるところに
なります。どこ?となった方はこの後出てくる実行結果かもしくは本タイトルをマニュ
アルにでも検索をかけてもらえればと思います。

また、留意事項としては使用方法などは先週触れ込んでいますので、使い方わからんぞ
という方は先週の投稿もしくは該当マニュアルをご覧頂ければと思います。よって、ここ
では基本的な使い方とサンプルコードを全文載せるということはやりません。

これだけだとあまりにもぶっきらぼうなので、どこをフォーカスするかということをこれ
から述べていきます。このサンプルコードはElevationのあるなしを見ているだけなので、
全文載せることはないということはこういうことにも繋がってきます(甘え)。それがどこに
なるかというと、以下になります。

(略)

MDScreen:

    # With elevation effect
    RectangularElevationButton:
        pos_hint: {"center_x": .5, "center_y": .6}
        elevation: 18

    # Without elevation effect
    RectangularElevationButton:
        pos_hint: {"center_x": .5, "center_y": .4}

(略)

※コードは以下のように名前づけしております
xliii/rectangular_elevation.py

ほとんど略していますね。ですが、それほど凝視するところでもなく、注目ポイントは
それぞれのウィジェットでelevationプロパティを設置しているかどうかになります。
このことを踏まえてこの後の結果を見てもらえればと思います。

実行結果

ということでその様子をさっそく見てみます。

ボタンを押下したときの挙動は必要ないかと思いますので、画像キャプチャでお送り
しています(いらない報告)。

上の方がうっすら影があるのが分かりますよね。両方ともFakeRectangularEleva-
tionBehaviorを継承しているはずなのにそれほどくどくないのはなんでだ?と少々
疑問があるのですが、何かバージョンを更新したことによって進展があるのでしょうか。
こればっかりは合点がいってはいないですね。

create a circular button & 実行結果

おぉ?タイトルおかしいぞ?さては...

と思った方はとてもするどいです。読唇術ならぬ読心術を心得ています。

ここもそれほど変わったことをしていないので、コードを省略させて頂きます。
いや、そんなサボりたいだなんて、あなたおかしなことを言っていますね。まったく、、

と馬鹿なことを言っていますが、ざっと眺めてみてもそれほど難しいことをやっていない
のですらすら分かるかと思います。分からない方はコメント頂けると、それほど役立つか
どうか分からないサポートは出来るかと思います。

ということでこちらも実行してみます。ファイル名は以下のようになっています。

xliii/circular_elevation_button.py

このウィジェットもまたelevationが適用され、問題ない結果となっています。

Animating the elevation & 実行結果

もうここからはパターンが完成しました。

少しこちらは理由が異なるのですが、サンプルコードではKivyのAnimationが絡んで
います。こちらは端折ろうか迷いましたが、引用元を示すということと一応動くかどう
かは見ておかなければと思い、盛り込むこととしました。

Animationの方ですが、一応以下リンクを見て色々試してもらえれば少しは分かるよう
にはなるかと思われます。なので、一旦こちらを見ていただけると。

Kivy - Animation
https://kivy.org/doc/stable/api-kivy.animation.html

翻訳版はこちら(少々バージョンが古いことに注意!)
https://pyky.github.io/kivy-doc-ja/api-kivy.animation.html

ということでこちらも結果を見ていきます。

少し自身も挙動はどうなるんだろうと思いましたが、こういう結果になりました。押して
は離すということをタイミングをずらしながらした結果になるといってもよいですね。

もう少し丁寧に言うと、ゆっくり円が広がっているのは左クリックを押しっぱなしにした
ときで、すぐ広がるのは左クリックをすぐ離している結果になります。試してもらうのが
1番早いかもしれません。まだコードの方は100%理解しているわけではありませんが、
もしかすると挙動から理解できるのかもしれません。

Lighting position

個人的には少し気になったというか、今後の糧にしたいのでここは少し触れ込んでいき
ます(変わったパターン)。

まずは、サンプルコードから重要な点を抜粋して以下に掲載します。

xliii/lighting_position.py

(略)

KV = '''
MDScreen:

    ShadowCard:
        pos_hint: {'center_x': .5, 'center_y': .5}
        size_hint: None, None
        size: 100, 100
        shadow_pos: -10 + slider.value, -10 + slider.value
        elevation: 24
        md_bg_color: 1, 1, 1, 1

    MDSlider:
        id: slider
        max: 20
        size_hint_x: .6
        pos_hint: {'center_x': .5, 'center_y': .3}
'''

(略)

端的に言えば、スライダーの値をShadowCardに当てはめているということでしょうか。
スライダーを動かせば、それに応じてshadow_posプロパティの値が変化することとなり
ます。まぁ、これも結果の方を見てみましょう。その方が何倍も分かりやすいです。

実行結果

実行した様子が以下のようになります。

マニュアルからそれほど変わってないと言えばそう言えるのですが、このような結果
となっています。これでスライダーはなんなく使えますね(本末転倒)。

API - kivymd.uix.behaviors.elevation

まとめに入る前に先週ないしは今日使用したAPIについてまとめておきます。

class kivymd.uix.behaviors.elevation.CommonElevationBehavior(**kwargs)

冒頭にはこう記されています。

Common base class for rectangular and circular elevation behavior.

影を映す5つあったElevationクラスは元を辿るとここに行き着くよということで
しょうか。ちなみに5つのクラスには先週触れており、何なのかを知ることは良い
復習になるかもしれません。

elevation

Elevation of the widget.

書いてある通りですね。何度も出てきたので言うまでもなきですが、これを可変に
するときは、コード付きの情報(Note)として書かれてあります。興味のある方は
覗いてもらえれば。

radius

Radius of the corners of the shadow. This values represents
each corner of the shadow, starting from top-left corner and
going clockwise.

(略)

radius is an VariableListProperty and defaults to [0, 0, 0, 0].

今日においては、アイコンのところでしれっと出てきていましたね。このような仕様
となっています。端折っているところも気になる方は見てもらえればと思います。

shadow_pos

Custom shadow origin point. If this property is set, _shadow_pos will be ommited.

This property allows users to fake light source.

shadow_pos is an ListProperty and defaults to [0, 0].

これは最後のスライダーで出てきたプロパティになります。シャドウを可変に移動
したい場合に、使われます。

あとは他にも面白そうなプロパティがありますし、FakeRectangularElevationBeha-
viorあたりなんかは結構長文書かれていますが、思い切って端折っておきます。Fake~と
かは使われなくなるかもしれませんので掲載する必要もありませんが、興味のある方は覗い
てもらえればと思います。

まとめ

さていかがだったでしょうか。

比較的elevationプロパティだけだと、お手軽に見バエもよくなるしでアプリ作るとき
には優先度が高くなりそうな項目でした。

他にも魅力のあるプロパティがありそうですが、少し難易度が高い?と思わせる部分も。
デザインを凝って作りたいとかであれば他のプロパティを導入しても良いかもですね。

というわけで今週はここまでとします。来週はFocus篇となりますが、ここで再来週の
方を言っておきますと、とうとうファーストアプリのお出ましとなりそうです。以前
言っていたことは意図的に忘れたこととしていませんよ。

といっても、全然完成度は高くなく限定リリースとなりそうというのが前置きですが。。
良ければ見てやってください。ということで今日はこの辺りで。

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

参照

Behaviors » Elevation
https://kivymd.readthedocs.io/en/latest/behaviors/elevation/