Python kivy 複数の画像をボタンで切り替えて表示する方法

まくまく

PythonのGUIアプリ作成ライブラリ kivyを用いて、複数の画像を切り替えて表示させてみようと思います。

コンテンツ

1 画像の切り替え
- 1.1 処理の流れ
2 サンプルプログラム
- 2.1 pyファイル
- 2.2 kvファイル

画像の切り替え

プログラムを実行すると、このようなウインドウが立ち上がります。上部は画像表示エリア、下部はボタンを配置しています。

左側のボタンを押すと、天丼の画像を表示。

中央のボタンではホルモン丼。

右側のボタンを押すと、カレーの画像を表示することができました。

処理の流れ

kivyでウインドウを作成、上部の画像表示エリアはボックスレイアウト、下部のボタン配置エリアはグリッドレイアウトです。

それぞれのボタンに「on_press: root.press()」というボタンイベントを設定して画像を読み込んでいます。

とりあえず見た目としては画像の更新ができているようで良しとしたいですが、表示エリアを更新しているのか、もしかしたら単なる上書きになっているかもしれません。というようなことを、記事を書きながらふと思ってしまいました。

サンプルプログラム

pyファイル

#ライブラリのインポート
from kivy.app import App
from kivy.config import Config
from kivy.uix.widget import Widget
from kivy.lang import Builder

#ウインドウの幅と高さの設定
Config.set('graphics', 'width', 600)
Config.set('graphics', 'height', 500)
#1でサイズ変更可、0はサイズ変更不可
Config.set('graphics', 'resizable', 1)
#kvファイルの読み込み
Builder.load_file("images.kv")

class MyLayout(Widget):
    def press1(self):
        self.ids.my_image.source = "photo1.jpg"

    def press2(self):
        self.ids.my_image.source = "photo2.jpg"

    def press3(self):
        self.ids.my_image.source = "photo3.jpg"

class DispimageApp(App):
    def build(self):
        self.title = "window"
        return MyLayout()

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

kvファイル

#ファイル名: images.kv
<MyLayout>
    id: my_widget
    BoxLayout:
        orientation: "vertical"
        size: root.width, root.height
        padding: 20
        spacing: 20

        Image:
            id: my_image
            source: ""
            size_hint: (1, 4)

        GridLayout:
            cols:3
            
            Button:
                text: "Delicious TENDON!!"
                pos_hint: {"center_x": 0.5}
                size_hint: (1, 1)
                on_press: root.press1()
                
            Button:
                text: "Delicious HORUMON!!"
                pos_hint: {"center_x": 0.5}
                size_hint: (1, 1)
                on_press: root.press2()
            
            Button:
                text: "Delicious CURRY!!"
                pos_hint: {"center_x": 0.5}
                size_hint: (1, 1)
                on_press: root.press3()