Kivy : scrolling horizontal

Introduction

Dans une page web, un tel composant s’appelle un carrousel. Il permet de faire passer les éléments de la droite vers la gauche ou inversement. Dans Kivy, ce widget n’existe pas en tant que tel, mais un composant plus générique est disponible. Reste à le configurer correctement.

source de l’image : http://www.androidpatterns.com/uap_pattern/carousel

Tout est dans le kv

Le « main.py » de l’application de démo est très classique :

import kivy
kivy.require('1.8.0')

from kivy.config import Config
Config.set('graphics', 'width', '450')
Config.set('graphics', 'height', '800')

__version__ = '0.1'

from kivy.app import App
from kivy.uix.screenmanager import Screen

class HScroll(Screen):
    pass

class HScrollApp(App):
    def build(self):
        return HScroll()

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

 

Le fichier « hscroll.kv » défini les éléments de manière statique. Si besoin, il faudra les dynamiser dans votre application. Dans cet exemple, il y a un widget Label avec le texte « Horizontal scrolling » et un widget ScrollView qui définira la zone de scrolling.

<HScroll>:
    BoxLayout:
        orientation: 'vertical'
        canvas.before:
            Color:
                rgba: 1,1,1, 1
            Rectangle:
                pos: self.pos
                size: self.size

        Label:
            text: "Horizontal scrolling"
            size_hint_y: None
            height: sp(25)
            font_size: '16sp'
            color: (0,0,0, 1)
        ScrollView:
            GridLayout:
                rows: 1
                spacing: 10
                size_hint_x: None
                width: sp( 7 * (100 + 10) )

                canvas.before:
                    Color:
                        rgba: 0.2,0.2,0.2, 1
                    Rectangle:
                        pos: self.pos
                        size: self.size
                Image:
                    source: "images/disc-large.png"
                    size_hint_x: None
                    width: sp(100)
                Image:
                    source: "images/disc-medium.png"
                    size_hint_x: None
                    width: sp(100)
                Image:
                    source: "images/disc-small.png"
                    size_hint_x: None
                    width: sp(100)
                Image:
                    source: "images/ic_action_accept.png"
                    size_hint_x: None
                    width: sp(100)
                Image:
                    source: "images/ic_action_back.png"
                    size_hint_x: None
                    width: sp(100)
                Image:
                    source: "images/ic_action_cancel.png"
                    size_hint_x: None
                    width: sp(100)
                Image:
                    source: "images/ic_action_cloud.png"
                    size_hint_x: None
                    width: sp(100)

 

Tout le travail du ScrollView est de tronquer un widget à l’intérieur, un GridLayout, plus grand (trop grand) et nécessitant un scrolling pour le voir entièrement.

Pour ce faire, il faut que le GridLayout ait une largeur définie. Dans cet exemple, c’est en dur : il y a 7 images de 100sp chacune. Sa largeur sera donc de 7 * (100 + 10 de spacing).

Il faut donc :

  1. Un widget ScrollView qui contient un GridLayout
  2. Une seule ligne dans le GridLayout (« rows: 1″)
  3. Définir la largeur du GridLayout (« size_hint_x: None » et width: sp(…) »)

Avec ces informations, vous pourrez faire un joli scrolling horizontal. Pour un scrolling vertical, il suffit de mettre une colonne (point #2) et de changer les largeurs en hauteurs (point #3).

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>