スクリーンマネージャ - tediousdays’ blog

前回の記事を承けて、スクリーンマネージャのことを書きます。

スクリーンマネージャは、複数の画面 (スクリーン) を保持し、切り替えて表示したいときに使います。複数画面を持つアプリならば、スクリーンマネージャ系ウィジェットをルートウィジェットにするのが都合がよいでしょう。

今回は最も代表的なスクリーンマネージャ系ウィジェットである、ScreenManagerを紹介します。スクリーンマネージャ系ウィジェットには、このほかAndroid OS 風の ActionBar や紙芝居風のCarousel があります。このうち Carousel はシンプルでわかりやすいので、慣れないうちはこれを用いるのもよいかもしれません。

Kivyプログラミング Pythonで作るマルチタッチアプリ [ 久保　幹雄 ]

価格:3,456円
(2018/5/6 16:31時点)
感想(0件)

次のソースコードは、5つの画面を保持します。
それぞれの画面はボタン1つのみから成り、ボタンを押すと次の画面に切り替わります。

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.screenmanager import ScreenManager, Screen

class MyButton(Button):
    def on_press(self):
        self.parent.parent.current = self.parent.parent.next()
        # self.parent: Screen object
        # self.parent.parent: ScreenManager object

class screenmanagerApp(App):
    def build(self):
        sm = ScreenManager()
        for i in range(5):
            btn = MyButton(text='Button '+str(i), font_size=36)
            sc = Screen(name=str(i))
            sc.add_widget(btn)
            sm.add_widget(sc)
        return sm

screenmanagerApp().run()

起動直後の画面。
f:id:tediousdays:20180506102449p:plain

ボタンを押すと、アニメーション効果とともに画面が切り替わる。
f:id:tediousdays:20180506102556p:plain

ScreenManager は、Screenオブジェクトのみを子に持つことができます。このScreenは RelativeLayout というレイアウト系クラスのサブクラスですが、詳しくは省略します。このScreen に更に子を持たせて使うとよいでしょう。上の例では MyButton のみを子として持たせていますが、実際には BoxLayout など他のレイアウトを子として持たせ、GUIを構築していくことになるでしょう。

ですので、表示したいウィジェットを直接ScreenManager の子にしてはいけません。必ず Screen をはさんでください。 そして Screen には名前をつけておくと (nameプロパティ)、画面を切り替えるときに役立つかもしれません。(お茶を濁した書き方ですが後で書きます。)

画面を切り替える

ScreenManager の current プロパティに、切り替え先画面の name プロパティの値を渡します。

sm.current = '2'

のようにします。

上の例では、現在の画面の「次」の画面の name プロパティを返す next メソッドを用いています。

self.parent.parent.current = self.parent.parent.next()

なおここでの self は MyButton オブジェクト、その親は Screen オブジェクト、さらにその親が ScreenManager オブジェクトであることに注意しましょう。

切り替えのアニメーション効果を設定する

全部で8通りのアニメーション効果が準備されていて、それぞれについて細部 (スライドの方向など) を設定することができます。たとえば WipeTransition という効果を用いるには次のようにします。

from kivy.uix.screenmanager import WipeTransition
sm = ScreenManager(transition=WipeTransition())

詳しくは公式ドキュメンテーション Screen Manager — Kivy 1.10.1.dev0 documentation の Changing transitions をごらんください。

しかし...

GUI構築の基本的な考え方というのは、おおむねここまで述べてきた通りです。ウィジェットツリーを頭の中に描き、それを構築すること。GUIのおおまかなデザインを作れるようになったら、次はタッチなど各種イベントに対する処理をどのようにバインドするかを学んでいく必要があるのですが、その前に、こう思った人もいるのではないでしょうか?

ウィジェットツリー作るの面倒くさくね!? コードも見づらいし!

ウィジェットツリーを作るには、ウィジェットを生成し、それらを親ウィジェットに add_widget でつなげ、必要があれば初期値を渡す。またウィジェットクラスのインポートもしなければならない。確かに面倒です。

しかしKV言語という独自言語を使えば、より直感的にウィジェットツリーを構築し、コードを大幅に簡略化することも可能です。

次回はこのKV言語について取り上げたいと思います。