kivyMDチュートリアル其の弍什陸 Components - Screen篇

はろう、はろう、みなさん。いかがお過ごしでしょうか。
すっかり梅雨も明けて、今度こそは夏らしいというか夏がやってきた感が半端
ないのではないでしょうか。体の方が溶けちゃいそうな気もします(大嘘)。

特にとりとめもないですが、Qiitaチームさんから(個人的な)待望のノート記法が
リリースされることとなりました！誰が誰に言ってるんだと言われそうな気もします
が個人的にはびっぐなニュースです。これでkivyMDチュートリアルでも大活躍する
予感しかありません。さっそく記法と使ってみた感じを下に記載しておきます。

記法

:::note info
これは特に意味のない情報です
:::

これは特に意味のない情報です

これ以外にもwarnやalertなど、警告や注意書きによって使いわけもできます。
ありがたや、ありがたや。

あと参照は以下になります。リリースノートとかはRSSフィードとかで設定して
おくと最新の情報が、入ってきていいかもしれませんね。
# 投稿者向けではありますが

ということでこれらもさっそく使っていきたいと思います！
まぁでも、今日は使いどころはなさそうですが・・

では、今日も元気にやっていきましょう。今日は予定どおりScreen篇になります。

Screen

特にサンプルコードがあるわけでもなく、ただただkivyより書きやすくなったよ
という案内があるのみですね。では、さっそく書きやすくなったところから。

Screen class equivalent. Simplifies working with some widget properties. For example:

初っ端から難しい表現ですね。直訳するとどういうことなんだろう。DeepLは
「スクリーンクラス相当。」という結果が返ってきていますが・・・
翻訳の限界でしょうか。

後半は分かりやすいですね。プロパティの記載が少なくなってますよーという案内
になるかと思われますが、ずいぶんスッキリしてますよね。また、ここでは他のLay
-outとかと書いてることが変わらないので、ここでの記載は割愛します。というか
マニュアルのままっちゃ、マニュアルのままではありますが。

画面遷移

ということで以上になりますー！お疲れ様でしたー！
という終わり方も出来るは出来るんですが、それだと投稿する意義が何もなくなる
ので追加調査しました。何をやったかはサブタイトルのままですが、以下にその結果
をまとめたいと思います。

今までは1画面しか取り扱ってなかったですよね。Carousel篇とかはその限りでは
ないっぽいですが、基本的には1画面でことが足りていました。以前から、遷移する
にはどうすればいいってばよと思っていたところですが、以下にてその様子を記載し
ておきたいと思います。コードとかも用意した(当たり前)ので、まずはそこから。

xxvi/mdscreenmanager.py

from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager #, Screen
from kivymd.uix.screen import MDScreen

KV = '''

ScreenManager:
    MenuScreen:
    NextScreen:

<MenuScreen>:
    name: "main"

    MDRaisedButton:
        text: "Goto Next Page"
        pos_hint: {'center_x':0.5,'center_y':0.5}
        on_release: app.root.current = 'next'

<NextScreen>:
    name: "next"

    MDRaisedButton:
        pos_hint: {'center_x':0.5,'center_y':0.5}
        text: 'Go back'
        on_release: app.root.current = 'main'
'''


# Declare both screens
class MenuScreen(Screen):
    pass


class NextScreen(Screen):
    pass


class TestApp(MDApp):

    def build(self):
        screen = Builder.load_string(KV)
        return screen

if __name__ == '__main__':
    TestApp().run()

後で見てもらえれば分かることですが、画面としてはシンプルになっています。
これだけでも分かる方はいらっしゃるかもしれませんが、UIとしてはボタン1つを
中央に用意しているだけになります。そのボタンを押すと画面遷移する形になり
ますね。

import

いつもと同じく、少し触れ込みたいと思います。

from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager #, Screen
from kivymd.uix.screen import MDScreen

目新しいところでいうと、ScreenManagerと(MD)Screenになりますかね。Screen
自体は初出ではないのですが、MDScreenとScreenManagerはお初となります。初め
まして。今回の画面遷移に対して肝である、ScreenManagerはこのようにScreenと
同様の形でインポートをします。

kv側

次に、kv側です。さっそく、こちらもコードの抜粋をします。

KV = '''

ScreenManager:
    MenuScreen:
    NextScreen:

<MenuScreen>:
    name: "main"

    MDRaisedButton:
        text: "Goto Next Page"
        pos_hint: {'center_x':0.5,'center_y':0.5}
        on_release: app.root.current = 'next'

<NextScreen>:
    name: "next"

    MDRaisedButton:
        pos_hint: {'center_x':0.5,'center_y':0.5}
        text: 'Go back'
        on_release: app.root.current = 'main'
'''

今日のメインディッシュでもあるところですが、画面遷移の方法ですね。呼び込んだ
ScreenManagerをトップに配置して、遷移したいレイアウトをこの配下に指定します。
MenuScreenおよびNextScreenがそれにあたりますね。

それぞれのレイアウトは先述の通りですが、ボタンを1つ配置しているのみになります。
注意点としては、nameパラメータを用意している点になりますね。これを指定していない
と、後述するコールバックでレイアウト同士がどこに行っていいの？と迷子になってしまい
ます。

で、そのコールバックがon_releaseプロパティにあたり、それぞれの異なるnameプロパティ
値を指定していますね。このようにすると、それぞれ遷移出来るようになります。あとはそれ
ぞれのレイアウトごとにクラスをそれぞれ用意することが必要です。ここでMDScreenを継承
する必要があるよーと依頼をしているわけですね。

それ以外はとくにとりとめがないので、一旦ここで触れ込みは完了ということで。

なお、めちゃくちゃ自分で分かったようにあたかも自分で作っている体を装っていますが、
これは以下のリンク先の動画で学びました。うへー、すいません。ですが、こちらはここで
記した以上に丁寧に説明してもらっているので、必見です。すべて英語で話されていますが。
# あまりにもわからん!となった場合は字幕をと言いたいところですがなぜか韓国語しか
　ありません・・・分かる方はそれで・・・

あとは、kivy側のマニュアルも少し拝借しています。気になる方はそちらの方も見てもら
えれば。こちらは上記と少し異なるコードになりますが、これもGitHubには載せているので
参考程度に見てもらえれば。

結果

さくさく進んだ気がしますが、結果の方に移りたいと思います。
みんな、こちらを早く見たいですよね。違います...?

実行直後はこのようになります。これだけだと、何の変哲もありませんよね。

で、このボタンを押すと、

このようになります。ほんと画像だけだと全然伝わりませんよね。ですが、ちゃんと
遷移はされるようになっています。

少し注意点というか、留意事項にもなりますが遷移の仕方が少し微妙な形となっています。
やり方がまずいだけならいいのですが、現状Go backボタンを押したときに画面左方向に
遷移がされず、一定して画面右方向に遷移される形となります。少し補足すると以下のよ
うな形となるでしょうか。

MenuScreen (ボタン押下)-> NextScreen -> MenuScreen -> NextScreen -> ...

これはスマホアプリの設計だと、若干ダメな気もします。先程の画面に戻るというイベント
がある以上、スマホの遷移としては逆方向に移動することがすでにセオリーとも言えるかも
しれません。どうしてもやるとなると、ツールバーとかで代替することになるでしょうか。
時間があれば、少し継続して調査してみることとします。

番外編

いつもならまとめに入るところですが、今回は得られたというか自分が知らなかっただけの
ことで、周知事項があるので少し延長をしたいと思います。

以下の参照で全て分かることですが、実行するときに画面サイズを実際のデバイスのように
指定出来たのですね。知らなかった・・・

例えば、上記の例だと以下のように指定するとキャプチャのように自動的にサイズを
測ってもらえます。

python main.py -m screen:droid2

さらに言えば、以下のようにscreenに何も指定しないと以下のようにヘルプのような
お助け表示がされます。

$ python mdscreenmanager.py -m screen

Module usage: python main.py -m screen:deviceid[,orientation]

Available devices:

Device ID    Name                   Width    Height   DPI   Density 
onex         HTC One X              1280     720      312   2       
one          HTC One                1920     1080     468   3       
onesv        HTC One SV             800      480      216   1.5 
...

droid2とかはデバイスIDだったのですね。種類も豊富で、私の環境では50個くらい
ありました。あとは、デフォルトだとなぜか横向きなので、縦表示にしたい場合は
カンマ区切りでportraitを付け加えれば良さそうです。

python mdscreenmanager.py -m screen:droid2,portrait

で、でかい。。少し小さくできない?という方のためにsizeで指定出来るらしいですね。
タブレットとかこのスマホだとどんな感じになるだろうかみたいなときには、重宝しそう
な機能です。よかったらオリジナルの指定方法を探してみてはいかがでしょうか。

まとめ

はい、ではまとめに入ります！

少しマニュアルとは毛色が異なっていますが、以前もレイアウト篇で散々やったしで
トリッキーなことをやってみました。そっちはどんなことやったの？という方はそちら
を見てもらうと助かります。

では、今日はここまで。来週は順番通り、Selection Controls篇となります。来週は
連休がありますが、今のところは特別篇の予定はありません。気分上々であれば、突発的
に何かやるかもしれませんが、今のところはなんとも言い難いですね。。ということで、
今日も見て頂きありがとうございました〜。

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

参照

Components » Screen
https://kivymd.readthedocs.io/en/latest/components/screen/

DeepL 翻訳
https://www.deepl.com/ja/translator

Kivy Tutorial 14 - Changing Screens using ScreenManager | KivyMD
https://www.youtube.com/watch?v=u3Ue6IlzbOE

kivy Screen
https://kivy.org/doc/stable/api-kivy.modules.screen.html
kivy Screen Manager
https://kivy.org/doc/stable/api-kivy.uix.screenmanager.html