余寒の候、いかがお過ごしでしょうか。
本格的な寒さが身にしみる頃、風邪をひいていませんか。
[引用元]
はい、ということで時候の挨拶も踏まえながら、今週もKivyMDのお時間がやって
参りました。余寒って今の季節にぴったりな熟語ですよね。投稿者はまんまと風邪
にやられていますが、どうかみなさんは体調管理のほどを。健康第一。
まぁちょっとくらい風邪ひいたところで、この投稿は止めません。続けてくれ!とは
言われないですがw ほぼ自己満足の世界観です。というどうでも話もありますが、今週
はというと、タイトルの通りRipple篇となります。もうあと3回。。いや投稿も止めま
せんし、なんかEffects章なんかもいつの間にか出来ているしで、やることだらけです。
まぁその話は再来週くらいにしてもよかとですね。では、今週も元気にレッツラゴ。
Ripple
冒頭にはこのような一文が記載されています。
Classes implements a circular and rectangular ripple effects.
はい、きましたー！って感じですね。もうBehaviors章については切り離せないもの
になります。あとはRipple EffectsはCircularとRectangularの2つがあるという
ことも記載があります。
もう少し進んでみましょう。続いては以下の一文になります。
To create a widget with сircular ripple effect, you must create
a new class that inherits from the CircularRippleBehavior class.
あー、あー、もうみなまで言うな、分かった分かったという声が聞こえてきそうですね。
聞こえない?、ではそれを私の声だと思って聞いてみてください。
ということでこれも次のサンプルコードを見た方が早そうですね。マニュアルもさっさと
見やがれ(誇張表現)ということを以下のように言っています。
For example, let’s create an image button with a circular ripple effect:
Example
ということでさっそくコードの方を見てみます。ここで注意点となりますが、マニュアル
ではコードが2つありますが、ここでは便宜上コードを一緒にしています。あとは、指定の
画像が表示できなかったので、画像の参照先を変更しています。みなさんも、何か良い画像
などあれば、それに変更してみてはいかがでしょうか。
from kivy.lang import Builder
from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.image import Image
from kivymd.app import MDApp
from kivymd.uix.behaviors import CircularRippleBehavior, RectangularRippleBehavior, BackgroundColorBehavior
KV = '''
MDScreen:
CircularRippleButton:
source: "./photo/genba_neko.png"
size_hint: None, None
size: "250dp", "250dp"
pos_hint: {"center_x": .3, "center_y": .5}
RectangularRippleButton:
size_hint: None, None
size: "250dp", "50dp"
pos_hint: {"center_x": .7, "center_y": .5}
'''
class CircularRippleButton(CircularRippleBehavior, ButtonBehavior, Image):
def __init__(self, **kwargs):
self.ripple_scale = 0.85
super().__init__(**kwargs)
class RectangularRippleButton(
RectangularRippleBehavior, ButtonBehavior, BackgroundColorBehavior
):
md_bg_color = [0, 0, 1, 1]
class Example(MDApp):
def build(self):
#self.theme_cls.theme_style = "Light"
return Builder.load_string(KV)
Example().run()
今までKivyMDのコードなりを見てこられた方は簡単だわ!と思われる方もいらっ
しゃると思いますが、全然初見っす、うっすという方のために触れ込んでおきます。
まず、長々と書いてはいますが、初見でも慣れていなくてもそれほど難しいコード
ではなく、はっきりと分かりやすいです。基本的な設計としては、マニュアルのGet-
ting Startedの最初のコードとほとんど同じものを持っています。
なにが違うかというと、Buttonを使っていてカスタマイズしていることが決定的な
ところになります。これについては分からんとなっている方は、拙ページもしくは
該当マニュアルをご覧いただければと思います。
あとは、いやこれ初めて見たけど分からんぞという方のためにも少し触れ込んで
おきます。多分これだけ見てると理解は出来るだろうなという部分を抜粋しておき
ます。
KV = '''
MDScreen:
CircularRippleButton:
source: "./photo/genba_neko.png"
size_hint: None, None
size: "250dp", "250dp"
pos_hint: {"center_x": .3, "center_y": .5}
(略)
'''
class CircularRippleButton(CircularRippleBehavior, ButtonBehavior, Image):
def __init__(self, **kwargs):
self.ripple_scale = 0.85
super().__init__(**kwargs)
まずKV側については、カスタマイズされたボタンウィジェットを定義しているだけ
になります。Imageクラスを継承しているので、画像を読み込むことも可能にして
います。
肝としては下のCircularRippleButtonクラスの定義でしょうね。冒頭でもあった
通り、CirCularRippleBehaviorを継承していることにより、このRipple動作を
使うことを可能にしています。ripple_scaleプロパティについては後で出てくる
のでここでは詳細に触れません。
一部端折ったRectangularRippleButtonについても同様です。これを踏まえて
そちらを見てみるとあぁそういうことだったんだなということが分かるかと思います。
結果
ということで論をあれやこれや言うことも大事ですが、結果の方を見てみるのもより
大事です。論より証拠、花より団子なんだか似ている気がしていませんか。はい、
すみません、言っていることは自分でも良くわかりません。
上記が各ウィジェットを3回ずつ押してみた挙動になります。円形にまたは矩形に影が
広がっていることが分かるかと思います。あと、いってはいなかったことですが、なんか
ダークモードだとホラーみたいに怖かったので、Lightテーマに変更しています。
API - kivymd.uix.behaviors.ripple_behavior
まとめに入る前に、使用したAPIについてまとめておきます。
class kivymd.uix.behaviors.ripple_behavior.CommonRipple
こちらについては、冒頭に2つRipple Effectの種類があると申し上げましたが、
それをまとめるクラスといった方がいいでしょうか。以下にはこのように記載が
あります。
Base class for ripple effect.
ripple_scale
Ripple effect scale.
ripple_scale is an NumericProperty and defaults to None.
先程CircularRippleButtonクラスで定義していたプロパティが出てきましたね。
BaseクラスなのでRectangleRippleの方でも使うことが出来ます。やったね。
画像や、円形・矩形のサイズに応じてどこまで影を広げるかということになります
でしょうか。
ただし、デフォはNoneとありますが、1ではないのかなー。矩形の方はサイズ全てに
広がっていましたもんね。
class kivymd.uix.behaviors.ripple_behavior.RectangularRippleBehavior
Class implements a rectangular ripple effect.
ripple_scale
See ripple_scale.
ripple_scale is an NumericProperty and defaults to 2.75.
と思ってたらなんと、上書きでこのように決めていたのですね。それにしても2.75
って。。試しに1で設定してみると、この2.75にしていることが分かりました。やって
みると面白いので、ぜひみなさんには見ていただければと思います。まさに便宜上なん
だなとw
class kivymd.uix.behaviors.ripple_behavior.CircularRippleBehavior
Class implements a circular ripple effect.
ripple_scale
See ripple_scale.
ripple_scale is an NumericProperty and defaults to 1.
こちらについても同様のプロパティがあり、デフォは1のようです。まぁそりゃそうだ
ろうなとw
まとめ
はい、いかがだったでしょうか。
これまでも何回か出てきたとは思うので、それほど目新しいものとはならなそうですが、
使ってみるとよりマテリアルなふるまいを提供できそうです。というか、こういうの使わ
ないとなると、なんでマテリアル使ってんのよと言われそうな。。
ということで、今週はこれくらいにしておこうかなと思っています。来週は引き続きの
ToggleButtonとなります。来週はちゃんと動いてくれるといいな。ということで来週
も元気にお会いしましょう〜。
それでは、ごきげんよう。
参照
Behaviors » Ripple
https://kivymd.readthedocs.io/en/latest/behaviors/ripple/