【初心者向け】KivyによるWindowsアプリ作成11 画面遷移の実装方法その2

今回は前回から引き続き、ScreenクラスとScreenManagerクラスを活用することにより、画面遷移処理を実装していきたいと思います。

なお、前回、実装のステップを5段階で示しましたが、今回は③~⑤を対象に実装していきます。

①ログイン画面のクラス定義(済)

②ScreenManagerのインスタンス化とログイン画面登録(済)

③経費入力画面(ログイン後の画面)のクラス定義(対象)

④ScreenManagerへの経費入力画面登録(対象)

⑤ログインボタン押下時の切り替え処理実装(対象)

コード全量は必要に応じてGitHubよりダウンロード下さい。

GitHub

<スポンサーリンク>

画面遷移の実装(前回の続き)

③経費入力画面(ログイン後の画面)のクラス定義

では早速、ログイン画面から遷移する先の経費入力画面を作成しましょう。

今回のテーマは画面遷移の実装ですので、画面の作りこみは次回以降に行うとし、ここでは1つのLabelのみを表示するシンプルな画面を作成したいと思います。

まずはPythonファイル上、Screenクラスを継承した「InputScreen」という名称のクラスを、前回追加したLoginScreenクラスの下に定義します。

class LoginScreen(Screen):
    pass

class InputScreen(Screen): #このクラスを追加
    pass

続いて、Kvファイル側にもこのクラス(Widget)を追加し、Labelのみ表示するように設定します。ここではKvファイルの最後にこのWidgetを追加します。

<InputScreen>:
    Label:
        text: "input"
        color: 1, 1, 1, 1

Labelの色について、Kvファイル上でLabelの共通属性設定の箇所にて薄暗い色にしていますので、見やすい色になるように色指定を加えています。

これで、経費入力画面の作成は完了です。

④ScreenManagerへの経費入力画面登録

引き続き、ScreenManagerへ、先ほど作成した画面を登録します。登録方法は前回のログイン画面登録時と全く同様です。

class ExpenseApp(App):
    def build(self):
        sm.add_widget(LoginScreen(name="login"))
        sm.add_widget(InputScreen(name="input")) #この行を追加
        return sm

⑤ログインボタン押下時の切り替え処理実装

それでは最後に、今回の肝である、ボタンを押した際に画面を切り替えるという処理を実装します。

まずは、ボタンが設置されているLoginScreenクラスについて、Pythonファイル中のこのクラス内に、ボタンが押された際に実行したいメソッドを定義します。メソッド名は、「loginButtonClicked」としておきます。

class LoginScreen(Screen):
    def loginButtonClicked(self): #passに替えてこのメソッドを記述
        sm.current = "input"

defから始まる行にてメソッドloginButtonClickedを定義していますが、このメソッドが呼ばれたときに行う処理はその次の1行です。

smとは、ScreenManagerインスタンスを格納した変数でしたが、ScreenManagerインスタンスには「表示したい画面」を表す属性として「current」というものが用意されています。そして、このcurrentに各Screen(を継承したクラス)をインスタンス化した際に付けた名前を指定すると、そのScreenに表示を切り替えることができます

つまり「sm.current = “input”」という記述は、名称がinputであるインスタンス、つまり、InputScreenインスタンスに表示を切り替えることを意味しています。

さて、ボタンを押した際に実行したい処理の定義はこれでできました。あとは、ボタンが押された時にこのメソッドが呼ばれるようにするだけです。

そのためには、KvファイルのButton Widgetの属性に「on_press」という属性を指定します。

<LoginScreen>:
    BoxLayout:

#省略

                Button:
                    text: "ログイン"
                    color: 1, 1, 1, 1
                    on_press: root.loginButtonClicked() #この行を追加

「on_press: メソッド名」という記述で、この属性が設定されたボタンが押された時に呼び出すメソッドを指定することができます。また、「root」という表現は、この属性が設定されている箇所の最上位のクラスという意味です

したがって、root.loginButtonClicked()で、このon_press属性がぶら下がっている最上位のクラスであるLoginScreenクラスの、loginButtonClickedメソッドを実行するという意味になります。

プログラム実行

それではここで、プログラムが期待通りの動作をするか、試しに実行してみましょう。

まず、プログラムを起動すると、ログインウインドウが表示されます。ここまでは前回までと全く同様ですね。

では次に、ログインボタンを押してみて下さい。プログラムが正しく作成されていれば、以下のように画面が切り替わるはずです。

終わりに

前回、今回の2回で、ScreenとScreenManagerを使った画面遷移の方法を説明しました。この方法を知っておけば、あとは画面がいくら増えようとも同じように追加ができるはずです。

さて、次回のテーマですが、ログイン画面でログインに失敗した場合にエラーメッセージを表示するという機能の追加を保留にしていましたので、この部分の対応を進めて行きたいと思います。

<スポンサーリンク>

シェアする

フォローする