Lekce 2 - Kivy language a layouty

V předchozí lekci, Představení Kivy frameworku a tvorba prvních aplikací, jsme v Kivi frameworku Pythonu vytvořili Hello world aplikaci a také jednoduchou kalkulačku.

V minulé lekci, Představení Kivy frameworku a tvorba prvních aplikací, jsme si vytvořili hello world aplikaci a jednoduchou kalkulačku v Kivy frameworku pro Python. Již víme, že widgety se ve formuláři seskupují pomocí layoutů. V dnešním Python tutoriálu si popíšeme layouty, které Kivy framework nabízí, a řekneme si k čemu je každý z nich dobrý.

Kivy layouty

Nejdříve si představíme všechny layouty, které Kivy obsahuje.

• Anchor Layout
  • Widgety, které se nachází v tomto layotu, mohou být umístěny:
    • nahoře = "top"
    • dole = "bottom"
    • vlevo = "left"
    • vpravo = "right"
    • uprostřed = "center"
  • Funguje vlastně jako tabulka s 3x3 widgety
• Box Layout
  • Widgety, které se nachází v tomto layoutu, se řadí postupně v závislosti na orientaci, která může být horizontální = "horizontal" nebo vertikální = "vertical". Řadí se tedy vedle sebe nebo pod sebe. BoxLayout již známe, použili jsme jej minule u kalkulačky a to hned 2x.
  • Tento layout přizpůsobí velikost widgetů podle potřeby. Můžeme nastavit poměr velikostí a popřípadě i samotnou velikost.
• Float Layout
  • Prostý layout, který vůbec nepřizpůsobuje widgety oknu. Widgetům se musí nastavit absolutní pozice a velikost.
• Relative Layout
  • Podobný jako FloatLayout, ale pozice je zde relativní vůči layoutu, ve kterém je vložený, ne vůči oknu.
• Grid Layout
  • Widgety se umístí do mřížky. Velikost mřížky se udává počtem sloupců a řádků.
• Page Layout
  • Layout, který má více stránek/scén (podobné jako kniha, vhodné pro mobilní zařízení).
• Scatter Layout
  • Widgety se pozicují relativně jako v Relative Layoutu. Lze je také volně přemístit, otočit a zvětšit/zmenšit.
• Stack Layout
  • Funguje podobně jako BoxLayout, lze seřadit lr-tb (zleva doprava poté shora dolů) nebo tb-lr (zprava doleva, zdola nahoru).

Velikost a pozicování

Widgetům můžeme dále nastavovat následující vlastnosti, kterými upřesníme jejich velikost a pozici v daném layoutu:

• pos - slouží pro nastavení fixní pozice widgetu
• pos_hint - slouží pro nastavení pozice jako poměr velikosti okna, například 0.4 šířky a 0.3 výšky.
• size - slouží pro nastavení dané velikost widgetu
• size_hint - slouží pro nastavení poměru velikosti

Kivy language

Nyní si představíme samotný Kivy language, který se používá ke stejnému účelu jako CSS, tedy pro pozicování a vzhled aplikace, čímž tyto věci přehledně oddělíme od zdrojového kódu v Pythonu.

Kivy language kód píšeme do souboru s příponou .kv a tento soubor by se měl jmenovat stejně jako název třídy aplikace (nemusí se nutně jmenovat stejně, ale pokud ho Kivy nenajde podle názvu třídy aplikace, museli bychom jej importovat ručně pomocí Builder.load_file(soubor)).

Kivy language je i něco jako Python, jelikož si do .kv souboru můžeme importovat knihovny z Pythonu, které se budou chovat úplně stejně jako v našem Python scriptu. Jako ukázka nám poslouží jednoduchá kalkulačka, kterou jsme vytvořili v minulé lekci.

Nejdříve si upravíme Python kód z minulé lekce do následující podoby:

import kivy
kivy.require("1.10.1")
from kivy.uix.boxlayout import BoxLayout
from kivy.app import App

class Kalkulacka_layout(BoxLayout):

    def vypocitej(self, *args):
        if self.cislo1_input.text == "" or self.cislo2_input.text == "":
            return False
        if self.combobox.text == "+":
            vys = float(self.cislo1_input.text) + float(self.cislo2_input.text)
        elif self.combobox.text == "-":
            vys = float(self.cislo1_input.text) - float(self.cislo2_input.text)
        elif self.combobox.text == "*":
            vys = float(self.cislo1_input.text) * float(self.cislo2_input.text)
        elif self.combobox.text == "/":
            if self.cislo2_input.text == "0":
                self.vysledek_label.text = "ERROR"
                return False
            vys = float(self.cislo1_input.text) / float(self.cislo2_input.text)
        self.vysledek_label.text = str(vys)

class MainApp(App):
    def build(self):
        return Kalkulacka_layout()

MainApp().run()

Určitě jste si všimli, že zmizelo úplně vše, co se týká vzhledu formuláře, a zbyla jen metoda vypocitej(). Nastavení widgetů nyní umístíme do souboru .kv, v mém případě main.kv, jelikož se modul s mojí kalkulačkou jmenuje main.py. Vy si název souboru upravte tak, aby korespondoval s názvem souboru aplikace.

V Kivy language se používají lomenné závorky <> pro úpravu hlavního layoutu nebo widgetu, který chceme upravit. Pokud do něj chceme nějaký widget vložit, <> již nepíšeme.

Ekvivalent původních layoutů a widgetů v Python kódu vypadá v Kivy language následovně. Kód si vložte do svého .kv souboru:

#:kivy 1.10.1   --- specifikujeme verzi Kivy

<Kalkulacka_layout>:    --- specifikujeme třídu, kterou budeme stylovat
    id: kalkulacka  --- nastavíme id, abychom mohli zavolat metodu vypocitej
    vysledek_label: vysledek_label  --- nastavíme název widgetu, pod kterým budeme volat tento label v python kódu
    cislo1_input: cislo1_input
    cislo2_input: cislo2_input
    combobox: combobox
    orientation: "vertical"

    BoxLayout:  --- vytvoříme nový BoxLayout, který bude obsahovat vstup, výběr operace a výstup
        orientation: "horizontal"   --- nastavíme orientaci

        TextInput:
            id: cislo1_input    --- nastavíme id, pod kterým můžeme přistoupit k tomuto TextInputu

        Spinner:
            id: combobox
            text: "+"
            values: "+", "-", "*", "/"  --- nastavíme možnosti, z kterých si uživatel může vybrat

        TextInput:
            id: cislo2_input

        Label:
            id: vysledek_label
            text: "0"

    Button:
        text: "="
        on_press: kalkulacka.vypocitej()    --- zavoláme metodu vypocitej() pokud uživatel klikne na tlačítko

Na to, že trojpomlčka --- označuje komentář jste určitě přišli sami. Aplikace vypadá úplně stejně jako ta z předchozí lekce a kód mnohem přehlednější

Kivy language má tu výhodu, že bude vždy aktuální a bude fungovat na jakékoliv verzi Kivy. Kdybychom psali aplikaci pouze v Pythonu, může se stát, že nějakou metodu nebo vlastnost třídy přejmenují a program nám přestane fungovat.

Zdrojový kód najdete ke stažení v příloze článku. V příští lekci, Dynamické pozicování widgetů v Kivy, si ukážeme jak dynamicky pozicovat widgety a upevníme si znalosti, které jsme získali v této lekci.

V další lekci, Dynamické pozicování widgetů v Kivy, si ukážeme jak dynamicky pozicovat widgety v Kivy frameworku pro Python.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.