Lekce 3 - Dynamické pozicování widgetů v Kivy

V předchozí lekci, Kivy language a layouty, jsme si představili Kivy language a k čemu slouží layouty v Kivy frameworku pro Python.

Zdravím vás u další lekce Kivy frameworku pro Python. V lekci minulé, Kivy language a layouty, jsme si představili Kivy language a popsali layouty, které Kivy obsahuje. V dnešním Python tutoriálu si ukážeme jak dynamicky pozicovat widgety a tím si také upevníme znalosti z minulé lekce, která se zaměřovala na Kivy language.

Python

Vytvoříme si nový projekt a nejdříve si naimportujeme Kivy a nastavíme požadovanou verzi. Dále importujeme Widget, který dnes použijeme namísto layoutu a ve kterém si ukážeme názorný příklad. Prvky si totiž budeme pozicovat tentokrát sami a layout by pro nás byl jen na škodu. Nakonec jako vždy si importujeme třídu App.

Zdrojový kód v Pythonu je následující:

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

Přidejte si soubor .kv. Pro ukázku si do aplikace přidáme a upravíme textový popisek Label a nastavíme mu vlastní velikost, velikost fontu a barvu, která má 4 hodnoty RGBA (červená složka, zelená složka, modrá složka, průhlednost). Toto nastavení se dále projeví pro všechny labely v aplikaci.

#:kivy 1.10.1

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

Druhou možností je definovat si vlastní Label místo úpravy toho stávajícího. Pro tento způsob bychom použili syntaxi <nazev@Label>:

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

Všimněte si, že <> se používá nejen pro úpravu nějakého widgetu nebo layoutu, ale také pro vytvoření vlastního. Výhodou tohoto postupu je samozřejmě fakt, že máme v aplikaci možnost použít jak MujSuperLabel s upraveným stylem, tak i původní Label.

Dále do .kv souboru přidáme definici formuláře, do kterého si vložíme dva labely. Pokud používáte vlastní label, např. onen MujSuperLabel, nahraďte Label: v kódu níže názvem vašeho labelu:

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

Všimněte si, že oba labely jsou na stejné pozici, protože jsme jim žádnou pozici nenastavili a formulář nemá ani žádný layout.

Pozor, v Kivy frameworku se pozicuje od spodního levého rohu!

Nyní umístíme první Label do pravého horního rohu a druhý do pravého spodního rohu.

V Kivy language se na Widget/Layout, ve kterém se aktuální Widget nachází, odkazujeme pomocí root a pomocí self sami na sebe. Obsah našeho .kv souboru 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

Kdybychom neodečetli velikost samotného Labelu, nacházel by se mimo okno, protože root.width je pravý okraj okna. Výsledné okno vypadá následovně:

Import Python knihoven do Kivy language

Nyní si ukážeme, jak se pracuje v .kv souborech s Python knihovnou a zobrazíme v Labelu číslo π (Pí) z knihovny math (není potřeba ji instalovat).

Importujeme knihovnu math pomocí #:import math math. To je ekvivalent import math as math v Pythonu. Číslo π samozřejmě zaokrouhlíme, jelikož máme fixní šířku Labelu a konstanta, kterou knihovna obsahuje, by se nám do Labelu nevešla:

#: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 horním Labelu se nám namísto textu "Label1" zobrazí zaokrouhlená konstanta. Aplikace po změně vypadá následovně:

Zdrojový kód najdete ke stažení v příloze článku. Doufám, že jste si utvrdili znalosti ohledně Kivy language. V příští lekci, Reakce na kliknutí/dotek a aplikace Malování v Kivy, si povíme o reakci na kliknutí/dotek a pohyb myši/prstu. Také si vytvoříme jednoduchou aplikaci Malování.

V další lekci, Reakce na kliknutí/dotek a aplikace Malování v Kivy, si představíme reakci na kliknutí a pohyb myši v Kivy frameworku. Vytvoříme také jednoduchou aplikaci Malování.

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