Aplicații de colorat pentru Android cu paletă

Una dintre trăsăturile definitorii ale designului materialului este folosirea culorii pentru complimentare și sublinierea conținutului pe ecran. Utilizarea Paletă clasa, dezvoltatorii pot extrage culori proeminente dintr-un bitmap pentru a fi utilizate în aplicațiile lor pentru a particulariza elementele interfeței utilizator.

În acest articol, veți învăța cum să creați un Paletă obiect dintr-un bitmap. Conținut în fiecare Paletă este un set de Swatch obiecte care vă vor permite să lucrați cu profiluri de culoare specifice și o listă de culori vizibile din imagine.

1. Crearea unei palete

Pentru a începe, va trebui să importați biblioteca de suport paletă în proiectul dvs., prin includerea următoarei linii în nodul de dependențe al proiectului dvs. build.gradle fişier. Deoarece aceasta este o bibliotecă de suport v7, Paletă clasele asociate sunt disponibile înapoi la Android API 7.

compile 'com.android.support:palette-v7:+'

După ce ați executat a gradare sincronizare pe proiectul dvs., puteți genera o Paletă de la un bitmap. Acest lucru se poate face folosind Palette.Builder fie sincronă prin apelarea Genera() metoda fără parametri sau asincronă sunând generați (ascultător Palette.PaletteAsyncListener). Deoarece poate dura ceva timp pentru a crea Paletă, se recomandă ca metoda sincronă să fie apelată numai dintr-un fir de fundal. În plus față de cele două metode de generare, Palette.Builder clasa are câteva metode utile care vin cu propriile lor compromisuri:

  • maximColorCount (int numOfSwatches) vă permite să modificați câte Swatch obiectele ar trebui să fie generate din bitmap. Valoarea prestabilită pentru constructor este 16. Cu atât mai mult Swatch obiectele pe care le generați, cu atât va dura mai mult timp pentru a genera Paletă.
  • resizeBitmapSize (int maxDimension) redimensionează bitmap-ul astfel încât cea mai mare dimensiune a acestuia să fie doar la fel de mare ca valoarea trecută a acestei metode. Cu cât este mai mare bitmapul, cu atât va dura mai mult pentru a genera a Paletă. De asemenea, bitmap-urile mai mici vor procesa mai repede, dar veți pierde din precizia culorii.

Următorul fragment de cod arată cum se creează un bitmap dintr-o resursă locală și se creează asincron a Paletă obiect.

Bitmap bitmap = BitmapFactory.decodeResource (getResources (), R.drawable.union_station); Palette.from (bitmap) .generate (nou Palette.PaletteAsyncListener () @Override public void peGenerated (paleta de palete) // lucrează cu paleta aici);

Odată ce ai Paletă, puteți începe să lucrați cu cei asociați Swatch obiecte.

2. Specimene

Swatch obiectele reprezintă culorile generate de paleta unei imagini. Fiecare Swatch conține:

  • un RGB (Red, GREEN, Blue) și HSL (HUE, Saturation, Lluminozitatea) pentru o culoare.
  • o valoare a populației care reflectă numărul de pixeli reprezentați de Swatch.
  • o valoare de culoare care poate fi utilizată pentru textul titlului când este afișat pe Swatchculoarea primară.
  • o valoare de culoare care poate fi utilizată pentru un corp de text atunci când este afișat pe Swatchculoarea primară.

Swatch Profile

Fiecare Paletă are un set de șase profile de culori predefinite:

  • vibrant
  • lumină vibrantă
  • întuneric vibrant
  • dezactivat
  • lumină slabă
  • închisă întunecată

În timp ce fiecare dintre acestea poate fi util în funcție de designul aplicației dvs., vibrante și vibrante întunecate sunt cele mai frecvent utilizate. Un lucru de observat este că oricare dintre aceste profiluri ar putea fi nul, astfel încât ar trebui să rezolvați această situație în consecință. În proba de proiect, în onGenerated (Paletă paletă) de la asincron Palette.Builder, puteți vedea cum să extrageți fiecare profil 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 (vizualizare TextView, specimen Palette.Swatch) este o metodă care acceptă a Swatch și TextView, și stabilește TextView fundal și text de la valorile din Swatch. Veți observa că mai întâi verificăm dacă este cazul Swatch este nul și, dacă este, ne ascundem pur și simplu vederea.

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

Sonde suplimentare

În plus față de profilul standard Swatch obiecte, fiecare Paletă conține o listă generală Swatch obiecte generate de bitmap. Acestea pot fi preluate din Paletă ca Listă folosind getSwatches () metodă.

În proba de proiect, acest lucru Listă este preluat și plasat într-un ArrayAdapter care afișează apoi Swatch culoarea primară și culoarea textului corpului, precum și numărul de pixeli reprezentați în bitmap de aceasta Swatch. Unul dintre lucrurile pe care trebuie să le acordați atenție este faptul că lista nu este în ordine particulară. În proba de proiect, am sortat elementele după valoarea populației.

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

În acest fragment de cod, mAdapter este adaptorul Swatch obiecte cu următoarele metode:

@Override public Vizualizare getView (pozitie int, Vizualizare convertView, ViewGroup parent) ViewHolder holder; dacă (convertView == null) holder = noul ViewHolder (); convertView = LayoutInflater.from (getContext ()) .inflate (R.layout.color_item, parent, false); suport.view = (TextView) convertView.findViewById (R.id.view); convertView.setTag (suport);  altceva holder = (ViewHolder) convertView.getTag ();  hold.view.setBackgroundColor (getItem (poziție) .getRgb ()); hold.view.setTextColor (getItem (poziție) .getBodyTextColor ()); hold.view.setText ("Populație:" + getItem (poziție) .getPopulație ()); retur convertView;  void public sortSwatches () sort (comparator nou() @Override public int compare (Palette.Swatch lhs, Palette.Swatch rhs) returnați rhs.getPopulation () - lhs.getPopulation (); );  public class ViewHolder TextView view; 

Concluzie

În acest articol, ați aflat despre Paletă biblioteca de suport și cum să extrageți un șablon de culoare dintr-un bitmap. Acest lucru vă va permite să personalizați elementele interfeței utilizator, cum ar fi fundalul și textul, astfel încât acestea să complimenteze imaginile din aplicația dvs. Când este cuplat cu Culoare și ColorUtil clase (disponibile în biblioteca de suport v4), aveți mai multe opțiuni disponibile pentru colorarea aplicației.

Cod