Um bom design visual é essencial para um app de sucesso, e o esquema de cores é componente principal do design. A A biblioteca de paleta é uma biblioteca do Jetpack que extrai cores proeminentes de imagens para criar visualmente envolventes apps.
Você pode usar a biblioteca de paletas para criar o layout
temas e aplicar cores personalizadas a
elementos visuais em seu aplicativo. Por exemplo, você pode usar uma paleta para criar uma
um cartão de título coordenado de cores para uma música com base na capa do álbum ou para ajustar um
na barra de ferramentas do app quando a imagem de plano de fundo muda. A
Palette
objeto dá acesso às cores em um
Imagem Bitmap
além de fornecer seis perfis de cores principais do bitmap para informar seu
escolhas de design.
Configurar a biblioteca
Para usar a biblioteca de paletas, adicione o seguinte ao seu
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' }
Criar uma paleta
Um objeto Palette
dá acesso às cores primárias em um
e as cores correspondentes para o texto sobreposto. Use paletas para
criar o estilo do seu app e alterar dinamicamente o esquema de cores dele com base
em uma determinada imagem de origem.
Para criar uma paleta, primeiro instancie um
Palette.Builder
de um Bitmap
. Você pode usar Palette.Builder
para
personalizar a paleta antes de gerá-la. Esta seção descreve as
e personalização a partir de uma imagem de bitmap.
Gerar uma instância de Palette
Gere uma instância Palette
usando a
from(Bitmap bitmap)
para criar um Palette.Builder
com base em um
Bitmap
.
O builder pode gerar a paleta de forma síncrona ou assíncrona. Usar
a geração síncrona de paletas, se você quiser criar a paleta na mesma
como o método que está sendo chamado. Se você gerar a paleta de forma assíncrona,
em um thread diferente, use o
onGenerated()
para acessar a paleta imediatamente após ela ser criada.
O snippet de código a seguir fornece métodos de exemplo para os dois tipos de paleta geração:
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. } }); }
Se você precisar gerar paletas continuamente para uma lista classificada de imagens ou
objetos, considere
armazenando em cache o
Palette
instâncias para evitar um desempenho lento da interface. Não crie o
e paletas
linha de execução principal.
Personalizar sua paleta
O Palette.Builder
permite personalizar a paleta escolhendo
quantas cores existem na paleta resultante, em que área da imagem a
builder usa para gerar a paleta e quais cores estão incluídas na
paleta. Por exemplo, é possível filtrar a cor preta ou garantir que o builder
usa somente a metade superior de uma imagem para gerar sua paleta.
Ajuste o tamanho e as cores da sua paleta com os seguintes métodos da
Classe Palette.Builder
:
addFilter()
- Este método adiciona um filtro que indica quais cores são permitidas no
e a paleta resultante. Transmita seu próprio
Palette.Filter
e modificar o métodoisAllowed()
para determinar quais cores são filtrada da paleta. maximumColorCount()
- Este método configura o número máximo de cores na paleta. O padrão
é 16 e o valor ideal depende da imagem de origem. Para
paisagens, os valores ideais variam de 8 a 16, enquanto fotos com rostos geralmente
têm valores de 24 a 32. O
Palette.Builder
demora mais para gerar paletas com mais cores. setRegion()
- Este método indica qual área do bitmap o builder usa ao criar a paleta. Esse método só pode ser usado ao gerar a paleta de um bitmap e isso não afeta a imagem original.
addTarget()
- Esse método permite que você faça sua própria correspondência de cores adicionando uma
Target
de cor ao builder. Se oTarget
padrão for insuficiente, os desenvolvedores avançados podem criar os própriosTarget
usando umTarget.Builder
.
Extrair perfis de cores
Com base no
normas do Material Design
Design, a biblioteca de paletas extrai os perfis de cores mais usados de uma
imagem. Cada perfil é definido por um Target
, e as cores são extraídas
da imagem de bitmap são pontuados em relação a cada perfil com base na saturação,
luminância e população (número de pixels no bitmap representado pelo
cor). Para cada perfil, a cor com a melhor pontuação define essa cor
da imagem fornecida.
Por padrão, um objeto Palette
contém 16 cores primárias de uma
determinada imagem. Ao gerar sua paleta, é possível
personalize o número de cores usando o
Palette.Builder
Extrair mais cores aumenta o potencial
corresponde a cada perfil de cor, mas também faz com que Palette.Builder
de levar mais tempo para gerar a paleta.
A biblioteca de paletas tenta extrair os seis perfis de cores a seguir:
- Light Vibrant
- Vibrant
- Dark Vibrant
- Light Muted
- Muted
- Dark Muted
Cada um dos métodos get<Profile>Color()
Palette
retorna a cor na paleta associada a essa
um perfil específico, em que <Profile>
é substituído por
o nome de um dos seis perfis de cores. Por exemplo, o método para receber o
O perfil de cor vibrante escura é
getDarkVibrantColor()
:
Como nem todas as imagens contêm todos os perfis de cores, forneça uma cor padrão para
voltar.
A Figura 1 exibe uma foto e seus perfis de cores correspondentes da
get<Profile>Color()
.
Usar amostras para criar esquemas de cores
A classe Palette
também gera
Palette.Swatch
para cada perfil de cor. Os objetos Palette.Swatch
contêm o
cor associada para esse perfil, bem como o preenchimento da cor no
pixels.
As amostras têm outros métodos para acessar mais informações sobre a
como valores HSL e preenchimento de pixels. Você pode usar amostras para
ajudar a criar esquemas de cores e temas de apps mais abrangentes usando o
getBodyTextColor()
e
getTitleTextColor()
métodos. Esses métodos retornam cores apropriadas para uso no
cor
Cada método get<Profile>Swatch()
de
Palette
retorna a amostra associada a esse perfil específico;
em que <Profile>
é substituído pelo nome de um dos
os seis perfis de cores. Embora o foco da paleta
Os métodos get<Profile>Swatch()
não exigem padrão
parâmetros de valor, eles retornarão null
se esse perfil específico
não existe na imagem. Portanto, verifique se uma amostra não é nula antes
usá-lo. Por exemplo, o código a seguir obtém a cor do texto do título de uma
paleta caso a amostra "Vibrant" não seja nula:
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(); // ... }
Para acessar todas as cores em uma paleta, a
getSwatches()
retorna uma lista de todas as amostras geradas a partir de uma imagem, incluindo o
seis perfis de cores padrão.
O snippet de código a seguir usa os métodos do código anterior para gerar uma paleta de forma síncrona, ter uma amostra vibrante e alterar as cores de uma barra de ferramentas para combinar com a imagem de bitmap. A Figura 2 exibe a imagem e barra de ferramentas resultante.
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); }