出色的视觉设计是应用成功的关键,配色方案 是设计的主要组成部分通过 Palette 库是一个 Jetpack 该库会从图片中提取突出颜色,以打造具有视觉吸引力的 。
你可以使用 Palette 库设计布局
主题,并将自定义颜色应用到
视觉元素例如,您可以使用调色板创建一个
根据专辑封面为歌曲配色的片头字幕,或调整
应用的工具栏颜色。通过
Palette
对象可让您访问
Bitmap
张图片
同时提供位图中的六种主要颜色配置文件
设计选择。
设置调色板库
要使用 Palette 库,请将以下代码添加到
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' }
创建调色板
借助 Palette
对象,您可以访问
以及叠加文字的相应颜色。使用调色板
设计应用的样式,并根据
对给定来源映像进行微调。
要创建调色板,请先将
Palette.Builder
从 Bitmap
中获取。然后,您可以使用 Palette.Builder
请在生成调色板之前对其进行自定义本部分将介绍
生成和自定义位图图像。
生成调色板实例
使用Palette
from(Bitmap bitmap)
方法首先创建一个 Palette.Builder
Bitmap
。
生成工具可以同步或异步生成调色板。使用
同步调色板生成功能。
将线程视为被调用的方法。如果您异步生成调色板,
其他线程上,请使用
onGenerated()
方法,以便在创建调色板后立即访问该面板。
以下代码段为这两种类型的调色板提供了示例方法 世代:
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. } }); }
如果您需要为已排序的图片列表连续生成调色板,或
对象,请考虑
缓存
Palette
实例,以防止界面性能缓慢。请勿创建
调色板上
主线程。
自定义调色板
Palette.Builder
可让您通过选择
生成的调色板中有多少个颜色,图片中的哪一区域
生成调色板所用的颜色,以及
选项。例如,您可以滤除黑色,或确保构建器
只使用图片的上半部分生成调色板。
使用
Palette.Builder
类:
addFilter()
- 此方法会添加一个过滤条件,用于指明
显示的调色板。传入您自己的标签
Palette.Filter
并修改其isAllowed()
方法,以确定 。 maximumColorCount()
- 此方法可用于设置调色板中的颜色数量上限。默认
值为 16,最佳值取决于源图片。对于
最佳值的范围为 8-16,而包含人脸的图片
值在 24-32 之间。
Palette.Builder
需要更长的时间才能 生成颜色更多的调色板。 setRegion()
- 此方法指示当 创建调色板。您只能在生成调色板时使用此方法 并且不会影响原始图像。
addTarget()
- 通过添加颜色和颜色,您可以自定义颜色调整,
Target
颜色配置文件如果默认的Target
为 则高级开发者可以创建自己的Target
使用Target.Builder
。
提取颜色配置文件
基于
Material Design
设计时,调色板库从
图片。每个个人资料都由 Target
定义,提取的颜色
根据饱和度针对每个配置文件进行评分,
亮度和填充(由
颜色)。对于每个配置文件,得分最高的颜色定义了该颜色
配置文件。
默认情况下,Palette
对象包含来自不同颜色的 16 种主要颜色,
图片。生成调色板时,您可以
自定义其颜色数量,方法是使用
Palette.Builder
。提取更多颜色可提高
匹配每个颜色配置文件,但也会导致 Palette.Builder
花费更长的时间来生成调色板
Palette 库会尝试提取以下六种颜色配置文件:
- Light Vibrant
- Vibrant
- Dark Vibrant
- Light Muted
- Muted
- Dark Muted
中的每种 get<Profile>Color()
方法
Palette
会返回与该颜色相关联的调色板中的颜色。
其中 <Profile>
会替换为特定配置文件
六种颜色配置文件之一的名称。例如,获取
“深色鲜艳”颜色配置文件现为
getDarkVibrantColor()
。
由于并非所有图片都包含全部颜色配置文件,因此请为
return。
图 1 显示了一张照片以及
get<Profile>Color()
方法。
使用色样创建配色方案
Palette
类还会生成
Palette.Swatch
对象。Palette.Swatch
对象包含
以及该配置文件的颜色填充
像素。
色样可以通过其他方法访问
颜色配置文件,例如 HSL 值和像素填充。您可以使用色样
有助于创建更全面的配色方案和应用主题
getBodyTextColor()
和
getTitleTextColor()
方法。这些方法会返回适合在色样的
color 决定。
每个 get<Profile>Swatch()
方法(从
Palette
返回与该特定配置文件相关联的色样,
其中 <Profile>
会替换为以下任一名称
六种颜色配置文件虽然调色板的
get<Profile>Swatch()
方法不需要默认值
value 参数,则对于特定配置文件,会返回 null
不存在。因此,请先检查色样是否不为 null。
使用它。例如,以下代码从
调色板(如果 Vibrant 色样不为 null):
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(); // ... }
要访问调色板中的所有颜色,
getSwatches()
方法会返回根据图片生成的所有色样的列表,其中包括
标准的六种颜色配置文件
以下代码段使用前面代码中的方法 同步生成调色板,获取其鲜艳色样, 工具栏的颜色以匹配位图图像。图 2 显示了 随即显示的图片和工具栏
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); }