Colorier des applications Android avec une palette

L'une des caractéristiques déterminantes de la conception d'un matériau est l'utilisation de la couleur pour compléter et mettre en valeur le contenu à l'écran. En utilisant le Palette classe, les développeurs peuvent extraire les couleurs saillantes d'une image bitmap pour les utiliser dans leurs applications afin de personnaliser les éléments de l'interface utilisateur.

Dans cet article, vous apprendrez à créer un Palette objet d'un bitmap. Contenu dans chaque Palette est un ensemble de Swatch des objets qui vous permettront de travailler avec des profils de couleurs spécifiques et une liste de couleurs visibles à partir de l'image.

1. Créer une palette

Pour commencer, vous devez importer la bibliothèque de prise en charge de la palette dans votre projet en incluant la ligne suivante dans le nœud des dépendances du projet. build.gradle fichier. Puisqu'il s'agit d'une bibliothèque de support v7, le Palette les classes associées sont disponibles depuis l'API Android 7.

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

Après avoir couru un gradation sync sur votre projet, vous êtes capable de générer un Palette à partir d'un bitmap. Cela peut être fait en utilisant le Palette.Builder non plus de manière synchrone en appelant le produire() méthode sans aucun paramètre, ou asynchrone en appelant générer (écouteur Palette.PaletteAsyncListener). Parce que cela peut prendre du temps pour créer le Palette, Il est recommandé d'appeler la méthode synchrone uniquement à partir d'un thread en arrière-plan. En plus des deux méthodes de génération, le Palette.Builder La classe a quelques autres méthodes utiles qui viennent avec leurs propres compromis:

  • maximumColorCount (int numOfSwatches) vous permet de changer le nombre Swatch les objets doivent être générés à partir du bitmap. La valeur par défaut pour le constructeur est 16. Le plus Swatch les objets que vous générez, plus il faudra de temps pour générer le Palette.
  • resizeBitmapSize (int maxDimension) redimensionne le bitmap afin que sa plus grande dimension ne soit aussi grande que la valeur transmise de cette méthode. Plus votre bitmap est volumineux, plus la génération d'un fichier Palette. De même, les bitmaps plus petites traiteront plus rapidement, mais vous perdrez la précision des couleurs..

L’extrait de code suivant montre comment créer un bitmap à partir d’une ressource locale et créer de manière asynchrone Palette objet.

Bitmap bitmap = BitmapFactory.decodeResource (getResources (), R.drawable.union_station); Palette.from (bitmap) .generate (nouvelle Palette.PaletteAsyncListener () @Override public void onGenerated (palette Palette) // travaille avec la palette ici);

Une fois que vous avez un Palette, vous pouvez commencer à travailler avec les associés Swatch objets.

2. Échantillons

Swatch les objets représentent les couleurs générées à partir de la palette d'une image. Chaque Swatch contient:

  • un RVB (Red, gReen, Blue) et HSL (Hue, Saturation, Lightness) valeur pour une couleur.
  • une valeur de population reflétant le nombre de pixels représentés par le Swatch.
  • une valeur de couleur qui peut être utilisée pour le texte du titre lorsqu'il est affiché sur le Swatchcouleur primaire de.
  • une valeur de couleur qui peut être utilisée pour un corps de texte lorsqu'il est affiché sur le Swatchcouleur primaire de.

Profils Swatch

Chaque Palette a un ensemble de six profils de couleur prédéfinis:

  • vibrant
  • lumière vibrante
  • sombre vibrant
  • en sourdine
  • lumière en sourdine
  • sombre en sourdine

Bien que chacun de ces éléments puisse être utile en fonction de la conception de votre application, vibrant et sombre vibrant sont les plus couramment utilisés. Une chose à noter est que l’un de ces profils peut être nul, vous devriez donc gérer cette situation en conséquence. Dans l'exemple de projet, dans le onGenerated (Palette) méthode de la asynchrone Palette.Builder, vous pouvez voir comment extraire chaque 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 (vue TextView, nuancier Palette.Swatch) est une méthode qui accepte un Swatch et Affichage, et définit le Affichage couleurs de fond et de texte à partir des valeurs de la Swatch. Vous remarquerez que nous vérifions d’abord si le Swatch est nul et, si c'est le cas, nous masquons simplement la vue.

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

Échantillons supplémentaires

En plus du profil standard Swatch objets, chacun Palette contient une liste de général Swatch objets générés à partir du bitmap. Ceux-ci peuvent être récupérés à partir du Palette comme un liste en utilisant le getSwatches () méthode.

Dans le projet exemple, cela liste est récupéré et placé dans un ArrayAdapter qui affiche ensuite le Swatch couleur primaire et couleur du texte du corps, ainsi que le nombre de pixels représentés dans le bitmap par cette Swatch. Une chose à faire attention est que la liste n'est pas dans un ordre particulier. Dans l'exemple de projet, j'ai trié les éléments en fonction de leur valeur de population.

pour (nuance de palette.Swatch: palette.getSwatches ()) mAdapter.add (nuance);  mAdapter.sortSwatches (); mAdapter.notifyDataSetChanged ();

Dans cet extrait de code, mAdapter est l'adaptateur de Swatch objets avec les méthodes suivantes:

@Override public View getView (position int, View convertView, parent ViewGroup) 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 (titulaire);  else holder = (ViewHolder) convertView.getTag ();  holder.view.setBackgroundColor (getItem (position) .getRgb ()); holder.view.setTextColor (getItem (position) .getBodyTextColor ()); holder.view.setText ("Population:" + getItem (position) .getPopulation ()); renvoyer convertView;  public void sortSwatches () sort (nouveau comparateur() @Override public int compare (Palette.Swatch lhs, Palette.Swatch rhs) return rhs.getPopulation () - lhs.getPopulation (); );  public class ViewHolder vue TextView; 

Conclusion

Dans cet article, vous avez appris sur le Palette bibliothèque de support et comment extraire des échantillons de couleur d’un bitmap. Cela vous permettra de personnaliser les éléments de votre interface utilisateur, tels que les arrière-plans et le texte, de manière à ce qu'ils complètent les images de votre application. Lorsque couplé avec le Couleur et ColorUtil classes (disponible dans la bibliothèque de support v4), vous avez encore plus d'options disponibles pour la colorisation de votre application.