Como crear una calculadora en kivy

En este pequeño tutorial crearemos una calculadora usando kivy nuestra biblioteca para crear interfaces gráficas en python, como ya sabemos kivy es muy fácil de usar y de implementar. 
Este sera un tutorial dirigido a todas las personas que están empezando a programar en python y quieren empezar a crear pequeños proyectos que son fáciles pero te ayudan a entender la lógica de programación en python.


Una calculadora creada en python usando kivy


Requisitos para el tutorial

  • Tener instalado python (en este caso de preferencia cualquier versión que sea superior a 3.0)
  • Tener instalado kivy y sus dependencias
  • Tener ganas de aprender.
Antes de empezar crearemos dos archivos el primero se llamara main.py y el segundo calculadora.kv



Archivos para crear una calculadora en kivy
El archivo main.py es el principal donde crearemos las función que se encargue de crear las operaciones, además ahí agregaremos el código encargado de crear la aplicación. El archivo calculadora.kv es donde agregaremos comandos en lenguaje kv el lenguaje encargado de crear los gráficos(no significa que no los podamos crear en el archivo main.py es simplemente para hacerlo de forma ordenada.)


En nuestro archivo main.py agregamos.




He dejado comentarios en todo el código con una breve explicación de lo que estamos haciendo, no es necesario que escribas eso, es mas escribe todo el código y después agrega comentarios usando tus propias palabras.

Ahora abrimos nuestro archivo calculadora.kv y agregamos el siguiente código.

#:kivy 1.0
#:import kivy kivy
<CustButton@Button>:
    font_size: 32
    color: 1, 1, 1, 1
<calculadora_screen>:
    size:self.size
    id:My_Calc
    display: entry
    padding: 3
    spacing: 5
    rows: 6
    BoxLayout:
        TextInput:
            id: entry
            font_size: 32
            multiline: False
 
    BoxLayout:
        spacing: 6
        CustButton:
            text: "7"
            on_press:entry.text += self.text
         
        CustButton:
            text: "8"
            on_press:entry.text += self.text
        CustButton:
            text: "9"
            on_press:entry.text += self.text
        CustButton:
            text: "*"
            on_press:entry.text += self.text
 
 
    BoxLayout:
        spacing:6
        CustButton:
            text: "4"
            on_press:entry.text += self.text
         
        CustButton:
            text: "5"
            on_press:entry.text += self.text
        CustButton:
            text: "6"
            on_press:entry.text += self.text
        CustButton:
            text: "/"
            on_press:entry.text += self.text
 
 
    BoxLayout:
        spacing: 6
        CustButton:
            text: "1"
            on_press:entry.text += self.text        
        CustButton:
            text: "2"
            on_press:entry.text += self.text
        CustButton:
            text: "3"
            on_press:entry.text += self.text
        CustButton:
            text: "-"
            on_press:entry.text += self.text
         
         
    BoxLayout:
        spacing: 6
        CustButton:
            text: "AC"
            on_press:entry.text =""
        CustButton:
            text: "0"
            on_press:entry.text += self.text
        CustButton:
            text: "="
            on_press: My_Calc.calculate(entry.text)
        CustButton:
            text: "+"
            on_press:entry.text += self.text

Explicación que pasa en el archivo calculadora.kv

Primero creamos un botón personalizado donde nos aseguramos que todos los botones tengan las mismas propiedades como por ejemplo: color de texto, tamaño de texto, estilo de texto y otros. Esto lo hacemos de esta forma:

<CustButton@Button>:
    font_size: 32
    color: 1, 1, 1, 1
Si notas todo el código cada ves que agregue un botón  use mi botón personalizado CustButton.  

Ahora nos encargaremos de hacer referencia de nuestro clase calculadora_screen. 

<calculadora_screen>:
    size:self.size
    id:My_Calc
    display: entry
    padding: 3
    spacing: 5
    rows: 6


Si ves con detalle nuestro código en el archivo main.py estamos usando un layout llamado GridLayout. donde ordenamos todo mediante la declaración de en cuantas columnas o filas se dividirá nuestra pantalla o área de trabajo. si quieres saber mas aserca de esto visita nuestro post tipos de layout en kivy, donde explicamos con mas detalle lo anterior.
Sabiendo ya que es un GridLayout le agregamos un id: My_Calc además propiedades display: entry que nos servirá para poder agregar los números a la pantalla, también definimos en numero de filas que tendrá nuestro layout rows: 6 y simplemente para que nuestra app se mire bonita agregamos padding: 3 (Espacio entre cada widget) y spacing: 5 (Espacio entre widget y el borde de la pantalla).


Ya definido como se comportara nuestro GridLayout,  Usamos 5 BoxLayout  que tomaran lugar en cada una de las filas que tenemos disponible, esto lo hacemos de arriba hacia abajo.
En el primer BoxLayout agregamos nuestro cuadro de texto/TextInput que es donde aparecerá nuestros números cada ves que presionemos un botón además ahí veremos el resultado de todas las operaciones que realicemos. definiendo el id: entry, el tamaño del texto font_size: 32 y multiline: False para que nuestro TextInput tenga una sola linea.


BoxLayout:
        TextInput:
            id: entry
            font_size: 32
            multiline: False
Tiendo ya esto empezamos a agregar los botones, agregando 4 por cada BoxLayout
ejemplo:

 BoxLayout:
        spacing: 6
        CustButton:
            text: "7"
            on_press:entry.text += self.text
Cada botón tendrá propiedad text donde agregamos el numero que corresponde y  propiedad on_press donde agregamos una pequeña formula entry.text += self.text que lo que hará es usar lo que tengamos en la propiedad text ejemplo text: "7"  y lo agregamos a nuestra a entry.text (recuerda entry es el id de nuestro TextInput).

De esta forma nuestra calculadora debería funcionar a la perfección, Espero que disfrutes esta entrada, cualquier duda o inquietud déjame saberlo comentando. Gracias.

2 comentarios:

  1. Excelente
    Me ha ayudado mucho.
    Gracias

    ResponderEliminar
  2. hola, llegué a transcribir los códigos en mi VSC que lo abrí desde Anaconda, generé un entorno virtual, instalé Kivy según propone Anaconda con " conda install -c conda-forge kivy" , y traté de ejecutar los sripts main.py y calculadora.kv ; solo que no me queda claro cual deba de ejecutar y como hacerlo, si me podrías orientar, quedo atento, gracias!

    ResponderEliminar

Queremos saber que opinas del post, por favor comentamos todas tus opiniones, sugerencias y dudas