Lekce 1 - Představení Kivy frameworku a tvorba prvních aplikací

Vítejte u první lekce kurzu, ve kterém se naučíme vytvářet aplikace v Kivy frameworku pro Python. Cílem tohoto kurzu je naučit se vytvářet aplikace/hry pro mobilní zařízení, konkrétně (nejen) pro Android v Kivy frameworku.

Kivy framework

Co je vlastně Kivy? Kivy je framework pro programovací jazyk Python, který nám umožňuje vytvářet aplikace pro Windows, Mac OS, Linux, Android a iOS. To je spousta zařízení, která mohou spustit naši aplikaci, a ještě lepší je to, že Kivy podporuje multi-touch. Je tedy ideální pro tvorbu her a aplikací na dotyková zařízení. Na rozdíl např. od PyQt Kivy není nějaký obal pro GUI toolkit, Kivy framework je napsaný v Pythonu, proto pro svou funkčnost potřebuje Cython (a doporučuji i PyGame).

Nevýhodou Kivy je vzhled, jelikož není nativní a ani se jako nativní nesnaží vypadat. Poté, co v Kivy frameworku budete dělat nějaký ten pátek, budete možná schopni vytvořit aplikaci, která bude vypadat jako některá z tohoto seznamu.

Kivy má také svůj jazyk pro návrh formuláře/GUI, funguje podobně jako CSS pro web.

Počítám s tím, že znáte základy OOP v Pythonu a máte nainstalovaný Python 3.6+.

Instalace

Pokud Python nemáte z nějakého důvodu nainstalovaný, doporučuji distribuci MiniConda.

Jak jsem zmínil, Kivy framework potřebuje pro svou funkčnost balíčky PyGame a Cython, které nainstalujeme jako první. Dále je potřeba nainstalovat Pillow. Následující příkazy spustíme v příkazovém řádku. Pokud používáte distribuci Anaconda/MiniConda na Windows, použijte Anaconda Prompt.

py -m pip install cython
py -m pip install pygame
py -m pip install Pillow

Poté nainstalujeme samotný Kivy framework:

py -m pip install kivy

V příkazovém řádku byste měli vidět výstup podobný tomuto:

Nyní jsme připraveni a vrhneme se na tvorbu naší úvodní aplikace.

Tvorba první aplikace

Vytvořte si nový Python projekt. Nejprve si importujeme samotný Kivy framework, dále nastavíme požadovanou verzi a importujeme tlačítko s třídou App. Právě tlačítko se zdravícím textem v této aplikaci uživateli vykreslíme.

#Importujeme Kivy
import kivy
#Minimální potřebná verze pro spuštění
kivy.require("1.10.1")
#Importujeme Tlačítko
from kivy.uix.button import Button
#Importujeme Aplikaci
from kivy.app import App

Vytvoříme si třídu MainApp, která bude dědit z třídy App a bude vracet importované tlačítko s naším textem.

#Vytvoříme třídu aplikace
class MainApp(App):
    #Metoda, která vrátí tlačítko, které se má zobrazit
    def build(self):
        return Button(text = "Zdraví tě tlačítko z Kivy")

Aplikaci následně stačí jen instanciovat a spustit:

#Spuštění
app = MainApp()
app.run()

Po spuštění, které můžete provést např. v příkazovém řádku příkazem py soubor.py, bude aplikace vypadat následovně:

Tlačítko se roztáhlo přes celý formulář, což je jeho výchozí chování.

Aplikace Kalkulačka

Jelikož vytvářet Python aplikace je poměrně jednoduché, stihneme během dnešní lekce vytvořit i druhou ukázkovou aplikaci - jednoduchou kalkulačku. Ta bude umožňovat provádět následující matematické operace:

• součet
• rozdíl
• součin
• podíl

Použijeme následující ovládací prvky:

• TextInput - textové pole pro zadání textu od uživatele, v našem případě čísel
• Spinner - nabídka pro výběr matematické operace, funguje podobně jako combobox, tedy jako rozbalovací nabídka
• Label - popisek pro výpis výsledku
• Button - tlačítko pro zavolání metody, která provede výpočet

Formulář aplikace kalkulačka bude mít následující rozložení:

Vidíme, že zde již potřebujeme ovládací prvky alespoň minimálně seskupit a to do dvou řad. K seskupování prvků používáme tzv. layouty, česky rozložení. Možná je znáte z již zmíněného PyQt kurzu nebo z jiných programovacích jazyků, fungují všude velmi podobně.

V našem případě použijeme na ovládací prvky v první řadě BoxLayout, který nám je seskupí vedle sebe. Obě řady prvků následně seskupíme pod sebe dalším BoxLayoutem, který obalí celou naší aplikaci. Ten bude mít na rozdíl od toho prvního nastavenou orientaci na svislou.

Na veškeré ovládací prvky v Kivy budeme dále referovat jako na widgety.

Tvorba aplikace

Nejdříve si naimportujeme Kivy a nastavíme požadovanou verzi. Poté naimportujeme samotné ovládací prvky, se kterými budeme pracovat, a samozřejmě i třídu App. Ta tvoří základ každé Kivy aplikace:

import kivy
kivy.require("1.10.1")
from kivy.uix.button import Button, Label
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.textinput import TextInput
from kivy.uix.spinner import Spinner

from kivy.app import App

Dále si vytvoříme třídu, která bude tentokrát dědit z BoxLayoutu, který bude vše držet pospolu. BoxLayout je layout, který přizpůsobí velikost widgetů, které obsahuje, velikosti okna, a seřadí je podle své orientace. V našem případě bude orientace vertikální, protože potřebujeme vložit dvě řady ovládacích prvků pod sebe:

class Kalkulacka_layout(BoxLayout):

    def __init__(self, *args, **kwargs):
        super(Kalkulacka_layout, self).__init__(*args, **kwargs)
        #Nastavíme orientaci Boxlayoutu směrem "dolů"
        self.orientation = "vertical"

Layouty můžeme vkládat i do sebe, čímž jako první svislý prvek v okně vložíme další BoxLayout, který bude tvořit vodorovnou řadu prvků.

Vytvoříme tedy nový BoxLayout, který bude obsahovat TextInput, Spinner a Label. Tento layout přidáme do našeho hlavního BoxLayoutu. V tomto případě bude orientace BoxLayoutu horizontální, tedy aby řadil widgety vedle sebe:

# pokračujeme v konstruktoru...
        #Vytvoříme obal pro text input, spinner a label s výsledkem
        widget = BoxLayout(orientation = "horizontal")
        self.cislo1_input = TextInput(multiline = False)
        self.combobox = Spinner(text = "+", values=("+", "-", "*", "/"))
        self.cislo2_input = TextInput(multiline = False)
        self.vysledek_label = Label(text = "0")
        widget.add_widget(self.cislo1_input)
        widget.add_widget(self.combobox)
        widget.add_widget(self.cislo2_input)
        widget.add_widget(self.vysledek_label)
        self.add_widget(widget)

Nakonec přidáme do okna tlačítko, které bude reagovat na kliknutí nebo dotek, záleží na jakém zařízení bude aplikace spuštěna:

    #Vytvoříme tlačítko, které bude volat metodu vypocitej()
    self.tlacitko = Button(text = "=", on_press = self.vypocitej)
    self.add_widget(self.tlacitko)

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)

Abychom mohli aplikaci spustit, musíme vytvořit třídu MainApp, která dědí z App, a metodu build(), která bude vracet naši třídu. Ta dědí z BoxLayoutu a obsahuje naše vybrané widgety:

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

MainApp().run()

A máme hotovo. Pokud aplikaci spustíte příkazem py soubor.py, vyskočí na vás okno podobné obrázku níže:

Zdrojový kód obou příkladů najdete ke stažení v příloze článku. V příští lekci, Kivy language a layouty, si představíme Kivy language, popíšeme si layouty, které Kivy framework nabízí, a řekneme si k čemu je každý z nich dobrý.

V další lekci, Kivy language a layouty, si představíme Kivy language a k čemu slouží layouty 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š.