Tobia Cargnello

Interfacce grafiche con Kivy 2 - Installazione di Kivy e creazione di un primo sketch di interfaccia

2019-11-05 05:23:01

Cominciamo a sporcarci le mani e vediamo subito come creare un primo prototipo di interfaccia usando quattro widget fondamentali in Kivy: Boxlayout, Label, TextInput e Button.

Installazione di Kivy

Installare Kivy su PyCharm è davvero facile, pochi secondi e si avrà il framework disponibile. 

Se non usate PyCharm su sistemi Linux è altrettanto facile digitando un semplice comando da terminale.

Se invece state operando su sistemi operativi che non sono Linux potete consultare le guide passo passo descritte nella sezione Download del sito ufficiale di Kivy, i procedimenti da seguire dovrebbero essere alla portata di tutti.

La nostra primissima interfaccia

Una volta installato Kivy siamo pronti per creare il nostro primo sketch di interfaccia usando quattro widget fondamentali di Kivy:

  • Boxlayout: ci permette di creare le "scatole" che conterranno contenuti come, ad esempio, altri widget, grafici, immagini, altre scatole e via dicendo
  • Label: "etichetta", ci permette di creare una zona con del testo, lo possiamo usare per i titoli, descrizioni, sottotitoli e quant'altro
  • TextInput: casella per l'inserimento di testo da tastiera
  • Button: "pulsante", widget che permette di creare un pulsante che si collegherà con azioni definite in python che ci permetterà di rendere interattiva la nostra interfaccia. 

Tramite questi quattro widget siamo in grado di creare una prima bozza del nostro form da compilare. 

Una volta arrivati alla fine del video sentitevi liberi di sperimentare cambiando disposizione dei widget, cambiando i valori degli attributi utilizzati per vedere che succede, la creatività è la benvenuta!


Sotto trovate lo sketch che ho seguito per questo primo step, è molto "spartano" e lascia molto a desiderare, ma penso sia utile per visualizzare il risultato che voglio ottenere in questo video.


Good practice

Prima di scrivere codice ed andare a tentativi è una buona pratica (a mio avviso) fare una bozza del risultato che si vuole ottenere con il codice che si sta per scrivere.

Anche se è un risultato intermedio e non il prodotto finale aiuta molto a capire quali strumenti è meglio utilizzare e quali no.

Non serve che la bozza sia definitiva tanto meno che sia accuarta (vedi mio sketch sopra), l'importante è che rispecchi più o meno le aspettative che si hanno confronti del codice che si sta per scrivere; in questo modo si risparmia tempo e si chiariscono, almeno un po', le idee.

Info e link

Come già detto sopra al termine del video invito a giocare un po' con Kivy cambiando valori e posizioni.

Reminder: per qualsiasi domanda non si esiti a chiedere!


Sito ufficiale di Kivy: Kivy

Sito ufficiale di PyCharm: PyCharm