Une bonne conception visuelle est essentielle au succès d'une application, et les jeux de couleurs sont un élément principal de la conception. La La bibliothèque Palette est un Jetpack qui extrait des couleurs proéminentes à partir d'images pour les rendre visuellement attrayantes applications.
Vous pouvez utiliser la bibliothèque Palette pour concevoir une mise en page
thèmes et appliquer des couleurs personnalisées
des éléments visuels
de votre application. Par exemple, vous pouvez utiliser une palette pour créer
une image statique de démarrage coordonnée par couleur pour un titre en fonction de sa couverture d'album ou pour ajuster une
couleur de la barre d'outils de l'application lorsque son image de fond change. La
Palette
vous donne accès aux couleurs d'une
Bitmap
image
tout en fournissant six profils de couleur principaux du bitmap pour informer
choix de conception.
Configurer la bibliothèque
Pour utiliser la bibliothèque Palette, ajoutez ce qui suit à votre
build.gradle
:
Kotlin
android { compileSdkVersion(33) ... } dependencies { ... implementation("androidx.palette:palette:1.0.0") }
Groovy
android { compileSdkVersion 33 ... } dependencies { ... implementation 'androidx.palette:palette:1.0.0' }
Créer une palette
Un objet Palette
vous donne accès aux couleurs primaires d'une
l'image et les couleurs correspondantes pour le texte superposé. Utiliser des palettes pour
concevoir le style de votre application et modifier son jeu de couleurs de façon dynamique en fonction
sur une image source donnée.
Pour créer une palette, commencez par instancier
Palette.Builder
à partir d'un Bitmap
. Vous pouvez ensuite utiliser Palette.Builder
pour
personnaliser la palette avant de la générer. Cette section décrit la palette
la génération et la personnalisation
à partir d'une image bitmap.
Générer une instance de palette
Générez une instance Palette
à l'aide de son
from(Bitmap bitmap)
pour créer un Palette.Builder
à partir d'un
Bitmap
L'outil de création peut générer la palette de manière synchrone ou asynchrone. Utilisez
génération de palette synchrone si vous souhaitez créer la palette sur le même
comme la méthode appelée. Si vous générez la palette de manière asynchrone,
sur un fil de discussion différent, utilisez la
onGenerated()
pour accéder à la palette immédiatement après sa création.
L'extrait de code suivant fournit des exemples de méthodes pour les deux types de palettes. génération:
Kotlin
// Generate palette synchronously and return it. fun createPaletteSync(bitmap: Bitmap): Palette = Palette.from(bitmap).generate() // Generate palette asynchronously and use it on a different thread using onGenerated(). fun createPaletteAsync(bitmap: Bitmap) { Palette.from(bitmap).generate { palette -> // Use generated instance. } }
Java
// Generate palette synchronously and return it. public Palette createPaletteSync(Bitmap bitmap) { Palette p = Palette.from(bitmap).generate(); return p; } // Generate palette asynchronously and use it on a different thread using onGenerated(). public void createPaletteAsync(Bitmap bitmap) { Palette.from(bitmap).generate(new PaletteAsyncListener() { public void onGenerated(Palette p) { // Use generated instance. } }); }
Si vous devez générer en continu des palettes pour une liste triée d'images ou
des objets, envisagez
mettre en cache
Palette
instances pour éviter une lenteur des performances de l'interface utilisateur. Ne créez pas
palettes de couleurs sur votre
thread principal.
Personnaliser votre palette
Le Palette.Builder
vous permet de personnaliser votre palette en choisissant
le nombre de couleurs dans la palette obtenue, la zone de l'image
utilisé pour générer la palette, ainsi que les couleurs incluses dans le
la palette. Par exemple, vous pouvez filtrer la couleur noire ou vous assurer que le compilateur
n'utilise que la moitié supérieure d'une image pour générer votre palette.
Affinez la taille et les couleurs de votre palette à l'aide des méthodes suivantes du
Classe Palette.Builder
:
addFilter()
- Cette méthode ajoute un filtre qui indique les couleurs autorisées dans le
de la palette obtenue. Transmettre votre propre
Palette.Filter
et modifier sa méthodeisAllowed()
pour déterminer les couleurs filtrées dans la palette. maximumColorCount()
- Cette méthode définit le nombre maximal de couleurs dans votre palette. La valeur par défaut
est de 16. La valeur optimale dépend de l'image source. Pour
des paysages, les valeurs optimales sont comprises entre 8 et 16, tandis que les photos avec des visages
ont des valeurs comprises entre 24 et 32.
Palette.Builder
met plus de temps à générer des palettes avec plus de couleurs. setRegion()
- Cette méthode indique la zone du bitmap utilisée par le compilateur pour créer la palette. Vous ne pouvez utiliser cette méthode que lors de la génération de la palette à partir d'un bitmap, et cela n'affecte pas l'image d'origine.
addTarget()
- Cette méthode vous permet d'effectuer votre propre correspondance des couleurs en ajoutant une
Target
profil de couleur au compilateur. Si la valeur par défaut deTarget
est insuffisants, les développeurs avancés peuvent créer leur propreTarget
à l'aide d'unTarget.Builder
Extraire les profils de couleur
D'après les
de Material Design
Design, la bibliothèque Palette extrait les profils de couleur couramment utilisés d'un
l'image. Chaque profil est défini par un Target
, et les couleurs sont extraites
de l'image bitmap sont évalués pour chaque profil en fonction de leur saturation,
la luminance et la population (nombre de pixels dans le bitmap représenté par
couleur). Pour chaque profil, la couleur avec le meilleur score définit cette couleur.
pour l'image donnée.
Par défaut, un objet Palette
contient 16 couleurs primaires issues d'une
une image donnée. Lors de la génération de votre palette, vous pouvez
personnaliser le nombre de couleurs à l'aide des
Palette.Builder
L'extraction de couleurs
augmente le potentiel
correspond à chaque profil de couleur, mais provoque également Palette.Builder
peut prendre plus de temps lors de la génération de la palette.
La bibliothèque Palette tente d'extraire les six profils de couleur suivants:
- Vif
- Vibrant
- Vif foncé
- Léger désactivé
- Leur son est coupé.
- Sombre coupé
Chacune des méthodes get<Profile>Color()
de
Palette
renvoie la couleur de la palette associée.
profil particulier, où <Profile>
est remplacé par
le nom de l'un des
six profils de couleur. Par exemple, la méthode permettant d'obtenir
Le profil de couleur vive foncée est
getDarkVibrantColor()
Étant donné que toutes les images ne contiennent pas tous les profils de couleur, fournissez une couleur par défaut pour
retour.
La figure 1 affiche une photo et ses profils de couleur correspondants à partir de
get<Profile>Color()
.
Utiliser des échantillons pour créer des jeux de couleurs
La classe Palette
génère également
Palette.Swatch
des objets pour chaque profil de couleur. Les objets Palette.Swatch
contiennent
couleur associée à ce profil ainsi que la population de la couleur dans
de pixels.
Les échantillons disposent de méthodes supplémentaires pour accéder à davantage d'informations sur le
profil de couleur, comme les valeurs TSL et le nombre de pixels. Vous pouvez utiliser des échantillons pour
créer des jeux de couleurs et des thèmes d'applications plus complets à l'aide de
getBodyTextColor()
et
getTitleTextColor()
méthodes. Ces méthodes renvoient des couleurs appropriées pour une utilisation sur les
couleur.
Chaque méthode get<Profile>Swatch()
de
Palette
renvoie l'échantillon associé à ce profil particulier,
où <Profile>
est remplacé par le nom de l'une
les six profils de couleur. Bien que la palette
Les méthodes get<Profile>Swatch()
ne nécessitent pas de valeurs par défaut
, ils renvoient null
si ce profil particulier
n'existe pas dans l'image. Par conséquent, vérifiez qu'un échantillon n'est pas nul avant
l'utilisent. Par exemple, le code suivant extrait la couleur du texte du titre à partir d'une
palette si la couleur de l'échantillon "Éclat" n'est pas nulle:
Kotlin
val vibrant = myPalette.vibrantSwatch // In Kotlin, check for null before accessing properties on the vibrant swatch. val titleColor = vibrant?.titleTextColor
Java
Palette.Swatch vibrant = myPalette.getVibrantSwatch(); if(vibrant != null){ int titleColor = vibrant.getTitleTextColor(); // ... }
Pour accéder à toutes les couleurs d'une palette,
getSwatches()
renvoie la liste de tous les échantillons générés à partir d'une image, y compris les
standards six profils de couleur.
L'extrait de code suivant utilise les méthodes du code précédent extraits pour générer une palette de manière synchrone, obtenir son échantillon dynamique et modifier les couleurs d'une barre d'outils pour correspondre à l'image bitmap. La figure 2 affiche les l'image et la barre d'outils qui en résultent.
Kotlin
// Set the background and text colors of a toolbar given a bitmap image to // match. fun setToolbarColor(bitmap: Bitmap) { // Generate the palette and get the vibrant swatch. val vibrantSwatch = createPaletteSync(bitmap).vibrantSwatch // Set the toolbar background and text colors. // Fall back to default colors if the vibrant swatch isn't available. with(findViewById<Toolbar>(R.id.toolbar)) { setBackgroundColor(vibrantSwatch?.rgb ?: ContextCompat.getColor(context, R.color.default_title_background)) setTitleTextColor(vibrantSwatch?.titleTextColor ?: ContextCompat.getColor(context, R.color.default_title_color)) } }
Java
// Set the background and text colors of a toolbar given a bitmap image to // match. public void setToolbarColor(Bitmap bitmap) { // Generate the palette and get the vibrant swatch. // See the createPaletteSync() method from the preceding code snippet. Palette p = createPaletteSync(bitmap); Palette.Swatch vibrantSwatch = p.getVibrantSwatch(); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); // Load default colors. int backgroundColor = ContextCompat.getColor(getContext(), R.color.default_title_background); int textColor = ContextCompat.getColor(getContext(), R.color.default_title_color); // Check that the Vibrant swatch is available. if(vibrantSwatch != null){ backgroundColor = vibrantSwatch.getRgb(); textColor = vibrantSwatch.getTitleTextColor(); } // Set the toolbar background and text colors. toolbar.setBackgroundColor(backgroundColor); toolbar.setTitleTextColor(textColor); }