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.
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.
Swatch
les objets représentent les couleurs générées à partir de la palette d'une image. Chaque Swatch
contient:
Swatch
.Swatch
couleur primaire de.Swatch
couleur primaire de.Chaque Palette
a un ensemble de six profils de couleur prédéfinis:
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);
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;
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.