Kleuren van Android-apps met palet

Een van de bepalende kenmerken van materiaalontwerp is het gebruik van kleur om inhoud op het scherm te complimenteren en te benadrukken. De ... gebruiken Palet klasse kunnen ontwikkelaars opvallende kleuren uit een bitmap halen voor gebruik in hun apps om elementen van de gebruikersinterface aan te passen.

In dit artikel leert u hoe u een maakt Palet object van een bitmap. Bevat in elk Palet is een verzameling van Swatch objecten waarmee u kunt werken met specifieke kleurprofielen en een lijst met zichtbare kleuren uit de afbeelding.

1. Een palet maken

Als u aan de slag wilt gaan, moet u de paletondersteuningsbibliotheek in uw project importeren door de volgende regel op te nemen in het gebied afhankelijkheden van de projectvereisten van uw project. build.gradle het dossier. Aangezien dit een v7-ondersteuningsbibliotheek is, is de Palet gerelateerde klassen zijn beschikbaar terug naar Android API 7.

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

Na het uitvoeren van een graden synchronisatie voor uw project kunt u een genereren Palet van een bitmap. Dit kan gedaan worden met behulp van de Palette.Builder een van beide synchroon door het te bellen genereren () methode zonder parameters, of asynchroon door te bellen genereren (Palette.PaletteAsyncListener luisteraar). Omdat het enige tijd kan duren om het te maken Palet, het wordt aanbevolen dat de synchrone methode alleen wordt aangeroepen vanuit een achtergrondthread. In aanvulling op de twee methoden genereren, de Palette.Builder klas heeft een aantal andere handige methoden die komen met hun eigen compromissen:

  • maximumColorCount (int numOfSwatches) kunt u het aantal wijzigen Swatch objecten moeten worden gegenereerd vanuit de bitmap. De standaardinstelling voor de builder is 16. Meer Swatch objecten die u genereert, hoe langer het duurt om de Palet.
  • resizeBitmapSize (int maxDimension) wijzigt de grootte van de bitmap zodat de grootste afmeting ervan slechts zo groot is als de doorgegeven waarde van deze methode. Hoe groter uw bitmap, hoe langer het duurt om een Palet. Op dezelfde manier zullen kleinere bitmaps sneller worden verwerkt, maar u verliest de kleurprecisie.

Het volgende codefragment laat zien hoe u een bitmap maakt van een lokale bron en asynchroon maakt Palet voorwerp.

Bitmap bitmap = BitmapFactory.decodeResource (getResources (), R.drawable.union_station); Palette.from (bitmap) .generate (nieuw Palette.PaletteAsyncListener () @Override public void onGenerated (Palette-palet) // werk hier met het palet);

Als je eenmaal een hebt Palet, je kunt beginnen met werken met de bijbehorende Swatch voorwerpen.

2. Stalen

Swatch objecten vertegenwoordigen kleuren die zijn gegenereerd op basis van het palet van een afbeelding. Elk Swatch bevat:

  • een RGB (Red, Green, Blue) en HSL (Hue, Saturation, Lightness) waarde voor een kleur.
  • een populatiewaarde die het aantal pixels vertegenwoordigt weergegeven door de Swatch.
  • een kleurwaarde die kan worden gebruikt voor titeltekst wanneer deze wordt weergegeven op de Swatchprimaire kleur.
  • een kleurwaarde die kan worden gebruikt voor een tekstblok wanneer deze wordt weergegeven op de Swatchprimaire kleur.

Staalprofielen

Elk Palet heeft een set van zes voorgedefinieerde kleurprofielen:

  • trillend
  • licht levendig
  • donker levendig
  • gedempt
  • licht gedempt
  • donker gedempt

Hoewel elk van deze bruikbaar kan zijn, afhankelijk van het ontwerp van uw app, zijn levendige en donkere levendige kleuren het meest gebruikt. Een ding om op te merken is dat een van deze profielen kan zijn nul, dus je moet deze situatie dienovereenkomstig aan. In het voorbeeldproject, in de onGenerated (paletpalet) methode van de asynchrone Palette.Builder, je kunt zien hoe elk profiel te extraheren 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-weergave, Palette.Swatch-staal) is een methode die a accepteert Swatch en Tekstweergave, en stelt de Tekstweergave achtergrond- en tekstkleuren uit waarden in de Swatch. U zult merken dat we eerst controleren of het Swatch is nul en als dat zo is, verbergen we gewoon het uitzicht.

openbare lege setViewSwatch (TextView-weergave, Palette.Swatch-staal) if (swatch! = null) view.setTextColor (swatch.getTitleTextColor ()); view.setBackgroundColor (swatch.getRgb ()); view.setVisibility (View.VISIBLE);  else view.setVisibility (View.GONE); 

Aanvullende stalen

In aanvulling op het standaardprofiel Swatch objecten, elk Palet bevat een lijst met algemeen Swatch objecten gegenereerd vanuit de bitmap. Deze kunnen worden opgehaald uit de Palet als een Lijst door de getSwatches () methode.

In het voorbeeldproject Lijst wordt opgehaald en in een geplaatst ArrayAdapter die dan de Swatch primaire kleur en hoofdtekstkleur, evenals het aantal pixels weergegeven in de bitmap hiermee Swatch. Een ding om op te letten is dat de lijst niet in een bepaalde volgorde staat. In het voorbeeldproject heb ik de items gesorteerd op hun populatie-waarde.

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

In dit codefragment, mAdapter is de adapter van Swatch objecten met de volgende methoden:

@Override openbaar View getView (int position, View convertView, ViewGroup parent) ViewHolder holder; 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 (houder);  else holder = (ViewHolder) convertView.getTag ();  holder.view.setBackgroundColor (getItem (positie) .getRgb ()); holder.view.setTextColor (getItem (positie) .getBodyTextColor ()); holder.view.setText ("Population:" + getItem (position) .getPopulation ()); return convertView;  openbare ongeldige sortSwatches () sort (nieuwe Comparator() @Override openbaar int vergelijken (Palette.Swatch lhs, Palette.Swatch rhs) return rhs.getPopulation () - lhs.getPopulation (); );  public class ViewHolder TextView view; 

Conclusie

In dit artikel hebt u geleerd over de Palet ondersteuningsbibliotheek en hoe u kleurmonsters uit een bitmap kunt extraheren. Hiermee kunt u uw gebruikersinterface-elementen, zoals achtergronden en tekst, aanpassen zodat ze de afbeeldingen in uw app complimenteren. In combinatie met de Kleur en ColorUtil klassen (beschikbaar in de ondersteuningsbibliotheek v4), je hebt zelfs meer opties beschikbaar voor de inkleuring van je app.