Posts made in marzo, 2015

The world of RecyclerView – parte 2

Posted by on Mar 25, 2015 in Tutte | 0 comments

The world of RecyclerView – parte 2

Nella prima parte di questa serie di articoli dedicati al mondo delle RecyclerView ho descritto il nuovo approccio alle liste dal punto di vista teorico,  in questa seconta parte vi illustrerò il  codice dell’ esempio allegato.

L’ esempio visualizza una lista di nomi di paesi.

Per prima cosa importiamo le dipendenze. Nel file build.gradle del modulo app inseriamo:

 

Il layout dell’ Activity: in questo esempio ho usato anche  la nuova Toolbar.

activity_main.xml

Il layout di un singolo item: una semplice TextView.

country_item.xml

Nell’ activity principale nel metodo onCreate ho scritto il codice per utilizzare la RecyclerView.

Nella prima riga creo un ArrayList<String> prendendo i dati da un array-string dalle risorse string, poi recupero il riferimento della RecyclerView.
La RecyclerView utilizza un’ istanza di RecyclerView.Adapter:  ho creato l’ adapter CountriesAdapater che vedremo dopo.
Utilizziamo il costruttore per passare la lista dei Model all’ adapter.

Come descritto nella prima parte della serie, le RecyclerView non si occupano della visualizzazione delle view,  questo compito adesso è gestito da un layout manager.
Le tipologie di layout manager che possiamo usare di default sono 3:

  • LinearLayoutManager: crea una lista verticale o orizontale.
  • GridLayoutManager: crea una griglia a blocchi
  • StaggeredGridLayoutManager: crea una griglia a blocchi non ordinati

E’ possibile anche creare dei layout manager personalizzati.

Nell’ esempio ho utilizzato un’ istanza di LinearLayoutManager che di default usa l’ orientamento verticale come nelle ListView.
La riga 7 può essere anche omessa, per le animazioni useremo un’ istanza della classe RecyclerView.ItemAnimator; vedremo nella terza parte di questa serie come personalizzare le animazioni.
Come nelle ListView  passiamo alla Recyclerview l’ adapter.
In  6-7 righe troviamo tutto il codice che ci serve per creare e configurare una lista.

E’ arrivato il momento di guardare con attenzione il nuovo adapter.
L’ adapter che utilizza la RecyclerView non estende più un BaseAdapter o un ArrayAdapter<T> ma è  una sottoclasse del RecyclerView.Adapter con il parametro generics del nuovo ViewHolder: in questo caso MyViewHolder che estende RecyclerView.ViewHolder

Il team di sviluppo Android  ha sempre consigliato l’ implementazione del pattern ViewHolder per fare cache delle view(e rendere efficienti le liste):  adesso ha creato una sua implementazione.(Era ora !! 🙂 )

Ecco il codice:

I metodi più importanti dell’ adapter sono due:  onCreateViewHolderonBindViewHolder

Il metodo onCreateViewHolder esegue l’ inflate del layout (riga 14) e crea l’ istanza di MyViewHolder .
MyViewHolder estende RecyclerView.ViewHolder e si occupa di recuperare le view e creare la cache.
Il metodo onBindViewHolder gestisce le varie view che fanno parte del layout, in questo caso utilizza la TextView  mCountryText per scrivere il nome del paese (riga 21).

Per quanto riguarda la creazione della lista è tutto, Google ha semplificato il più possibile.

Ecco la nostra lista:

List Vertical

Lo schema è semplice: RecyclerView+LinearLayoutManager+Adapter (Model)

RecyclerView Schema

Nell’ esempio che vi ho allegato nella prima parte  e che vi riallego anche in questa, ho aggiunto la possibilità di cambiare in runtime il tipo di layout manager per farvi rendere conto della flessibilità ed estendibilità delle RecyclerView.

Attraverso le opzioni del menu settiamo un diverso layout manager .

Al tap del menu  grid creo un GridLayoutManager che visualizza la lista sotto forma di griglia (riga 4).
Ho aggiunto anche l’ opzione setSpanSizeLookup che determina  lo spazio di ogni item.

Ecco il risultato:

GridLayout

Al tap del menu list cambio l’ orientamento del LinearLayoutManager da verticale ad orizzontale e viceversa (righe 25 e 30).

Ecco il risultato:

List Horizontal

Con poche righe di codice possiamo cambiare totalemente la tipologia di visualizzazione delle nostre liste.

Le RecyclerView hanno un potenziale interessante e penso che Google ha l’ interesse a migliorarle (vedremo al Google I/O 2015).

E’ tutto, alla prossima puntata.

RecyclerViewExample source in GitHub

 

 

 

 

Read More

The world of RecyclerView – parte 1

Posted by on Mar 23, 2015 in Android, RecyclerView | 0 comments

The world of RecyclerView – parte 1

Il  titolo di questa serie di articoli riprende il titolo di una delle più interessanti sessioni del Google I/O del 2010: The world of ListView : la serie invece tratterà  delle RecyclerView.
In quel talk  Romain Guy e Adam Powell spiegavano il mondo delle ListView: uno dei widget più usati e indispensabili nello sviluppo Android.
Il mondo delle RecyclerView è iniziato al Google I/O 2014 con Android 5.0 L chiamato dopo Android Lollipop.
Le Recyclerview e le ListView hanno molto in comune: la visualizzazione di elementi dello stesso tipo.
Si suppone che le recyclerview sostituiranno le listview.

La Recylerview è più avanzata,  flessibile e  veloce  nella gestione di grandi liste di dati. Quando l’ utente scorre verso l’ alto o verso il basso entra in gioco il riciclo degli elementi non più visualizzati: questo riciclo o riutilizzo delle view rende le  recylerview molto efficenti.
Il concetto appare molto simile alle ListView ma con un approcio diverso.
Mentre nelle Listview tutto è collegato: base dati, layout, immagini, componenti,animazioni; nelle recylerview non c’è questo stretto legame: la recyclerview non si preoccupa dove posizionare  gli elementi, nè delle immagini o  layout ma si preoccupa soprattutto del riciclo o riutilizzo delle view e rendere tutto più veloce.
Uno dei benefici di questo diverso approcio  è la possibilità di cambiare (in runtime) tipo di visualizzazione: da visualizzazione a lista verticale a lista orizzontale, da vista a card a vista custom. Vedremo in seguito qualche esempio.
Per la visualizzazione, i layout, la gestione dei  dati la recyclerview delega questi compiti alle sotto classi:

RecyclerView.Adapter
Simile all’ adapter che conosciamo si occupa di ricevere i dati e di creare le view.
Non  utilizzeremo  più ArrayAdapter<Model> ma RecyclerView.Adapter<ReclyclerView.ViewHolder>

RecyclerView.ViewHolder
Crea una cache delle view che servono alla creazione della lista.

RecyclerView.LayoutManager
Si occupa di posizionare le view e di determinare il tipo di visualizzazione.
La libreria mette a disposizione 3 differenti layout manager: LinearLayoutManagerGridLayoutManager,StaggeredGridLayoutManager

RecyclerView.ItemDecoration
Modifica l’ aspetto grafico degli item.

RecyclerView.ItemAnimator
Gestisce le animazioni. In genere le 3 principali azioni: adding, removing and moving

Queste sono le classi che permettono quella flessibilità di cui ho parlato prima.
Le recyclerview sono state sviluppate con lo scopo  di migliorare l ‘ estendibilità (extensibility).
Per cambiare totalmente visualizzazione scegliamo uno dei 3  LayoutManager o uno custom, per avere più  animazioni  personalizziamo  ItemAnimator,  per cambiare  l’ aspetto degli item usiamo ItemDecoration.

Merita attenzione la classe ViewHolder. Il pattern viewholder è sempre stato raccomandato dal team di google per rendere efficente la listview, e nella recylcerview (in ritardo secondo me) ha una vera e propria implementazione e ha un ruolo più importante.

Dimenticavo che possiamo usare le recyclerview anche nelle precedenti versioni di Android perchè sono state aggiunte alle librerie support.
Per Android Studio la dipendenza è:

Nella seconda parte della serie di articoli dedicati alle recyclerview spiegherò un esempio basilare e nei successivi articoli vedremo qualche esempio di personalizzazione e animazione.
Edit: aggiungo il link del primo esempio: RecyclerViewExample

Read More

Palette: estrarre colori da una bitmap

Posted by on Mar 18, 2015 in Tutte | 0 comments

Lollipop e il Material Design hanno introdotto un numero considerevole di animazioni, effetti e soprattutto molto colore. Un confronto tra l’ interfaccia di Android 2.0 o 2.2 e Android 5.0 ci mostra l’ enorme differenza di tonalità. Ho introdotto l’ argomento colore perchè oggi vi parlo di una nuova API di Lollipop (presente anche nelle librerie support): Palette.
Questa API permette di estrarre da una bitmap i colori più rilevanti cosi da adattare la UI della nostra app ad un’ immagine.
Un’ effetto molto bello è cambiare il colore della toolbar a seconda dell’ immagine caricata ma potremmo per esempio cambiare lo sfondo di una galleria prendendo i colori dall’ immagine in primo piano.

ezgif.com-optimize

(ps: per gif migliori…mi sto attrezzando :)) 

Per prima cosa importiamo le dipendenze.

Nel file build.gradle del nostro modulo app:

Esistono due metodi per creare la Palette ed estrarre i colori: sincrono e asincrono.
Sincrono non dovrebbe essere chiamato in un main thread ma alla fine del caricamento di un’ immagine in un thread in background.
Nel mio esempio su Github che allego l’ho usato nel main thread perchè su un Nexus 5 il metodo sincrono  ha tempi di creazione molto rapidi circa 20-30 millesimi di secondi.

Oltre al parametro bitmap il metodo generate accetta anche  un int che rappresenta il size della palette cioè il numero di colori presi in considerazioni. Il default è 15 ma è possibile passare sia un numero inferiore sia  superiore. Se la bitmap è grande e con tanti colori passare un size superiore al 15 potrebbe far aumentare i tempi di creazione della Palette.

Non esiste un size perfetto ma è consigliato:

  • Immagini grandi, landscape : 8-16
  • Immagini di contatti/avatart: 24-32

Il valore di default è un buon compromesso e funziona in quasi tutte le situazioni.

Metodo asincrono:

Dall’ instanza della Palette otteniamo sei colori:

  • Vibrant
  • Vibrant Dark
  • Vibrant Light
  • Muted
  • Muted Dark
  • Muted Light

I colori che ci interessano o che potremmo usare nella nostra app sono: Vibrant e Vibrant Dark.

 Palette Swatches

La classe Palette ci mette a disposizione anche un interessante oggetto: Swatch.

Swatch permette di ottenere altre informazioni sul colore.

  • getPopulation():  numero di pixel totali di quel colore
  • getRgb(): colore RGB
  • getHsl(): colore HSL
  • getBodyTextColor(): restituisce un colore che può essere usato nel testo  sopra il colore garantendo un constratto sufficiente per la leggibilità.
  • getTitleTextColor(): restituisce un colore che può essere usato come titolo sopra il colore garantendo un constratto sufficiente per la leggibilità.

Ecco i sorgenti del progetto  Palettexample

 

 

 

Read More