Nuova versione di MIT App Inventor 2 (nb145) finalmente il Responsive Design

Vediamo in questo articolo la novità principale di MIT App Inventor 2 versione nb145.

Il tool semplice e gratuito per la realizzazione di android app web based.

E' stato introdotto il Responsive Design , finalmente sono stati fatti i primi passi per permettere alle app realizzate con App Inventor di adattarsi alla dimensione dei vari dispositivi (soprattutto smartphone e tablet).

La documentazione ufficiale la si può trovare a questo link http://ai2.appinventor.mit.edu/reference/other/responsiveDesign.html
Nel mio articolo vi spiegherò le stesse cose con anche un paio di esempi pratici.

Per prima cosa spieghiamo come è stato implementato il Responsive Design in App Inventor; a differenza della programmazione Android "classica" dove si caricano varie immagini (asset) per le varie risoluzioni schermo (bassa, media, alta risoluzione, etc...) in AI hanno deciso di seguire una strada più semplice, dove lo stesso asset viene scalato "al meglio" utilizzando sempre lo stesso file (quindi meglio caricare un file dalla risoluzione maggiore d'ora in avanti). Questo approccio è più limitato ma si è reso necessario per non complicare troppo AI.

Le misure vanno ora specificate in percentuale:
Per realizzare app in responsive design le dimensioni dei componenti (width e height) vanno ora specificate in percentuale della dimensione dello schermo piuttosto che in un numero fisso di pixel.

Per esempio per fare un pulsante con larghezza metà dello schermo, impostate la sua "width" a 50% invece che ad un numero specifico di pixel.

Nel design editor vedrete ora la nuova opzione:

La "percentuale" è da intendersi SEMPRE come percentuale delle misure di larghezza e altezza relative allo schermo, non come percentuale del componente che lo contiene.
Quindi ad esempio un pulsante all'interno di un horizontal arrangement con specificata una larghezza di 50% prenderà il 50% della larghezza dello schermo, non della misura dell'horizontal arrangement che lo contiene.

Potete ovviamente continuare a specificare le misure anche come "fill parent" o "automatic" come si è sempre fatto.

Screen1 sizing "Fixed" vs "Responsive"

Come vedete una delle nuove proprietà in Screen1 è "Sizing" che può essere impostato a "Fixed" o "Responsive".

Molti sviluppatori non vorranno cambiare il metodo di creazione delle loro app, per fare questo basta impostare la proprietà a "Fixed" e tutto funzionerà come prima.

Quando il modo è impostato su "Fixed", App Inventor lavora con uno screen size fisso di 320 x 460 pixel, ogni immagine e elemento verrà scalato su schermi più grandi con quindi un effetto di minor risoluzione e sgranatura più evidente delle immagini (questo è il modo in cui funzionava AI in tutte le versioni precedenti alla nb145).

Ovviamente è suggerito l'utilizzo della nuova modalità "Responsive", tenendo presente quanto detto sopra per la definizione delle misure nella vostra app, usate sempre i valori in percentuale.

Un'importante differenza viene fatta nella gestione dei "Canvas" e tutto quello che è contenuto al loro interno "sprites" "ball" etc...vedremo questa limitazione più avanti...

Esempio dettagliato

Supponiamo di avere un app con un pulsante, vogliamo che il pulsante prenda il 50% dello spazio orizzontale del vostro schermo.

La risoluzione del vostro schermo è 320x460, imposto la larghezza del pulsante a 160 pixel e il modo sizing a "fixed".
Se da blocks editor leggo il valore della larghezza del pulsante, avrò il valore 160. Se leggo il valore della larghezza dello schermo avrò il valore 320.

Se ora installo l'app su un tablet con risoluzione 600x860, sempre con metodo "fixed" e chiedo ad AI le dimensioni del pulsante e dello schermo, mi ritornerà sempre i valori 160 e 320, anche un eventuale immagine verrà espansa per riempire tutto lo schermo.
AI gestisce il tablet come se avesse ancora risoluzione di 320x460 quindi non sfruttando appieno la risoluzione più elevata del tablet, quindi la resa sarà peggiore con font e immagini "sgranate" e magari font troppo grandi rispetto a quelli che volevate e che avete testato sul vostro smartphone.

Ora se invece avessimo impostato sizing a "Responsive", nel nostro telefono con risoluzione 320x460 non cambierebbe nulla ma le cose sarebbero ben diverse sul tablet...
Perchè ora avremmo infatti una dimensione di 300 pixel per il pulsante e una larghezza di 600 pixel per lo schermo del tablet.
Quindi App Inventor può sfruttare la risoluzione migliore, applicare font nativi con la risoluzione corretta ed in definitiva avremo una grafica più definita e migliore nella nostra app.

Come raccomandazione si consiglia di usare "Responsive" per le vostre nuove app, e "Fixed" per le vecchie app che non volete cambiare, oppure per app che siete sicuri gireranno solo su un device con risoluzione specifica.

Personalmente testando alcune app sul mio OnePlusOne ho subito visto un deciso miglioramento dell'aspetto dell'app usando "Responsive", i font sono più dettagliati e le immagini molto più nitide.
Qui sotto le due modalità a confronto con la stessa app in esecuzione, io noto un notevole miglioramento sui testi, sull'immagine si nota meno (ma vi garantisco che sul mio cellulare la differenza è abbastanza evidente)

A sinistra la versione Responsive a destra la versione Fixed

Limitazioni: palette Drawing and animation
Il supporto al responsive design per ora è incompleto e limitato. Questo è evidente nella palette drawing, con i canvas ed usando gli sprite per le animazioni. Le app usano valori come coordinate in pixel per disegnare i componenti e controllarne i movimenti e le animazioni. Risulta quindi complicato gestire questa cosa con misure diverse degli schermi.
Per ora il team raccomanda queste soluzioni:
1. Usare il metodo "Fixed" per questo tipo di app (principalmente videogiochi)
2. Usare il metodo "Responsive" ma impostare la misura del "Canvas" ad un valore fisso di pixel. In poche parole tutta la vostra app sarà responsive, ma il canvas (e gli oggetti in esso) avranno misure fisse in pixel. Purtroppo in questo modo le grafiche potrebbero risultare sgranate su alcuni dispositivi.
3. Usare il metodo "Responsive" ed impostare il canvas ad una percentuale appropriata della misura dello schermo.
Poi nel canvas fare dei calcoli matematici per computare le distanze delle coordinate relative al valore attuale della dimensione del canvas.
In questo modo avremo i risultati migliori, ma potrebbe essere molto complicato gestire la cosa se abbiamo tanti componenti e tante animazioni...

Per esempio se abbiamo un canvas la cui larghezza è la larghezza dello schermo e vogliamo mettere una oggetto "ball" (una palla) in mezzo al canvas, col metodo fixed posizioneremo la coordinata x dell'oggetto ball a 160 pixel (perchè AI lavora sempre a 320x460 pixel in questo caso).
Ma se usiamo il metodo responsive dovremo calcolare la posizione X quando l'app viene eseguita, ad esempio con un blocco di questo tipo:

In modo che se lo schermo avrà larghezza di 600 pixel, l'oggetto verrà correttamente posizionato alla posizione x = 300 pixel.
Capite che l'approccio è corretto ma è molto laborioso quando avete tanti oggetti da gestire.
Suggerisco di leggere in Screen1.Initialize la misura dello schermo e memorizzare in una variabile il rapporto tra questo e la dimensione di "default" in modo da eseguire facilmente il ridimensionamento per i vari oggetti usando sempre questa variabile.

Responsive design e Google Play
Come sapete potete caricare le vostre app su Google Play, il market filtra in automatico le app realizzate per telefoni e/o tablet e mostra solo quelle compatibili col device in uso.

Le app realizzate con App Inventor sono considerate compatibili in entrambi i casi e sono quindi installabili su tutti i device.
Però se la scaricate da un tablet potrete vedere l'avviso "app sviluppata per telefono". Questo non vi impedisce di far girare l'app su un tablet ma è un avviso che l'app non rispetta al 100% i dettami di Google per lo sviluppo di app responsive (come detto all'inizio dell'articolo considerato l'approccio preso dal team di AI),


Fatemi sapere cosa ne pensate nei commenti qui sotto, sperimentate e confrontiamoci.
Sono comunque molto contento del fatto che il team del MIT App Inventor abbia finalmente deciso di prendere in considerazione il supporto alle diverse risoluzioni ed alle diverse misure degli schermi degli attuali dispositivi Android.

Buon app inventing!!!