======Kivy: Liste des éléments graphiques======
<WRAP center round box 60% centeralign>
**{{tagpage>kivy|Toutes les pages Kivy}}**
**[[http://translate.google.com/translate?hl=&sl=auto&tl=en&u=https%3A%2F%2Fressources.labomedia.org%2Fkivy_liste_des_elements_graphiques|English Version]]**
</WRAP>
<WRAP center round box 40% centeralign>
**[[les_pages_kivy_en_details|Les pages Kivy en détails]]**
</WRAP>

Remarques:

  - Les éléments graphiques sont définis dans un *.kv, et non dans le main.py. La doc kivy, c'est expliquer la factorisation avec un exemple du genre y = a * (sin(x) + ln(x)) à un élève de 5ème !
  - Pour construire une application installable sur Android avec [[archives:kivy_buildozer_pour_creer_une_application_android_avec_un_script_python|Buildozer pour créer une application Android avec un script python]], le fichier principal doit s'appeler **main.py**. Dans les exemples ici, ils ont un nom **explicite** pour s'y retrouver.
  - Testé sous Linux Mint 17 et **python 3.4**.
  - C'est du python, BoxLayout n'a rien à voir avec Boxlayout
  - Les titres pointent vers la documentation officielle. Les fichiers contiennent kivycatalog, showcase, ping_pong et widgets.

===== Les fichiers sur Github et en zip =====

**[[https://github.com/sergeLabo/kivylabomedia|kivilabomedia sur Github]]**

  * Cloner le git ou télécharger le zip.
  * Ouvrir un terminal dans le dossier.
  * python3 je_teste.py

ou\\
Dans geany, ouvrir tous les fichiers et Excécuter les .py

===== Liste des éléments graphiques kivy.uix =====

  * [[http://kivy.org/docs/api-kivy.uix.html|Liste des widgets]] Tous les éléments à votre disposition.
  * [[http://kivy.org/docs/guide/lang.html|Programming Guide Kv language]]
  * [[http://kivy.org/docs/api-kivy.lang.html|Kivy Language]]

===== Widgets classiques pour interface utilisateur =====

{{media_02:classique1.png?300|Classique1.png}}

**classique.py**

<code python>
#! /usr/bin/env python3
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.core.window import Window

Window.size = (1120, 630)

class ClassiqueApp(App):
    def build(FloatLayout):
        pass

if __name__ == '__main__':
    ClassiqueApp().run()
</code>
**classique.kv**

<code python>
#:kivy 1.8.0

GridLayout:
    cols: 4
    rows: 3
    padding: 10
    Label:
        text: "Je suis un label"
    Button:
        text: "bouton 1"
    CheckBox:
        active: True
    Image:
        source: 'softboy.png'
    Slider:
        min: -100
        max: 100
        value: 25
    ProgressBar:
        min: 0
        max: 1000
    TextInput:
        text: "Saisir un texte"
    ToggleButton:
        text: "Mode poésie"
    Switch:
        active: True
    Video:
        source: "softboy.avi"
        play: True
</code>

===== Layouts: Méthodes de dispositions des éléments graphiques =====
  * [[http://kivy.org/docs/guide/widgets.html#organize-with-layouts|Kivy organize-with-layouts]]

==== AnchorLayout ====
{{media_02:anchor1.png?300|fig:Anchor1.png}} Les éléments sont ancrés sur un point

**anchorlayout.py**

<code python>
#! /usr/bin/env python3
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.core.window import Window

Window.size = (1120, 630)

class AnchorlayoutApp(App):
    def build(FloatLayout):
        pass

if __name__ == '__main__':
    AnchorlayoutApp().run()
</code>
**anchorlayout.kv**

<code python>
#:kivy 1.8.0

AnchorLayout:
    anchor_x: 'right'
    anchor_y: 'bottom'
    padding: 50
    Button:
        size_hint: 0.3, 0.4
        text: "bouton 1"
    Label:
        size_hint: 0.7, 0.6
        text: "Je suis ancré"
</code>

==== BoxLayout ====
{{media_02:tuto11.png?300|fig:Tuto11.png}} Empilement de boîtes horizontales ou verticales.

**boxlayout.py**

<code python>
#! /usr/bin/env python3
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.core.window import Window

Window.size = (1120, 630)

class BoxlayoutApp(App):
    def build(FloatLayout):
        pass

if __name__ == '__main__':
    BoxlayoutApp().run()
</code>
**boxlayout.kv**

<code python>
#:kivy 1.8.0

BoxLayout:
    spacing: 10
    padding: 10
    orientation: "horizontal"
    Button:
        text: "bouton 1"
    Button:
        text: "bouton 2"
    Button:
        size_hint_y: 0.3
        text: "bouton 3"
    BoxLayout:
        spacing: 10
        padding: 10
        orientation: "vertical"
        Button:
            size_hint_y: 0.5
            text: "bouton 4"
        Button:
            size_hint_y: 0.4
            text: "bouton 5"
        Button:
            size_hint_y: 0.3
            text: "bouton 6"
        Button:
            text: "bouton 7"
</code>

==== GridLayout ====

{{media_02:tuto22.png?300|fig:Tuto22.png}} Défini une grille avec des lignes et des colonnes.

**gridlayout.py**

<code python>
#! /usr/bin/env python3
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.core.window import Window

Window.size = (1120, 630)


class GridlayoutApp(App):
    def build(FloatLayout):
        pass

if __name__ == '__main__':
    GridlayoutApp().run()
</code>
**gridlayout.kv**

<code python>
#:kivy 1.8.0

GridLayout:
    spacing: 10
    padding: 10
    cols: 2
    rows: 2
    Button:
        text: "bouton 1"
    Button:
        text: "bouton 2"
    Button:
        text: "bouton 3"
    GridLayout:
        spacing: 10
        padding: 10
        cols: 2
        rows: 2
        Button:
            size_hint_y: 0.5
            text: "bouton 4"
        Button:
            size_hint_y: 0.4
            text: "bouton 5"
        Button:
            size_hint_y: 0.3
            text: "bouton 6"
        Button:
            text: "bouton 7"
</code>

==== PageLayout ====

{{media_02:page1.png?300|fig:Page1.png}} Pour faire tourner des pages

**pagelayout.py**

<code python>
#! /usr/bin/env python3
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.core.window import Window

Window.size = (1120, 630)

class PagelayoutApp(App):
    def build(FloatLayout):
        pass

if __name__ == '__main__':
    PagelayoutApp().run()
</code>
**pagelayout.kv**

<code python>
#:kivy 1.8.0

PageLayout:
    Button:
        text: 'page1'
    Button:
        text: 'page2'
    Button:
        text: 'page3'
</code>

==== StackLayout ====

{{media_02:stack1.png?300|fig:Stack1.png}} Empile depuis le point défini

**stacklayout.py**

<code python>
#! /usr/bin/env python3
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.core.window import Window

Window.size = (1120, 630)

class StacklayoutApp(App):
    def build(FloatLayout):
        pass

if __name__ == '__main__':
    StacklayoutApp().run()
</code>
**stacklayout.kv**

<code python>
#:kivy 1.8.0

StackLayout:
    spacing: 10
    padding: 10
    orientation: 'tb-rl'
    Button:
        text: "bouton 1"
        size_hint: 0.3, 0.5
    Button:
        text: "bouton 2"
        size_hint: 0.2, 0.2
    Button:
        text: "bouton 3"
        size_hint: 0.15, 0.2
</code>

==== RelativeLayout ====

{{media_02:relative1.png?300|fig:Relative1.png}} Retourne des coordonnées relatives

**relativelayout.py**

<code python>
#! /usr/bin/env python3
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.core.window import Window

Window.size = (1120, 630)

class RelativelayoutApp(App):
    def build(FloatLayout):
        pass

if __name__ == '__main__':
    RelativelayoutApp().run()
</code>
**relativelayout.kv**

<code python>
#:kivy 1.8.0

BoxLayout:
    Label:
        text: 'Left'
    Button:
        text: 'Middle'
        on_touch_down: print('Middle: {}'.format(self.to_local(*args[1].pos)))
    RelativeLayout:
        on_touch_down: print('Relative: {}'.format(self.to_local(*args[1].pos)))
        Button:
            text: 'Right'
            on_touch_down: print('Right: {}'.format(self.to_local(*args[1].pos)))
</code>

==== ScatterLayout ====

{{media_02:scatter1.png?300|fig:Scatter1.png}} {{media_02:scatter2.png?320|fig:Scatter2.png}} Permet de déplacer des widgets.

**scatterlayout.py**

<code python>
#! /usr/bin/env python3
# -*- coding: utf-8 -*-

import kivy
kivy.require('1.8.0')

from kivy.app import App
from kivy.core.window import Window

Window.size = (1120, 630)

class ScatterlayoutApp(App):
    def build(FloatLayout):
        pass

if __name__ == '__main__':
    ScatterlayoutApp().run()
</code>
**scatterlayout.kv**

<code python>
#:kivy 1.8.0

FloatLayout:
    ScatterLayout:
        Label:
            size_hint: 0.2, 0.2
            text: 'Left'
        Label:
            size_hint: 0.2, 0.5
            text: 'Middle'
        ScatterLayout:
            Label:
                size_hint: 0.5, 0.2
                text: 'Right'
</code>

====ScrollView====
**Défilement d'une liste de ligne**

<code python extrait_de_main.py>
class MainScreen(Screen):
    text = StringProperty("Mon Texte")
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.text = "Mon texte\n"*100
</code>

<code python scroll.kv>
<MainScreen>:
    BoxLayout:
        orientation: "vertical"
        ScrollView:
            do_scroll_x: False
            do_scroll_y: True
            Label:
                id: scroll
                size_hint: None, None  # très important !
                size: self.texture_size
                height: self.size[1]
                width: self.size[0]
                padding: 10, 10
                text: root.text
                color: 1, 0, 0.5, 1
                font_size: "20dp"
</code>

{{tag> kivy python sb }}