Kivy 画面をスライドさせる（Python Kivyの取説・使い方第９回）

画面をスライドさせる方法

今回は画面のスライドを作ってみます。Carousel（ウェジットの１つ）を使います。
Carouselとは、直訳でメリーゴーラウンドや回転式コンベヤーという意味です。スライド間でスワイプして水平または垂直に移動できます。

f:id:Start_python:20191217211032g:plain

まずは基本的なCarouselを作ってみます。

プログラムのコード

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.carousel import Carousel


class MainApp(App):
    def build(self):
        layout = Carousel(direction='right')
        for i in range(3):
            button = Button(text='Button ' + str(i))
            layout.add_widget(button)
        return layout


MainApp().run()

f:id:Start_python:20191217211139g:plain

解説

layout = Carousel()

変数layoutにCarouselウェジットを作ります。

direction='right'

スライドされる方向を指定します。right、left、top、bottomが指定できます。省略すると「right」になります。

add_widget(button)

add_widgetでボタンを追加しています。（今回は「Button 0」から「Button 3」の４つです）

今度は写真（画像）でCarouselを作ってみます。

プログラムのコード

from kivy.app import App
from kivy.uix.carousel import Carousel
from kivy.uix.image import Image


class MainApp(App):
    def build(self):
        layout = Carousel(direction='right')
        image = Image(source='./image/IMG_1.jpg')
        layout.add_widget(image)
        image = Image(source='./image/IMG_2.jpg')
        layout.add_widget(image)
        image = Image(source='./image/IMG_3.jpg')
        layout.add_widget(image)
        image = Image(source='./image/IMG_4.jpg')
        layout.add_widget(image)
        image = Image(source='./image/IMG_5.jpg')
        layout.add_widget(image)

        return layout


MainApp().run()

f:id:Start_python:20191217211358g:plain

なぜか縦向きの写真が横を向いてしまっています。調べるとなんとなく原因はわかりましたが時間がかかりそうなので次回にします。

最後に、kvファイルで同じように写真（画像）でCarouselを作ってみます。

プログラムのコード

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.carousel import Carousel
from kivy.uix.image import Image

class MainScreen(BoxLayout):
    pass

class TestApp(App):
    def build(self):
        self.title = 'テスト'

        return MainScreen()

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

kvファイル（test.kv）

<MainScreen>:
    Carousel:
        #direction: 'right'
        direction: 'bottom'
        loop: True
        Image:
            source: './image/IMG_1.jpg'
            size: self.texture_size
        Image:
            source: './image/IMG_3.jpg'
            size: self.texture_size
        Image:
            source: './image/IMG_5.jpg'
            size: self.texture_size

f:id:Start_python:20191217211440g:plain