3. diel - Dynamické pozíciovanie widgetov v Kivy

Zdravím vás u ďalšej lekcie Kivy frameworku pre Python. V lekcii minulej, Kivy language a layouty , sme si predstavili Kivy language a popísali layouty, ktoré Kivy obsahuje. V dnešnom Python tutoriále si ukážeme ako dynamicky pozicový widgety a tým si tiež upevníme znalosti z minulej lekcie, ktorá sa zameriavala na Kivy language.

Python

Vytvoríme si nový projekt a najskôr si importujete Kivy a nastavíme požadovanú verziu. Ďalej importujeme Widget, ktorý dnes použijeme namiesto layoutu a v ktorom si ukážeme názorný príklad. Prvky si totiž budeme pozicový tentoraz sami a layout by pre nás bol len na škodu. Nakoniec ako vždy si importujeme triedu App.

Zdrojový kód v Pythone je nasledujúci:

import kivy
kivy.require("1.10.1")
from kivy.uix.widget import Widget
from kivy.app import App

class MujWidget(Widget):
    pass

class MainApp(App):

    def build(self):
        return MujWidget()

MainApp().run()

Kivy

Pridajte si súbor .kv. Pre ukážku si do aplikácie pridáme a upravíme textový popis Label a nastavíme mu vlastnú veľkosť, veľkosť fontu a farbu, ktorá má 4 hodnoty RGBA (červená zložka, zelená zložka, modrá zložka, priehľadnosť). Toto nastavenie sa ďalej prejaví pre všetkých labely v aplikácii.

#:kivy 1.10.1

<Label>:
    size: 150, 50
    font_size: 32
    color: .5, .7, .3, 1

Druhou možnosťou je definovať si vlastné Label namiesto úpravy toho existujúceho. Pre tento spôsob by sme použili syntax <nazev@Label>:

<MujSuperLabel@Label>:
    size: 150, 50
    font_size: 32
    color: .5, .7, .3, 1

Všimnite si, že <> sa používa nielen pre úpravu nejakého miniaplikácie alebo layoutu, ale aj pre vytvorenie vlastného. Výhodou tohto postupu je samozrejme fakt, že máme v aplikácii možnosť použiť ako MujSuperLabel s upraveným štýlom, tak aj pôvodný Label.

Ďalej do .kv súboru pridáme definíciu formulára, do ktorého si vložíme dva labely. Ak používate vlastný label, napr. Onen MujSuperLabel, nahraďte Label: v kóde nižšie názvom vášho labelu:

<MujWidget>:
    Label:
        id: label1
        text: "Label1"
    Label:
        id: label2
        text: "Label2"

Všimnite si, že obaja labely sú na rovnakej pozícii, pretože sme im žiadnu pozíciu nenastavili a formulár nemá ani žiadny layout.

Pozor, v Kivy frameworku sa pozicuje od spodného ľavého rohu!

Teraz umiestnime prvý Label do pravého horného rohu a druhý do pravého spodného rohu.

V Kivy language sa na Widget / Layout, v ktorom sa aktuálne Widget nachádza, odkazujeme pomocou root a pomocou self sami na seba. Obsah nášho .kv súboru upravíme na:

#:kivy 1.10.1

<Label>:
    size: 150, 50
    font_size: 32
    color: .5, .7, .3, 1

<MujWidget>:
    Label:
        id: label1
        text: "Label1"
        pos: root.width - self.width, root.top - self.height    --- musíme odečíst velikost Labelu jinak by se Label nacházel mimo okno
    Label:
        id: label2
        text: "Label2"
        pos: root.width - self.width, root.y

Keby sme neodpočítal veľkosť samotného Label u, nachádzal by sa mimo okno, pretože root.width je pravý okraj okna. Výsledné okno vyzerá nasledovne:

Import Python knižníc do Kivy language

Teraz si ukážeme, ako sa pracuje v .kv súboroch s Python knižnicou a zobrazíme v Label u číslo π (Pí) z knižnice math (nie je potrebné ju inštalovať).

Importujeme knižnicu math pomocou #:import math math. To je ekvivalent import math as math v Pythone. Číslo π samozrejme zaokrúhlime, pretože máme fixné šírku Label ua konštanta, ktorú knižnica obsahuje, by sa nám do Label u nezmestila:

#:kivy 1.10.1
#:import math math

<Label>:
    size: 150, 50
    font_size: 32
    color: .5, .7, .3, 1

<MujWidget>:

    Label:
        id: label1
        text: str(round(math.pi, 5))
        pos: root.width - self.width, root.top - self.height
    Label:
        id: label2
        text: "Label2"
        pos: root.width - self.width, root.y

V hornom Label u sa nám namiesto textu "Label1" zobrazí zaokrúhlená konštanta. Aplikácia po zmene vyzerá nasledovne:

Zdrojový kód nájdete na stiahnutie v prílohe článku. Dúfam, že ste si utvrdili vedomosti ohľadom Kivy language. V budúcej lekcii, Reakcia na kliknutie / dotyk a aplikácie Maľovanie v Kivy , si povieme o reakciu na kliknutie / dotyk a pohyb myši / prsta. Tiež si vytvoríme jednoduchú aplikáciu Maľovanie.

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š.