[Kivy] Carouselの設定

2024.01.09

Carouselについて

　Carouselは、Widgetで作成した画面（スライド）をスワイプやボタン操作で切り替えることができるWidgetです。Accordionのようにタイトル部分がないので画面を有効に使用でき、スライドの移動が容易という利点があります。今回は、Carouselを使用したスライドの表示や設定の方法について紹介します。
　※　サンプルプログラムにある動画で、Carouselの動作が確認できます。

今回紹介するの内容
　・　Carouselにスライドを追加する
　・　Carouselのスライドの並びを指定する
　・　Carouselのループを指定する
　・　Carouselの画面移動をボタンで指定する
　・　Carouselのスライドを移動する条件を設定する

Carouselの設定

Carouselにスライドを追加する

　Carouselへスライドを追加するのには、以下のようにCarousel:の下に1段下げてWidgetを記入します。Widgetは、記入した順番にCarouselにスライドとして追加されます。


<CarouselTestWidget>:
    Carousel:
        id: carousel
        size: root.size
        direction: 'right'
        loop: True

        BoxLayout:
            padding: 20
            spacing: 10

Carouselのスライドの並びを指定する

　Carouselでのスライドの並びは、プロパティdirectionによって指定します。directionに指定可能な値は、’right'(既定値)、’left’、’top’、 ‘bottom’であり、’right’を指定した場合は、2 番目のスライドは最初のスライドの右側に配置されます。

<CarouselTestWidget>:
    Carousel:
        id: carousel
        size: root.size
        direction: 'right'
        loop: True

Carouselのループを指定する

　Carouselの最後のスライドでさらにスワイプした場合の処理は、プロパティloopによって指定します。loopがTrue の場合は、最後のページでさらにスワイプすると最初のページに戻ります。 False の場合は、最後のページに残ります。

<CarouselTestWidget>:
    Carousel:
        id: carousel
        size: root.size
        direction: 'right'
        loop: True

Carouselの画面移動をボタンで指定する

　Carouselでのスライドの変更は、イベントload_previous()やload_next(mode=’next’)、load_slide()によりおこなうことができます。

　load_previous(): １つ前のスライドに移動する。
　load_next(mode=’next’): １つ後のスライドに移動する。
　load_slide(): 指定したスライドに移動する。

            Button:
                text: 'Previous'
                on_press: root.ids.carousel.load_previous()

            Button:
                text: 'Button1'
                on_press: print('Button1 pressed')

            Button:
                text: 'Next'
                on_press: root.ids.carousel.load_next(mode='next')

　イベントload_slide()により３つ目のスライドに移動する場合は、以下のように記入します。プロパティslidesはカルーセル内のスライドのリストにしたものであり、型はListPropertyで、読み取り専用です。
　※　サンプルプログラムでは使用していません。

                on_press: root.ids.carousel.load_slide(root.ids.carousel.slides[2])

Carouselのスライドを移動する条件を設定する

　Carouselのスライドの移動条件は、プロパティscroll_distanceとscroll_timeoutにより指定ができます。

　scroll_distance：　スライドを移動するためにスワイプさせる距離
　　　　　　　　　　（ピクセル数で指定：デフォルト値は20(dp)：NumericProperty ）
　scroll_timeout：　scroll_distanceで指定した距離を移動するまでの許容時間
　　　　　　　　　　（ミリ秒：デフォルト値は200：NumericProperty ）を指定します。

　scroll_timeoutの時間内にscroll_distanceで指定した距離をスワイプした場合に、Carouselはスライドを移動します。

<CarouselTestWidget>:
    Carousel:
        id: carousel
        size: root.size
        direction: 'right'
        loop: True
        scroll_distance: 40
        scroll_timeout: 400

※　サンプルプログラムでは使用していません。

サンプルプログラム

　サンプルプログラムを実行すると中央に”Button1″のある画面が表示されます。画面でスワイプしたり、”Previous”や”Next”ボタンを押すと画面が切り替わります。

　各画面の”Button *”(*は数字)ボタンを押すと、ターミナルにメッセージを表示します。

#:kivy 2.2

<CarouselTestWidget>:
    Carousel:
        id: carousel
        size: root.size
        direction: 'right'
        loop: True

        BoxLayout:
            padding: 20
            spacing: 10

            Button:
                text: 'Previous'
                on_press: root.ids.carousel.load_previous()

            Button:
                text: 'Button1'
                on_press: print('Button1 pressed')

            Button:
                text: 'Next'
                on_press: root.ids.carousel.load_next(mode='next')

        BoxLayout:
            padding: 20
            spacing: 10

            Button:
                text: 'Previous'
                on_press: root.ids.carousel.load_previous()

            Button:
                text: 'Button2'
                on_press: print('Button2 pressed')

            Button:
                text: 'Next'
                on_press: root.ids.carousel.load_next(mode='next')

        BoxLayout:
            padding: 20
            spacing: 10

            Button:
                text: 'Previous'
                on_press: root.ids.carousel.load_previous()

            Button:
                text: 'Button3'
                on_press: print('Button3 pressed')

            Button:
                text: 'Next'
                on_press: root.ids.carousel.load_next(mode='next')
# -*- coding: utf-8 -*-

import os
import re
import kivy

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.config import Config

kivy.require('2.2.0')

# 画面サイズの指定
Config.set('graphics', 'width', '500')
Config.set('graphics', 'height', '400')

Builder.load_file(os.path.dirname(__file__) + "/interface.kv")


class CarouselTestWidget(Widget):

    def __init__(self, **kwargs):
        super(CarouselTestWidget, self).__init__(**kwargs)


class CarouselTestApp(App):
    def __init__(self, **kwargs):
        super(CarouselTestApp, self).__init__(**kwargs)
        self.title = 'Carousel Test'

    def build(self):
        return CarouselTestWidget()


if __name__ == '__main__':
    app = CarouselTestApp()
    app.run()
タイトルとURLをコピーしました