Cuadros de texto, etiquetas y botones en kivy

Tres elementos básicos y los mas utilizados casi cualquier lenguaje de programación con interfaz gráfica. si hablamos de los cuadros de texto, etiquetas y botones.

En kivy los conoceremos cómo:
Cuadro de texto = TextInput
Etiqueta= Label
Botón = Button 

Como todo lenguaje de programación, es común  usar  comandos en ingles pero no te preocupes mas adelante veras que fácil son de utilizar.

Por lo tanto he creado este pequeño  tutorial donde aprenderás a usar estos tres elementos, creando una pequeña aplicación donde ingresaras tu nombre en el cuadro de texto y agregaremos una función para que dicho nombre se muestre en nuestra etiqueta. Con dos botones uno para mostrar el texto y el otro para limpiar el cuadro de texto y la etiqueta. 

Misión del Tutorial

Mostrarte lo fácil que es usar kivy, aclarando cada detalle de forma que puedas crear tus propias aplicaciones.

Lo que crearemos quedaría de esta manera.

Imagen creada en android

Es momento de empezar a codificar.

En kivy es fácil crear aplicaciones simplemente tenemos que exportar los elementos que vamos a utilizar del framework a nuestro proyecto, a estos elementos los llamaremos módulos.

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivy.core.window import Window

Como ves importamos 4 módulos.

1. El primer módulo nos sirve parea crear la aplicación, básicamente lo usaremos siempre.
2. Con el segundo modulo podemos agregar lenguaje KV que nos sirve para crear los gráficos de nuestra aplicación.
3. El tercer modulo es un simple contenedor donde agregaremos los botones y etiquetas usando lenguaje KV.
4. El cuarto modulo lo utilizare simplemente para cambiar el color de fondo de nuestra aplicación.

La otra parte de nuestro código sera este.

class test_screen(FloatLayout):
    def mostrar(self, text):
        pass
    def borrar(self, text):
        pass
   
class TestApp(App):
    def build(self):
        Window.clearcolor= 1,1,1,1
        return test_screen()
if __name__ == '__main__':
    TestApp().run()

Las aplicación creadas en kivy se basan en la programación orientada a objetos. Por lo tanto usamos el comando class para crear uno. En este caso creamos dos objetos, el primero 

class test_screen(FloatLayout):
   def cambiar(self, text):
        pass
    def borrar(self):
        pass
   

Este sera nuestro contenedor dentro de el agregaremos los botones y la etiqueta, además agregue dos funciones dentro de el, que nos servirán mas adelante. Si notas esta clase usara el modulo FloatLayout que es uno de los muchos layouts que kivy brinda.

Nuestro segundo objeto es el encargado de crear la aplicación usando el modulo App que ya exportamos.

class TestApp(App):
    def build(self):
        Window.clearcolor= 1,1,1,1
        return test_screen()

También usaremos el modulo Windows donde cambiaremos el color de fondo de pantalla de nuestra app usando código RGBA.

Genial nuestra aplicación lo único que le faltaría seria la función que haga que todo el código funcione, esto lo podemos hacer de 2 formas la primera seria usando está declaración.

if __name__ == '__main__':
    TestApp().run()

Y la segunda usando esta declaración

MyApp = TestApp()
MyApp.run()

Cualquiera de las dos es valida aunque la mas usada es la primera declaración.

Repasando lo anterior nuestro código quedaría asi.

from kivy.app import Appfrom kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivy.core.window import Window
class test_screen(FloatLayout):
    def cambiar(self, text):
        pass
    def borrar(self):
        pass
   
class TestApp(App):
    def build(self):
        Window.clearcolor= 1,1,1,1
        return test_screen()
if __name__ == '__main__':
    TestApp().run()

Puedes guardar el archivo así:

ejempo.py

Pero si corremos este código simplemente tendríamos como resultado una pantalla blanca. Es momento de agregar los botones para eso usaremos el lenguaje KV.

Para usar el lenguajes KV sin crear otro archivo podemos usar el modulo Builder que nos permite usarlo desde aquí usando este comando: 

Builder.load_string("""
#aqui podemos usar lenguaje KV.
""")

Nuestra aplicación quedaría así.

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivy.core.window import Window
Builder.load_string("""
#aqui podemos usar lenguaje KV.
""")
class test_screen(FloatLayout):
    def cambiar(self, text):
        pass
    def borrar(self):
        pass
   
class TestApp(App):
    def build(self):
        Window.clearcolor= 1,1,1,1
        return test_screen()
if __name__ == '__main__':
    TestApp().run()

Ahora es momento de hacer referencia de nuestro contenedor que ya construimos para poder agregar los botones y la etiqueta dentro de el. Para esto dentro del comando anterior agregamos esta nueva linea.

Builder.load_string("""
<test_screen>:
""")

De esta forma todo lo que ingresemos debajo de <test_screen>: se enlasara con nuestro objeto test_screen de nuestra app.

Para agregar el cuadro de texto y la etiqueta simplemente ingresamos los correspondientes comandos dentro de : de esta manera:

Si notas he agregado varias propiedades a cada elemento a continuación explicare para que sirve cada una.

Id: nos sirve para identifica un elemento en todo nuestro codigo, por lo tanto podemos crear funciones para cambiar o asignarle un valor si así deseamos.

text: para mostrar texto en nuestra etiqueta o agregarle nombre a un boton. 

font_size: para incrementar el tamaño de las letras

size_hint: para definir el tamaño de nuestro elemento usando el tamaño total disponible usando representaciones en x como en y ejemplo si agregamos esta propiedad a un botón  size_hint: 1,0 .5  el botón tomara el 100% de espacio disponible en x así mismo el 50% en y.

pos_hint: para posicionar un objeto en la pantalla de acuerdo a los porcentajes dados ejemplo. 

pos_hint:{'center_x':.5,'y':.6}

De esta forma nuestro objeto quedara centrado en x y un poquito arriba del centro de y.

color: para definir el color del texto 

hint_text: para agregar un texto de fondo en nuestro cuadro de texto.

Y por ultimo además de poder definir el tamaño de un objeto de acuerdo al tamaño de nuestra pantalla, podemos definir el alto y ancho del objeto por lo tanto tendría el mismo tamaño no importando el tamaño de la pantalla. Para esto tenemos que definirlo así

size_hint: None, Noneheight: 200 #alto del objetowidth: 300 #ancho del objeto

El siguiente paso seria agregar los botones, para hacerlo mas estético he agregado otro contener o layout en nuestro archivo KV quedando de esta forma.

He definido un botón como "mostrar" y el otro como "borrar", si corremos nuestro código asta aquí tendríamos la interfaz pero aun no pasaría nada si presionara los botones no funcionaria, para hacer esto posible agregaremos la propiedad on_press  que nos perminte llamar a la función que ya creamos al principio usando el método "root.nombredefunción"

En este caso seria:

on_press: root.mostrar(text.text) #primer botón
on_press: root.borrar() #segundo botón

Ahora nos toca la parte donde nuestra aplicación toma sentido, crearemos el código de cada función. 

Para poder agregar el texto que ingresamos en el cuadro de texto a nuestra etiqueta simplemente aremos esto:

def  cambiar(self, text):    self.text = text     self.ids['label'].text = text

El código funciona así: 

Primero; le agregamos un id a nuestra etiqueta/Label en este caso label, también le agregamos un id a nuestro cuadro de texto/TextInput en este caso text esto nos sirve para poder modificar cualquier propiedad de nuestros elementos.

Segundo; en la propiedad on_press no solo llamamos  a la función, sino que también ingresamos la información que esta guardada en la propiedad text de nuestro cuadro de texto.

Tercero; nuestra información ingresa a la función, la agregamos a una variable y luego usamos el comando self.ids[label''].text donde declaramos que la propiedad text de la etiqueta con id label tomara el valor que le asignemos,en esta ocasión el texto que nosotros ya ingresamos en el cuadro de texto.


Por ultimo para poder limpiar o eliminar el texto de cada elemento usaremos como base cuesto código anterior solo que en esta ocasión no agregamos ninguna información sobre ella, de esta manera:

def  borrar(self):    self.ids['label'].text = ""    self.ids['text'].text = ""

De esta forma terminaría todo nuestro código, por lo que ahora ya podemos ver como funciona nuestra pequeña aplicación.

Trate de explicar cada de detalle y cualquier duda o sugerencia por favor comenta. gracias.