App per Android coloranti con tavolozza

Una delle caratteristiche principali del design dei materiali è l'uso del colore per completare e sottolineare il contenuto sullo schermo. Usando il Tavolozza classe, gli sviluppatori possono estrarre colori importanti da una bitmap per utilizzarli nelle loro app per personalizzare gli elementi dell'interfaccia utente.

In questo articolo, imparerai come creare un Tavolozza oggetto da una bitmap. Contenuto all'interno di ciascuno Tavolozza è un insieme di Swatch oggetti che ti permetteranno di lavorare con profili di colore specifici e un elenco di colori visibili dall'immagine.

1. Creazione di una tavolozza

Per iniziare, è necessario importare la libreria di supporto della tavolozza nel progetto includendo la seguente riga nel nodo delle dipendenze del progetto build.gradle file. Poiché questa è una libreria di supporto v7, il Tavolozza le classi correlate sono disponibili per Android API 7.

compila "com.android.support:palette-v7:+"

Dopo aver eseguito a gradle sync sul tuo progetto, sei in grado di generare a Tavolozza da una bitmap. Questo può essere fatto usando il Palette.Builder o sincrono chiamando il creare() metodo senza parametri, o in modo asincrono a chiamata generare (listener Palette.PaletteAsyncListener). Perché ci può volere del tempo per creare il Tavolozza, si consiglia di chiamare il metodo sincrono solo da un thread in background. Oltre ai due metodi di generazione, il Palette.Builder la classe ha un paio di altri metodi utili che vengono con i loro compromessi:

• maximumColorCount (int numOfSwatches) ti permette di cambiare quante Swatch gli oggetti dovrebbero essere generati dalla bitmap. L'impostazione predefinita per il builder è 16. Più Swatch oggetti che generi, più tempo ci vorrà per generare il Tavolozza.
• resizeBitmapSize (int maxDimension) ridimensiona la bitmap in modo che la sua dimensione più grande sia grande quanto il valore passato di questo metodo. Più grande è la bitmap, più tempo ci vorrà per generare un Tavolozza. Allo stesso modo, le bitmap più piccole verranno elaborate più rapidamente, ma perderai la precisione del colore.

Il seguente frammento di codice mostra come creare una bitmap da una risorsa locale e creare in modo asincrono Tavolozza oggetto.

Bitmap bitmap = BitmapFactory.decodeResource (getResources (), R.drawable.union_station); Palette.from (bitmap) .generate (new Palette.PaletteAsyncListener () @Override public void onGenerated (palette palette) // funziona con la tavolozza qui);

Una volta che hai un Tavolozza, puoi iniziare a lavorare con gli associati Swatch oggetti.

2. Campioni

Swatch gli oggetti rappresentano i colori generati dalla tavolozza di un'immagine. Ogni Swatch contiene:

• un RGB (REd, solreen, Blue) e HSL (Hue, Saturation, Lightness) valore per un colore.
• un valore di popolazione che riflette il numero di pixel rappresentati dal Swatch.
• un valore di colore che può essere utilizzato per il testo del titolo quando visualizzato sul SwatchIl colore principale.
• un valore di colore che può essere utilizzato per un corpo di testo quando visualizzato sul SwatchIl colore principale.

Profili Swatch

Ogni Tavolozza ha un set di sei profili colore predefiniti:

• vivace
• luce vibrante
• buio vibrante
• smorzato
• luce attenuata
• scuro muto

Mentre ognuno di questi può essere utile a seconda del design della tua app, vibrante e scuro vibrante sono i più usati. Una cosa da notare è che ognuno di questi profili potrebbe essere nullo, quindi dovresti gestire questa situazione di conseguenza. Nel progetto di esempio, nel onGenerated (palette delle palette) metodo dall'asincrono Palette.Builder, puoi vedere come estrarre ogni profilo Swatch.

setViewSwatch (mVibrantTextView, palette.getVibrantSwatch ()); setViewSwatch (mLightVibrantTextView, palette.getLightVibrantSwatch ()); setViewSwatch (mDarkVibrantTextView, palette.getDarkVibrantSwatch ()); setViewSwatch (mMutedTextView, palette.getMutedSwatch ()); setViewSwatch (mLightMutedTextView, palette.getLightMutedSwatch ()); setViewSwatch (mDarkMutedTextView, palette.getDarkMutedSwatch ());

setViewSwatch (TextView view, Palette.Swatch swatch) è un metodo che accetta a Swatch e TextView, e imposta il TextView colori di sfondo e testo dai valori in Swatch. Noterai che prima controlliamo per vedere se il Swatch è nullo e, se lo è, nascondiamo semplicemente la vista.

public void setViewSwatch (TextView view, Palette.Swatch swatch) if (swatch! = null) view.setTextColor (swatch.getTitleTextColor ()); view.setBackgroundColor (swatch.getRgb ()); view.setVisibility (View.VISIBLE);  else view.setVisibility (View.GONE); 

Campioni aggiuntivi

Oltre al profilo standard Swatch oggetti, ciascuno Tavolozza contiene un elenco di generali Swatch oggetti generati dalla bitmap. Questi possono essere recuperati dal Tavolozza come un Elenco usando il getSwatches () metodo.

Nel progetto di esempio, questo Elenco viene recuperato e inserito in un ArrayAdapter che poi visualizza il Swatch Di conseguenza, il colore principale e il colore del testo del corpo, nonché il numero di pixel rappresentati nella bitmap Swatch. Una cosa a cui prestare attenzione è che l'elenco non è in un ordine particolare. Nel progetto di esempio, ho ordinato gli oggetti in base al loro valore di popolazione.

for (Palette.Swatch swatch: palette.getSwatches ()) mAdapter.add (swatch);  mAdapter.sortSwatches (); mAdapter.notifyDataSetChanged ();

In questo frammento di codice, mAdapter è l'adattatore di Swatch oggetti con i seguenti metodi:

@Override pubblico Visualizza getView (posizione int, Visualizza convertView, ViewGroup parent) titolare ViewHolder; if (convertView == null) holder = new ViewHolder (); convertView = LayoutInflater.from (getContext ()) .inflate (R.layout.color_item, parent, false); holder.view = (TextView) convertView.findViewById (R.id.view); convertView.setTag (titolare);  else holder = (ViewHolder) convertView.getTag ();  holder.view.setBackgroundColor (getItem (position) .getRgb ()); holder.view.setTextColor (getItem (position) .getBodyTextColor ()); holder.view.setText ("Popolazione:" + getItem (posizione) .getPopulation ()); return convertView;  public void sortSwatches () sort (nuovo comparatore() @Override public int compare (Palette.Swatch lhs, Palette.Swatch rhs) return rhs.getPopulation () - lhs.getPopulation (); );  public class ViewHolder Vista TextView; 

Conclusione

In questo articolo, hai imparato a conoscere il Tavolozza supporto libreria e come estrarre campioni di colore da una bitmap. Ciò ti consentirà di personalizzare i tuoi elementi dell'interfaccia utente, come sfondi e testo, in modo che si adattino alle immagini all'interno della tua app. Quando accoppiato con il Colore e ColorUtil Classi (disponibili nella libreria di supporto v4), hai ancora più opzioni disponibili per la colorazione della tua app.