Xamarin Forms: cos’è il Bindable Layout

Xamarin vers. 3.5 ha portato un’interessante novità: il Bindable Layout.

Devo ammettere che la prima volta che ne ho letto non mi ha convinto per nulla: mi sembrava la classica “soluzione in cerca di un problema”.

Però poi mi sono sforzato di “trafficarci” per vedere se mi poteva essere utile e mi sono reso conto che, come spesso capita, non ne avevo capito una cippa: in effetti questa nuova feature è in grado di fornire un valido strumento per poter risolvere velocemente un bel po’ di rogne.

Per questo motivo mi sono deciso a scriverne qualcosa, in modo tale da fissare le mie idee sull’argomento.

Che cappero è il Bindable Layout ?

Penso che tutti Voi conosciate la classi Layout e i suoi derivati: questi rappresentano le classi container delegate a contenere e posizionare in modo automatico e nel modo corretto i controlli figlio.

Alcuni esempi notevoli: Absolute Layout, Stack Layout, Grid.

Nota poetica indispensabile: Cosa sarebbe la vita degli sviluppatori Xamarin senza i Layout ? Sarebbe tutto un calcolare e ricalcolare ove posizionare i controlli in base alla dimensione dello schermo.

Ebbene la caratteristica introdotta con Xamarin 3.5 è la possibilità di associare, tramite binding, un oggetto (ad esempio una lista) a una classe Layout.

Lasciatemi spiegare con un semplice esempio. La necessità è quello di rappresentare in una pagina della nostra app scritta in Xamarin la lista delle province liguri (….sapere com’è… sono spesso via per lavoro e non voglio dimenticarmene…).

Iniziamo dal ViewModel.

Ecco invece il codice della pagina Xaml.

Quindi abbiamo eseguito il binding di una lista sulla classe StackLayout: similmente ad altri tipi di binding qui vengono create automaticamente tante label per contenere gli item della lista.

Oss.: Ovviamente è possibile anche in questo caso utilizzare i data template per presentare in dati in modo più ortodosso: quelli di Xamarin pensano proprio tutto, ma che ve lo dico a fare ? Qui però per semplicità abbiamo trascurato tale possibilità.

Ora la domanda sorge spontanea: ma a cosa serve ? Non si otteneva lo stesso risultato usando una meravigliosa ListView ?

A questa semplice domanda è possibile rispondere subito in modo affermativo: è verissimo, il risultato finale usando il codice che usa la ListView a una rapida occhiata è praticamente analogo a quello ottenuto con l’accoppiata StackLayout+Bindable Layout.

Ma esistono in realtà delle grosse differenze: il punto principale è che con il codice sopra si vuole visualizzare una lista arbitraria di stringhe, senza richiedere alcuna interazione con l’utilizzatore, e quindi l’uso di una ListView è assolutamente inutile e superfluo.

Infatti la ListView è pensato per fare cose più complesse ivi compresa l’interazione con l’utilizzatore (clicco su una voce e deve succedere qualcosa).

Quindi il punto è che usando una ListView è abbastanza difficile nascondere al mondo intero che… si sta usando appunto una ListView.

Questo vuole dire, per esempio, che quando si clicca su un elemento della lista l’item stesso viene selezionato e bordato.

Certo, è possibile eliminare questi feedback grafici, ma non è sempre semplicissimo.

Per esempio usando SelectionMode=”None” è possibile evitare che l’item cliccato rimanga selezionato, ma ogni item toccato continuerà a presentare i bordi selezionati (a meno che non si usi ulteriore codice, ovviamente).

Aggiungo che il fatto di usare una ListView in una funzionalità in cui NON serve una ListView può fornire all’utilizzatore strane aspettative (nel nostro esempio stiamo semplicemente presentando una lista di item, e occorre evitare che l’utilizzatore possa selezionare qualche item pensado di accedere a ulteriori funzionalità).

Altra cosa da considerare che la ListView è un “scrollable container” e quindi ha il brutto vizio di prendere tutta l’altezza possibile per presentare al meglio i dati contenuti. Questo porta a grosse difficoltà nel caso la qualche maschera presenti, ad esempio, più ListView e/o sia molto affollata: domare una pagina di questo genere può non essere affatto semplice, e normalmente coinvolge l’utilizzo di più Layout e, orrore degli orrori, più ScrollView.

Ripeto: tutto questo magari per solo visualizzare una semplice lista di item.

Inutile dire che spesso la nostra pagina “domata” può avere penality-perfomance dovuti a un layout troppo complesso.

Altra cosa da considerare è che la ListView non dispone nativamente dello sviluppo orizzontale: certo, può essere abbastanza semplicemente implementato, ma questo è un’ulteriore sforzo di sviluppo inutile se si pensa che magari il nostro scopo è solo quello di rappresentare una piccola lista di stringhe.

Ultimo ma non ultimo: perfomance. Penso sia inutile evidenziare che l’uso di una ListView per rappresentare una semplice lista di stringhe porti a un overhead inutile e dispendioso.

Di contro l’utilizzo di una StackLayout con Bindable Layout permette di ottenere il seguente.

  • Maggiori perfomance
  • Lo StackLayout non occupa più spazio di quello necessario per presentare i suoi elementi e quindi esemplifica i layout di pagine affollate di controlli
  • Non dispone nativamente di alcun elemento grafico per evidenziare un elemento selezionato o scroll bar.
    a figo da matti usare questa funzionalità essendo una feature appena uscita con Xamarin 3.5.

Aggiungo che finalmente si ha la possibilità di usare un controllo nativo alternativo per presentare liste di dati: sinora era possibile solo usando la ListView.

Occorre evidenziare che l’uso del Bindable Layout risulta essere efficace solo per piccole liste: non è infatti adatto a presentare gradi liste di item, per le quali la ListView continua a essere lo strumento perfetto.

Linkografia

Xamarin.Forms 3.5: A Little Bindable Love

Xamarin.Forms 3.5: What’s new? Let’s find out

Hello BindableLayout