5. diel - Aplikácie Čítačka Kníh v Kivy a Pythone

Zdravím vás u ďalšej lekcie Pythone a frameworku Kivy. V tej minulej, Reakcia na kliknutie / dotyk a aplikácie Maľovanie v Kivy , sme si vytvorili jednoduché Maľovanie, predstavili sme si grafiku na canvas a reakciu na kliknutie a pohyb myši alebo dotyk. V dnešnej lekcii si ukážeme ako používať PageLayout a vytvoríme si aplikáciu Čítačka kníh.

Túto aplikáciu už budem písať iba v Pythone, pretože osobne nie som fanda Kivy language. Keď v Pythone pridávame widget do widgetu / layoutu, použijeme funkciu muj_widget.add_widget(muj_widget_cislo2). Aký spôsob zvolíte vy záleží na vás.

PageLayout

Najskôr si ukážeme ako funguje PageLayout. Jedná sa o layout ako BoxLayout, ale widgety sú rozdelené na jednotlivé stránky ako v knihe. Pre ukážku si na začiatok vytvoríme jednoduchú aplikáciu.

Najskôr si musíme importovať samotný PageLayout a Label pre zobrazenie textu na samotnej stránke, potom si importujeme Color a Rectangle z grafiky a nakoniec App pre spustenie aplikácie:

import kivy
kivy.require("1.10.1")
from kivy.uix.pagelayout import PageLayout
from kivy.uix.button import Label
from kivy.uix.boxlayout import BoxLayout
from kivy.graphics import Color, Rectangle
from kivy.app import App

Vytvoríme si triedu Kniha, ktorá dedí z triedy PageLayout. Táto trieda bude pre ukážku obsahovať 2 stránky a každá z nich bude farebne odlíšená:

class Kniha(PageLayout):

    def __init__(self, *args):
        super(Kniha, self).__init__(*args)
        #Vytvoříme si stránku
        strana1 = BoxLayout(orientation = "vertical")
        #Přidáme barvu do canvasu
        strana1.canvas.add(Color(rgba = (0.5, 0, 0.5, 1)))
        #Přidáme čtverec do canvasu
        strana1.canvas.add(Rectangle(size = self.size, pos = self.pos))
        #Přidáme Label, který se zobrazí na stránce
        strana1.add_widget(Label(text = "Strana1"))

        strana2 = BoxLayout(orientation = "vertical")
        strana2.canvas.add(Color(rgba = (0.5, 0.5, 0, 1)))
        strana2.canvas.add(Rectangle(size = self.size, pos = self.pos))
        strana2.add_widget(Label(text = "Strana2"))

        self.add_widget(strana1)
        self.add_widget(strana2)

class PageLayoutPrikladApp(App):

    def build(self):
        return Kniha()

PageLayoutPrikladApp().run()

Spustíme aplikáciu a pozrieme sa, výsledok je nasledujúci:

Keď spustíme aplikáciu, môžeme si všimnú toho, že štvorec nie je rovnako veľký ako okno. Stalo sa to, pretože keď sa okno inicializuje, má veľkosť len 100x100 a teda náš štvorec má túto veľkosť. Ak používate Kivy language, na tento problém nenarazíte, pretože sa o to Kivy postará. Ak robíme v čistom Pythone, musíme si vytvoriť takzvaný bind / event, ktorý sa bude volať vždy pri zmene veľkosti našich layoutov. Kód upravíme nasledujúcim spôsobom:

class Kniha(PageLayout):

    def __init__(self, *args):
        super(Kniha, self).__init__(*args)
        #Vytvoříme si stránku
        self.strana1 = BoxLayout(orientation = "vertical")
        #Přidáme barvu do canvasu
        self.strana1.canvas.before.add(Color(rgba = (0.5, 0, 0.5, 1)))
        #Přidáme čtverec do canvasu
        self.ctverec1 = Rectangle(size = self.strana1.size, pos = self.strana1.pos)
        self.strana1.canvas.before.add(self.ctverec1)
        #Přidáme Label, který se zobrazí na stránce
        self.strana1.add_widget(Label(text = "Strana1"))

        self.strana2 = BoxLayout(orientation = "vertical")
        self.strana2.canvas.before.add(Color(rgba = (0.5, 0.5, 0, 1)))
        self.ctverec2 = Rectangle(size = self.strana2.size, pos = self.strana2.pos)
        self.strana2.canvas.before.add(self.ctverec2)
        self.strana2.add_widget(Label(text = "Strana2"))

        self.add_widget(self.strana1)
        self.add_widget(self.strana2)

        self.strana1.bind(size = self.update, pos = self.update)
        self.strana2.bind(size = self.update, pos = self.update)

    def update(self, *args):
        self.ctverec1.size = self.size
        self.ctverec1.pos = self.strana1.pos

        self.ctverec2.size = self.size
        self.ctverec2.pos = self.strana2.pos

Aplikácia teraz už funguje tak, ako má

Ukázali sme si, ako funguje PageLayout. Teraz si konečne môžeme vytvoriť sľúbenú aplikáciu Čítačka kníh, ktorá bude spravovať niekoľko takýchto kníh.

Aplikácie Čítačka Kníh

Použijeme triedu Kniha, ktorú sme už vytvorili. Namiesto PageLayout u bude však dediť z triedy Screen. Ďalej vykonáme menšie úpravy a pridáme ovládací panel.

Ako prvý si teda triedu Kniha prispôsobíme:

class Kniha(Screen):

    def __init__(self, nazev, *args, **kwargs):
        super(Kniha, self).__init__(*args, **kwargs)

        #Vytvoříme obal, který bude vše držet pospolu
        self.obal_layout = BoxLayout(orientation = "vertical")

        #Vytvoříme si obal pro knížku
        self.layout = PageLayout(size_hint = (1, .9))
        #Vytvoříme si stránku
        self.strana1 = BoxLayout(orientation = "vertical")
        #Přidáme barvu do canvasu
        self.strana1.canvas.before.add(Color(rgba = (0.5, 0, 0.5, 1)))
        #Přidáme čtverec do canvasu
        self.ctverec1 = Rectangle(size = self.strana1.size, pos = self.strana1.pos)
        self.strana1.canvas.before.add(self.ctverec1)
        #Přidáme Label, který se zobrazí na stránce
        self.strana1.add_widget(Label(text = nazev))

        #Vytvoříme si stránku
        self.strana2 = BoxLayout(orientation = "vertical")
        #Přidáme barvu do canvasu
        self.strana2.canvas.before.add(Color(rgba = (0.5, 0.5, 0, 1)))
        #Přidáme čtverec do canvasu
        self.ctverec2 = Rectangle(size = self.strana2.size, pos = self.strana2.pos)
        self.strana2.canvas.before.add(self.ctverec2)
        #Přidáme Label, který se zobrazí na stránce
        self.strana2.add_widget(Label(text = "Strana"))

        #Přídáme strany do PageLayoutu a ten přídáme do obalu
        self.layout.add_widget(self.strana1)
        self.layout.add_widget(self.strana2)
        self.obal_layout.add_widget(self.layout)

        #ZDE BUDE OVLÁDACÍ PANEL

        self.add_widget(self.obal_layout)

        self.strana1.bind(size = self.update, pos = self.update)
        self.strana2.bind(size = self.update, pos = self.update)

    def update(self, *args):
        self.ctverec1.size = self.size
        self.ctverec1.pos = self.strana1.pos

        self.ctverec2.size = self.size
        self.ctverec2.pos = self.strana2.pos

Všimnite si komentáre, označujúceho budúce miesto pre ovládací panel.

Ešte predtým, než si pridáme ovládací panel, si vysvetlíme, ako funguje ScreenManager. Do ScreenManageru si môžeme pridať viac scén / screenov a medzi nimi podľa mena / name prechádzať. Prechádzame zmenou premenné ScreenManager.current, napr. Ako ScreenManager.current = "jmeno_screenu".

Vytvoríme si triedu, ktorá dedí zo ScreenManager:

class MujManager(ScreenManager):

    def __init__(self, *args):
        super(MujManager, self).__init__(*args)
        #Přidáme screeny a nastavíme jim jména
        self.add_widget(Kniha("Harry Potter", name = "harry_potter"))
        self.add_widget(Kniha("Pan Prstenu", name = "pan_prstenu"))

    #Funkce pro přechod mezi screeny
    def change_current(self, value):
        self.current = value

Teraz pridáme ovládací panel na miesto vyznačené komentárom v kóde vo triede Kniha.

self.obal_tlacitka = BoxLayout(orientation = "horizontal", size_hint = (1, .1))
self.obal_tlacitka.add_widget(Button(text = "<--", on_press = lambda *args: root.sm.change_current("harry_potter")))
self.obal_tlacitka.add_widget(Button(text = "-->", on_press = lambda *args: root.sm.change_current("pan_prstenu")))
self.obal_layout.add_widget(self.obal_tlacitka)

Teraz už stačí len pridať triedu, ktorá dedí z App a program len spustiť

class MainApp(App):
    def build(self):
        #Přídáme MujManager do proměnné, abychom na něj mohli odkazovat
        self.sm = MujManager()
        return self.sm

root = MainApp()
root.run()

Aplikácia funguje nasledovne:

Zdrojový kód nájdete na stiahnutie v prílohe článku. V budúcej lekcii, Animácie a ScatterLayout v Kivy a Pythone , sa pozrieme na ScatterLayout, multi-touch a animácie.

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