2. diel - Kivy language a layouty

V minulej lekcii, Predstavenie Kivy frameworku a tvorba prvých aplikácií , sme si vytvorili hello world aplikáciu a jednoduchú kalkulačku v Kivy frameworku pre Python. Už vieme, že widgety sa vo formulári zoskupujú pomocou layoutov. V dnešnom Python tutoriálu si popíšeme layouty, ktoré Kivy framework ponúka, a povieme si k čomu je každý z nich dobrý.

Kivy layouty

Najskôr si predstavíme všetky layouty, ktoré Kivy obsahuje.

• Anchor Layout Widgety, ktoré sa nachádza v tomto layotu, môžu byť umiestnené: hore = "top"

  dole = "bottom"

  vľavo = "left"

  vpravo = "right"

  uprostred = "center"

  Funguje vlastne ako tabuľka s 3x3 widgety

• Widgety, ktoré sa nachádza v tomto layotu, môžu byť umiestnené: hore = "top"

  dole = "bottom"

  vľavo = "left"

  vpravo = "right"

  uprostred = "center"

• hore = "top"
• dole = "bottom"
• vľavo = "left"
• vpravo = "right"
• uprostred = "center"
• Funguje vlastne ako tabuľka s 3x3 widgety
• box Layout Widgety, ktoré sa nachádza v tomto layoutu, sa radí postupne v závislosti na orientáciu, ktorá môže byť horizontálne = "horizontal" alebo vertikálne = "vertical". Radí sa teda vedľa seba alebo pod seba. BoxLayout už poznáme, použili sme ho minule u kalkulačky a to hneď 2x.

  Tento layout prispôsobí veľkosť widgetov podľa potreby. Môžeme nastaviť pomer veľkostí a prípadne aj samotnú veľkosť.

• Widgety, ktoré sa nachádza v tomto layoutu, sa radí postupne v závislosti na orientáciu, ktorá môže byť horizontálne = "horizontal" alebo vertikálne = "vertical". Radí sa teda vedľa seba alebo pod seba. BoxLayout už poznáme, použili sme ho minule u kalkulačky a to hneď 2x.
• Tento layout prispôsobí veľkosť widgetov podľa potreby. Môžeme nastaviť pomer veľkostí a prípadne aj samotnú veľkosť.
• float Layout Prostý layout, ktorý vôbec neprispôsobuje widgety oknu. Widgetom sa musí nastaviť absolútnu pozície a veľkosť.
• Prostý layout, ktorý vôbec neprispôsobuje widgety oknu. Widgetom sa musí nastaviť absolútnu pozície a veľkosť.
• Relative Layout Podobný ako FloatLayout, ale pozícia je tu relatívny voči layoutu, v ktorom je vložený, nie voči oknu.
• Podobný ako FloatLayout, ale pozícia je tu relatívny voči layoutu, v ktorom je vložený, nie voči oknu.
• Grid Layout Widgety sa umiestni do mriežky. Veľkosť mriežky sa udáva počtom stĺpcov a riadkov.
• Widgety sa umiestni do mriežky. Veľkosť mriežky sa udáva počtom stĺpcov a riadkov.
• page Layout Layout, ktorý má viac stránok / scén (podobné ako kniha, vhodné pre mobilné zariadenia).
• Layout, ktorý má viac stránok / scén (podobné ako kniha, vhodné pre mobilné zariadenia).
• scatter Layout Widgety sa pozicují relatívne ako v Relative Layout. Možno ich tiež voľne premiestniť, otočiť a zväčšiť / zmenšiť.
• Widgety sa pozicují relatívne ako v Relative Layout. Možno ich tiež voľne premiestniť, otočiť a zväčšiť / zmenšiť.
• stack Layout Funguje podobne ako BoxLayout, možno zoradiť lr-tb (zľava doprava potom zhora nadol) alebo tb-lr (sprava doľava, zdola nahor).
• Funguje podobne ako BoxLayout, možno zoradiť lr-tb (zľava doprava potom zhora nadol) alebo tb-lr (sprava doľava, zdola nahor).

Veľkosť a pozíciovanie

Widgetom môžeme ďalej nastavovať nasledovné vlastnosti, ktorými upresníme ich veľkosť a pozíciu v danom layoutu:

• pos - slúži pre nastavenie fixné pozície miniaplikácie
• pos_hint - slúži pre nastavenie pozície ako pomer veľkosti okna, napríklad 0.4 šírky a 0.3 výšky.
• size - slúži pre nastavenie danej veľkosť miniaplikácie
• size_hint - slúži pre nastavenie pomeru veľkosti

Kivy language

Teraz si predstavíme samotný Kivy language, ktorý sa používa na rovnaký účel ako CSS, teda pre pozicovanie a vzhľad aplikácie, čím tieto veci prehľadne oddelíme od zdrojového kódu v Pythone.

Kivy language kód píšeme do súboru s príponou .kv a tento súbor by sa mal volať rovnako ako názov triedy aplikácie (nemusí sa nutne volať rovnako, ale ak ho Kivy nenájde podľa názvu aplikácie triedy, museli by sme ho importovať ručne pomocou Builder.load_file(soubor)).

Kivy language je aj niečo ako Python, pretože si do .kv súboru môžeme importovať knižnice z Pythone, ktoré sa budú správať úplne rovnako ako v našom Python scriptu. Ako ukážka nám poslúži jednoduchá kalkulačka, ktorú sme vytvorili v minulej lekcii.

Najskôr si upravíme Python kód z minulej lekcia do nasledujúcej 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čite ste si všimli, že zmizlo úplne všetko, čo sa týka vzhľadu formuláre, a zostala len metóda vypocitej(). Nastavenie widgetov teraz umiestnime do súboru .kv, v mojom prípade main.kv, pretože sa modul s mojou kalkulačkou menuje main.py. Vy si názov súboru upravte tak, aby korešpondoval s názvom súboru aplikácie.

V Kivy language sa používajú lomenné zátvorky <> pre úpravu hlavného layoutu alebo widgetu, ktorý chceme upraviť. Pokiaľ do neho chceme nejaký widget vložiť, <> už nepíšeme.

Ekvivalent pôvodných layoutov a widgetov v Python kóde vyzerá v Kivy language nasledovne. Kód si vložte do svojho .kv súboru:

#: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ár ste určite prišli sami. Aplikácia vyzerá úplne rovnako ako tá z predchádzajúcej lekcie a kód oveľa prehľadnejšie

Kivy language má tú výhodu, že bude vždy aktuálne a bude fungovať na akékoľvek verziu Kivy. Keby sme písali aplikáciu len v Pythone, môže sa stať, že nejakú metódu alebo vlastnosť triedy premenujú a program nám prestane fungovať.

Zdrojový kód nájdete na stiahnutie v prílohe článku. V budúcej lekcii, Dynamické pozíciovanie widgetov v Kivy , si ukážeme ako dynamicky pozicový widgety a upevníme si znalosti, ktoré sme získali v tejto lekcii.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.