Kivy学習 #02：複数のスクリーン間を遷移する構造のアプリ

UdemyのThe Ultimate hands-on KivyというコースでAndroidアプリケーションを開発するべく学習を進めてます。今回はスクリーンマネージャーの下に複数のスクリーンを配置・ボタンを押すたびに画面遷移するという構造のアプリが制作できたので、自分用のメモを兼ねて記録を残しておきます。

The Ultimate hands-on Kivy | Tame your Kivy Python skills!

main.py

from kivy.app import App
from kivy.core.window import Window
from kivy.uix.widget import Widget
from kivy.lang import Builder


Window.size =(480, 720)
class MainInterface(Widget):
    def Start_press(self, img, sm):
        img.source = "Pressed_Start_btn.png"
        #スクリーンの移動方向をスクリーンの場所次第で変える
        if(sm.current == "background_2" or "background_3"):
            sm.transition.direction = "right"

        sm.current = "background_1"

    def Stats_press(self, img, sm):
        img.source = "Pressed_Stats_btn.png"
        if (sm.current == "background_1"):
            sm.transition.direction = "left"
        if (sm.current == "background_3"):
            sm.transition.direction = "right"
        sm.current = "background_2"

    def Likes_press(self, img, sm):
        img.source = "Pressed_Likes_btn.png"
        if(sm.current == "background_1" or "background_2"):
            sm.transition.direction = "left"
        sm.current = "background_3"

    def Start_release(self, img):
        img.source = "Start_Btn.png"
    def Stats_release(self, img):
        img.source = "Stats_Btn.png"
    def Likes_release(self, img):
        img.source = "Likes_Btn.png"

class MyApp(App):
    def build(self):
        return Builder.load_file('test.kv')

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

Test.kv

#まずは画像の表示に使うクラスを定義する

<MyImage01@Image>:
    source: "Background_1.png"
<MyImage02@Image>:
    source: "Background_2.png"
<MyImage03@Image>:
    source: "Background_3.png"
<MyImageTopBar@Image>:
    source: "Top_Bar.png"
    size: 480, 135
    pos: 0, 720-135

<MyImageStartBtn@Image>:
    #ボタンの中心をペアレントの中心に設定する
    #背景は透明に設定する
    source: "Start_Btn.png"
    center_x: self.parent.center_x
    center_y: self.parent.center_y

<MyImageStatsBtn@Image>:
    source: "Stats_Btn.png"
    center_x: self.parent.center_x
    center_y: self.parent.center_y

<MyImageLikesBtn@Image>:
    source: "Likes_Btn.png"
    center_x: self.parent.center_x
    center_y: self.parent.center_y


#ルートクラスを記述

MainInterface:
<MainInterface>:

    #スクリーンマネージャー下に3つのスクリーンを配置
    ScreenManager:
        id: sm
        size: root.width, root.height
        Screen:
            name: "background_1"
            MyImage01:
        Screen:
            name: "background_2"
            MyImage02:
        Screen:
            name: "background_3"
            MyImage03:

    #イメージと同じ場所にボタンを3つ配置する
    MyImageTopBar:

    Button:
        size: 112.5, 75
        pos: root.width/2 - 168.75, root.height -100
        background_color: 1,1,1,0

        #ボタンを押したら画像・スクリーンを変更する関数にパースする
        on_press: root.Start_press(Start_img, sm)
        on_release: root.Start_release(Start_img)

        MyImageStartBtn:
            id: Start_img

    Button:
        size: 112.5, 75
        pos: root.width/2 - 56.25, root.height -100
        background_color: 1,1,1,0
        on_press: root.Stats_press(Stats_img, sm)
        on_release: root.Stats_release(Stats_img)

        MyImageStatsBtn:
            id: Stats_img

    Button:
        size: 112.5, 75
        pos: root.width/2 + 56.25, root.height -100
        background_color: 1,1,1,0
        on_press: root.Likes_press(Likes_img, sm)
        on_release: root.Likes_release(Likes_img)

        MyImageLikesBtn:
            id: Likes_img

講座では画像の表示にボタンに直接画像のソースを指定することで画像つきボタンを実装していたのですが、なぜか自環境ではうまく行かなかったので先に画僧をつかうクラスを定義して参照するという手法を使っています。

レスポンシブ問題

画像のサイズをハードコーディングしてしまうとこのように可変サイズに対応できないので、ボタンはルートとなるスクリーンに依存して可変するとか、そういうデザインにしないとダメですね。実際にアプリをする際はこういう所に気を付けてみようと思います。

後は気晴らしに絵を描いて、ゲームで遊んで寝ます。ありがとうございました！