Tutorial de Kivy en español

Bueno, ya hemos visto a manera demostrativa algunas cosas que podemos hacer con Kivy. También hemos visto el procedimiento para instalar Buildozer, herramienta que nos ayuda a exportar nuestras apps a Android. Con esta nueva publicación convertimos esta serie de entregas en un tutorial de Kivy en español.

Ya he mencionado que necesitamos un dominio, al menos básico, de Python.

Puedes revisar las anteriores entregas:

Programar aplicaciones para Android con Python y Kivy

Desarrollo de apps en Python para Android

Leer localización GPS en dispositivo Android con Kivy

Kivy nos proporciona la mayoría de widgets que un usuario necesita para interactuar con la aplicación (botones, campos de texto, elementos de formularios, sliders, acceso a la cámara del teléfono y a sensores, etc).

Realmente Kivy trabaja con el lenguaje KV (también llamado kvlang), que es como un lenguaje markdown. Kvlang permite interoperabilidad con Python. Con kvlang se diseña las interfaces de usuario, y con Python se procesa la lógica.

Habíamos visto en el desarrollo de la calculadora distribuida en red, que todo el código KV está dentro del mismo script de Python (py). Sin embargo, en una app compleja se separa el lenguaje KV del script py, debido a que el manejo de los children se torna complejo dentro del mismo Python.

Tutorial de Kivy en español – despliegue de un botón

---

De acuerdo con todo esto, vamos a crear un botón el cual luce así sin presionarlo (izquierda), y presionado (derecha):

Este es su código:

#!/usr/bin/env python3.6

from kivy.app import App

class MiaplicacionApp(App):
    pass

app = MiaplicacionApp()
app.run()

El archivo kivy miaplicacion.kv:

BoxLayout:

    orientation: 'vertical'
    Button:
        id: btn1
        text: 'Aceptar'
        on_press: print('Me presionaste')

Ahora vamos a cambiarle el color de fondo. Le pondremos un color zapote:

BoxLayout:

    orientation: 'vertical'
    Button:
        id: btn1
        text: 'Aceptar'
        on_press: print('Me presionaste')
        background_color: (1, .75, .07, 1)

Y así luce:

Aunque debido a una capa traslucida que KV le pone, se ve más como un café que como un zapote. Para quitar esa traslucidez, adicionamos la siguiente línea de código:

BoxLayout:

    orientation: 'vertical'
    Button:
        id: btn1
        text: 'Aceptar'
        on_press: print('Me presionaste')
        background_color: (1, .65, .07, 1)
        background_normal: ''

y luce así:

Kivy trabaja los colores codificados en RGB, más el canal alfa, y formateados en fracciones decimales.

Las fracciones decimales son el resultado de dividir el valor RGB entre 255. Para nuestro zapote resulta de la operación:

255/255 = 1,00
166/255 = 0,65
18/255 = 0,07

Si de pronto nos sentimos perdidos entre los decimales, podemos formatear los fraccionarios así:

background_color: (255/255, 166/255, 18/255, 1)

Y el resultado en nuestro caso es el mismo color.

Para configurar el tamaño de un botón, podemos usar la instrucción size_hint. Sus valores de ancho y alto son valores fraccionarios entre 0.0 y 1.0.

Nuestro botón luce así después de definir su tamaño en 1 y 0.3:

BoxLayout:

    orientation: 'vertical'
    Button:
        id: btn1
        text: 'Aceptar'
        on_press: print('Me presionaste')
        background_color: (255/255, 166/255, 18/255, 1)
        background_normal: ''
        size_hint: .8, .3

Como nuestro botón está dentro de un BoxLayout con orientación vertical, el valor en la anchura de size_hint no lo afecta.

NOTA: El identificador único del widget siempre va sin comillas.

Diseño de rectángulos con Kivy

---

El diseño de rectángulos en Kivy también es un procedimiento muy sencillo. Nos basamos en un widget tipo Label para diseñarlo. Adicionalmente debemos acudir al uso del objeto canvas para diseñar formas geométricas

BoxLayout:
    orientation: 'vertical'
    Label:
        id: rectangulo1
        canvas:
            Rectangle:
                pos: 200, 200
                size: 40, 400

Ahí lo tenemos.

Los parámetros pos y size definen su posición en la pantalla (como valores de coordenadas x,y) y su tamaño (ancho en sentido horizontal y altura en sentido vertical), respectivamente.

El paramétro de posición en este caso (así simple, sin más) define su posición en la pantalla únicamente con relación al borde izquierdo de la ventana:

He puesto una regla en la pantalla para que podamos observar el efecto del parámetro pos (puedes instalar en Ubuntu con el comando sudo apt install screenruler). Por más que redimensionemos la ventana, el rectangulo siempre se mantendrá a 200 pixeles del borde izquierdo.

Para que el rectángulo se mantenga proporcionalmente en su ubicación, con relación al tamaño de la ventana (es decir, que el rectángulo se reacomode en su posición asignada), debemos calcular la relación entre el tamaño de la ventana y la posición proporcional desde el borde de la ventana, que necesitamos que se ubique.

Por ejemplo, si necesitamos que el rectángulo se mantenga siempre a 1/4 del borde izquierdo de la ventana en el plano X, sin importar el tamaño de la ventana, debemos dividir sobre 4 el tamaño de la ventana, así:

pos: root.width/4, root.height/5

Suponiendo que el ancho de la ventana sea de 800 pixeles, entonces el rectángulo se ubica a 200 pixeles desde el borde izquierdo:

Si redimensionamos la pantalla a 400 pixeles de ancho, el rectángulo así mismo se reubicará a 1/4 del ancho de la ventana, o sea, a 100 pixeles del borde izquierdo:

Rotación del objeto

---

Listo, ahora vamos a royar nuestro rectángulo 45 grados, adicionando la instrucción Rotate::

BoxLayout:
    orientation: 'vertical'
    Label:
        id: rectangulo1
        canvas:
            Rotate:
                angle: 45
                axis: 0, 0, 1 
            Rectangle:
                size: 40, 400
                pos: root.width/4, root.height/528

Y ahí lo tenemos… ah pero qué rayos!…

Me ha quedado todo rotado 45 grados ¿Qué es lo que pasa en este tutorial de Kivy en español?

Bueno, eso sucede porque no delimité el giro al rectángulo, sino que lo dejé totalmente abierto y por eso Kivy rotó 45 grados todo.

Para delimitar el giro únicamente al rectángulo (como para cualquier otro widget), debemos usar las instrucciones PushMatrix y PosMatrix, de la siguiente forma:

BoxLayout:
orientation: 'vertical'
    Label:
        id: rectangulo1
        canvas:
            PushMatrix:
            Rotate:
                angle: 45
                axis: 0, 0, 1
            Rectangle:
                size: 40, 400
                pos: root.width/4, root.height/528
            PopMatrix:

Ahora así:

Otra punto a tener en cuenta es que el centro de giro es se ubica en la mitad del objeto.

También podemos definir los valores de las propiedades de los widget (colores, ángulos, etc) desde el mismo Python. Para este caso, creamos una variable llamada «angulo» dentro del py, y le damos el valor de 15. Luego en el widget traemos esa variable con la clase app:

 

---

Valora este artículo

Nombres
Email
Titulo
Calificanos
Contenido

Comparte esto en