Android Jetpack：利用Palette进行图片取色

已于 2023-05-18 15:55:34 修改
阅读量1.2k 收藏 2
点赞数 2
分类专栏： android开发 Android进阶之路 文章标签： android android jetpack android studio
于 2023-05-04 16:00:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chzphoenix/article/details/122967657
版权

目录

与产品MM那些事

新来一个产品MM，因为比较平，我们就叫她A妹吧。A妹来第一天就指出：页面顶部的Banner广告位的背景是白色的，太单调啦，人家不喜欢啦，需要根据广告图片的内容自动切换背景颜色，颜色要与广告图主色调一致。作为一名合格的码农我直接回绝了，我说咱们的应用主打简洁，整这花里胡哨的干嘛，劳民伤财。A妹也没放弃，与我深入交流了一夜成功说服了我。

其实要实现这个需求也不难，Google已经为我们提供了一个方便的工具————Palette。

前言

Palette即调色板这个功能其实很早就发布了，Jetpack同样将这个功能也纳入其中，想要使用这个功能，需要先依赖库

implementation 'androidx.palette:palette:1.0.0'

本篇文章就来讲解一下如何使用Palette在图片中提取颜色。

创建Palette

创建Palette其实很简单，如下

var builder = Palette.from(bitmap)
var palette = builder.generate()

这样，我们就通过一个Bitmap创建一个Pallete对象。

注意：直接使用Palette.generate(bitmap)也可以，但是这个方法已经不推荐使用了，网上很多老文章中依然使用这种方式。建议还是使用Palette.Builder这种方式。

generate()这个函数是同步的，当然考虑图片处理可能比较耗时，Android同时提供了异步函数

public AsyncTask<Bitmap, Void, Palette> generate(
        @NonNull final PaletteAsyncListener listener) {

通过一个PaletteAsyncListener来获取Palette实例，这个接口如下：

public interface PaletteAsyncListener {
    /**
     * Called when the {@link Palette} has been generated. {@code null} will be passed when an
     * error occurred during generation.
     */
    void onGenerated(@Nullable Palette palette);
}

提取颜色

有了Palette实例，就可以通过Palette对象的相应函数就可以获取图片中的颜色，而且不只一种颜色，下面一一列举：

  • getDominantColor：获取图片中的主色调
  • getMutedColor：获取图片中柔和的颜色
  • getDarkMutedColor：获取图片中柔和的暗色
  • getLightMutedColor：获取图片中柔和的亮色
  • getVibrantColor：获取图片中有活力的颜色
  • getDarkVibrantColor：获取图片中有活力的暗色
  • getLightVibrantColor：获取图片中有活力的亮色

这些函数都需要提供一个默认颜色，如果这个颜色Swatch无效则使用这个默认颜色。光这么说不直观，我们来测试一下，代码如下：

var bitmap = BitmapFactory.decodeResource(resources, R.mipmap.a)
var builder = Palette.from(bitmap)
var palette = builder.generate()
color0.setBackgroundColor(palette.getDominantColor(Color.WHITE))
color1.setBackgroundColor(palette.getMutedColor(Color.WHITE))
color2.setBackgroundColor(palette.getDarkMutedColor(Color.WHITE))
color3.setBackgroundColor(palette.getLightMutedColor(Color.WHITE))
color4.setBackgroundColor(palette.getVibrantColor(Color.WHITE))
color5.setBackgroundColor(palette.getDarkVibrantColor(Color.WHITE))
color6.setBackgroundColor(palette.getLightVibrantColor(Color.WHITE))

运行后结果如下：

111.jpg

这样各个颜色的差别就一目了然。除了上面的函数，还可以使用getColorForTarget这个函数，如下：

@ColorInt
public int getColorForTarget(@NonNull final Target target, @ColorInt final int defaultColor) {

这个函数需要一个Target，提供了6个静态字段，如下：

/**
 * A target which has the characteristics of a vibrant color which is light in luminance.
*/
public static final Target LIGHT_VIBRANT;

/**
 * A target which has the characteristics of a vibrant color which is neither light or dark.
 */
public static final Target VIBRANT;

/**
 * A target which has the characteristics of a vibrant color which is dark in luminance.
 */
public static final Target DARK_VIBRANT;

/**
 * A target which has the characteristics of a muted color which is light in luminance.
 */
public static final Target LIGHT_MUTED;

/**
 * A target which has the characteristics of a muted color which is neither light or dark.
 */
public static final Target MUTED;

/**
 * A target which has the characteristics of a muted color which is dark in luminance.
 */
public static final Target DARK_MUTED;

其实就是对应着上面除了主色调之外的六种颜色。

文字颜色自动适配

在上面的运行结果中可以看到，每个颜色上面的文字都很清楚的显示，而且它们并不是同一种颜色。其实这也是Palette提供的功能。

通过下面的函数，我们可以得到各种色调所对应的Swatch对象：

  • getDominantSwatch
  • getMutedSwatch
  • getDarkMutedSwatch
  • getLightMutedSwatch
  • getVibrantSwatch
  • getDarkVibrantSwatch
  • getLightVibrantSwatch

注意：同上面一样，也可以通过getSwatchForTarget(@NonNull final Target target)来获取

Swatch类提供了以下函数：

  • getPopulation(): 样本中的像素数量
  • getRgb(): 颜色的RBG值
  • getHsl(): 颜色的HSL值
  • getBodyTextColor(): 能都适配这个Swatch的主体文字的颜色值
  • getTitleTextColor(): 能都适配这个Swatch的标题文字的颜色值

所以我们通过getBodyTextColor()和getTitleTextColor()可以很容易得到在这个颜色上可以很好现实的标题和主体文本颜色。所以上面的测试代码完整如下：

var bitmap = BitmapFactory.decodeResource(resources, R.mipmap.a)
var builder = Palette.from(bitmap)
var palette = builder.generate()

color0.setBackgroundColor(palette.getDominantColor(Color.WHITE))
color0.setTextColor(palette.dominantSwatch?.bodyTextColor ?: Color.WHITE)

color1.setBackgroundColor(palette.getMutedColor(Color.WHITE))
color1.setTextColor(palette.mutedSwatch?.bodyTextColor ?: Color.WHITE)

color2.setBackgroundColor(palette.getDarkMutedColor(Color.WHITE))
color2.setTextColor(palette.darkMutedSwatch?.bodyTextColor ?: Color.WHITE)

color3.setBackgroundColor(palette.getLightMutedColor(Color.WHITE))
color3.setTextColor(palette.lightMutedSwatch?.bodyTextColor ?: Color.WHITE)

color4.setBackgroundColor(palette.getVibrantColor(Color.WHITE))
color4.setTextColor(palette.vibrantSwatch?.bodyTextColor ?: Color.WHITE)

color5.setBackgroundColor(palette.getDarkVibrantColor(Color.WHITE))
color5.setTextColor(palette.darkVibrantSwatch?.bodyTextColor ?: Color.WHITE)

color6.setBackgroundColor(palette.getLightVibrantColor(Color.WHITE))
color6.setTextColor(palette.lightVibrantSwatch?.bodyTextColor ?: Color.WHITE)

这样每个颜色上的文字都可以清晰的显示。

那么这个标题和主体文本颜色有什么差别，他们又是如何的到的？我们来看看源码：

/**
 * Returns an appropriate color to use for any 'title' text which is displayed over this
 * {@link Swatch}'s color. This color is guaranteed to have sufficient contrast.
 */
@ColorInt
public int getTitleTextColor() {
    ensureTextColorsGenerated();
    return mTitleTextColor;
}

/**
 * Returns an appropriate color to use for any 'body' text which is displayed over this
 * {@link Swatch}'s color. This color is guaranteed to have sufficient contrast.
 */
@ColorInt
public int getBodyTextColor() {
    ensureTextColorsGenerated();
    return mBodyTextColor;
}

可以看到都会先执行ensureTextColorsGenerated()，它的源码如下：

private void ensureTextColorsGenerated() {
    if (!mGeneratedTextColors) {
        // First check white, as most colors will be dark
        final int lightBodyAlpha = ColorUtils.calculateMinimumAlpha(
                Color.WHITE, mRgb, MIN_CONTRAST_BODY_TEXT);
        final int lightTitleAlpha = ColorUtils.calculateMinimumAlpha(
                Color.WHITE, mRgb, MIN_CONTRAST_TITLE_TEXT);

        if (lightBodyAlpha != -1 && lightTitleAlpha != -1) {
            // If we found valid light values, use them and return
            mBodyTextColor = ColorUtils.setAlphaComponent(Color.WHITE, lightBodyAlpha);
            mTitleTextColor = ColorUtils.setAlphaComponent(Color.WHITE, lightTitleAlpha);
            mGeneratedTextColors = true;
            return;
        }

        final int darkBodyAlpha = ColorUtils.calculateMinimumAlpha(
                Color.BLACK, mRgb, MIN_CONTRAST_BODY_TEXT);
        final int darkTitleAlpha = ColorUtils.calculateMinimumAlpha(
                Color.BLACK, mRgb, MIN_CONTRAST_TITLE_TEXT);

        if (darkBodyAlpha != -1 && darkTitleAlpha != -1) {
            // If we found valid dark values, use them and return
            mBodyTextColor = ColorUtils.setAlphaComponent(Color.BLACK, darkBodyAlpha);
            mTitleTextColor = ColorUtils.setAlphaComponent(Color.BLACK, darkTitleAlpha);
            mGeneratedTextColors = true;
            return;
        }

        // If we reach here then we can not find title and body values which use the same
        // lightness, we need to use mismatched values
        mBodyTextColor = lightBodyAlpha != -1
                ? ColorUtils.setAlphaComponent(Color.WHITE, lightBodyAlpha)
                : ColorUtils.setAlphaComponent(Color.BLACK, darkBodyAlpha);
        mTitleTextColor = lightTitleAlpha != -1
                ? ColorUtils.setAlphaComponent(Color.WHITE, lightTitleAlpha)
                : ColorUtils.setAlphaComponent(Color.BLACK, darkTitleAlpha);
        mGeneratedTextColors = true;
    }
}

通过代码可以看到，这两种文本颜色实际上要么是白色要么是黑色，只是透明度Alpha不同。

这里面有一个关键函数，即ColorUtils.calculateMinimumAlpha()：

public static int calculateMinimumAlpha(@ColorInt int foreground, @ColorInt int background,
        float minContrastRatio) {
    if (Color.alpha(background) != 255) {
        throw new IllegalArgumentException("background can not be translucent: #"
                + Integer.toHexString(background));
    }

    // First lets check that a fully opaque foreground has sufficient contrast
    int testForeground = setAlphaComponent(foreground, 255);
    double testRatio = calculateContrast(testForeground, background);
    if (testRatio < minContrastRatio) {
        // Fully opaque foreground does not have sufficient contrast, return error
        return -1;
    }

    // Binary search to find a value with the minimum value which provides sufficient contrast
    int numIterations = 0;
    int minAlpha = 0;
    int maxAlpha = 255;

    while (numIterations <= MIN_ALPHA_SEARCH_MAX_ITERATIONS &&
            (maxAlpha - minAlpha) > MIN_ALPHA_SEARCH_PRECISION) {
        final int testAlpha = (minAlpha + maxAlpha) / 2;

        testForeground = setAlphaComponent(foreground, testAlpha);
        testRatio = calculateContrast(testForeground, background);

        if (testRatio < minContrastRatio) {
            minAlpha = testAlpha;
        } else {
            maxAlpha = testAlpha;
        }

        numIterations++;
    }

    // Conservatively return the max of the range of possible alphas, which is known to pass.
    return maxAlpha;
}

它根据背景色和前景色计算前景色最合适的Alpha。这期间如果小于minContrastRatio则返回-1，说明这个前景色不合适。而标题和主体文本的差别就是这个minContrastRatio不同而已。

回到ensureTextColorsGenerated代码可以看到，先根据当前色调，计算出白色前景色的Alpha，如果两个Alpha都不是-1，就返回对应颜色；否则计算黑色前景色的Alpha，如果都不是-1，返回对应颜色；否则标题和主体文本一个用白色一个用黑色，返回对应颜色即可。

更多功能

上面我们创建Palette时先通过Palette.from(bitmap)的到了一个Palette.Builder对象，通过这个builder可以实现更多功能，比如：

  • addFilter：增加一个过滤器
  • setRegion：设置图片上的提取区域
  • maximumColorCount：调色板的最大颜色数
    等等

总结

通过上面我们看到，Palette的功能很强大，但是它使用起来非常简单，可以让我们很方便的提取图片中的颜色，并且适配合适的文字颜色。同时注意因为ColorUtils是public的，所以当我们需要文字自动适配颜色的情况时，也可以通过ColorUtils的几个函数自己实现计算动态颜色的方案。

Jetpack提供了很多功能模块，比如用于处理通信的ActivityResult，可以参考【Jetpack】ActivityResult介绍及原理分析

BennuCTech
关注
专栏目录
Android取色器 调色板 颜色选择器
02-14
采用kotlin代码实现，代码简单易懂，采用接口方式回调结果，已经封装好，方便移植。具有以下特性： 1、支持点击选色，滑动选色，且支持实时预览 2、颜色分解为Alpha及RGB 四通道 更加直观 3、支持4通道分别调色，精准到每个维度，每个色值 4、输出支持十六进制及RGB通道
ym—— Android 5.0学习之使用Palette
陈宇明
11-30 5698
前言 动态色彩 根据图片来决定标题的颜色和标题栏的背景色，这样视觉上更具有冲击力和新鲜感，而不像统一色调那样呆板。 大家想知道这个效果如何实现的吗？ 学习Palette轻轻松松搞定此效果哦~！ Palette是什么？ 它能让你从图像中提取突出的颜色。这个类能提取以下突出的颜色： Vibrant(充满活力的) Vibrant dark(充满活力的黑) V
android Palette使用详解
热门推荐
xiaochuanding的博客
06-10 1万+
Palette是一个可以从图片(Bitmap)中提取颜色的帮助类，可以使UI更加美观，根据图片动态的显示相应的颜色。
Android颜色取色器
06-20
Android开发中，有时候美工给我们的设计图，并不是每个都标有颜色值，那么我们就可以用颜色取色器来看那是什么颜色。
Android开发：Android Jetpack：14.JetpackComposeUI框架入门.pdf
最新发布
10-24
Android开发：Android Jetpack：14.JetpackComposeUI框架入门.pdf
Android开发：Android Jetpack：LiveData数据观察者模式.pdf
10-24
Android开发：Android Jetpack：LiveData数据观察者模式.pdf
Android开发：Android Jetpack：5.Room数据库框架.pdf
10-24
Android开发：Android Jetpack：5.Room数据库框架.pdf
Android开发：Android Jetpack：11.Dagger2依赖注入.pdf
10-24
Android开发：Android Jetpack：11.Dagger2依赖注入.pdf
Android开发：Android Jetpack：12.Hilt依赖注入框架.pdf
10-24
Android开发：Android Jetpack：12.Hilt依赖注入框架.pdf
android开发取色器
06-02
移动开发中经常使用的颜色取色器，使用非常方便。。。。。
自定义吸取图片颜色值（android）
08-15
android自定义View吸取图片背景的颜色值，获取图片颜色
Android Support Palette使用详解
01-05
使用Palette API选择颜色  良好的视觉设计是app成功所必不可少的, 而色彩设计体系是设计的基础构成. Palette包是支持包, 能够从图片中解析出突出的颜色, 从而帮助你创建出视觉迷人的应用 你能够使用Palette包设计布局主题, 并把自定义色彩应用到可视化元素中. 比如, 你可以根据专辑封面, 用Palette创建为歌曲创建一个彩色标题卡片, 或者当应用背景图片发生改变时调整toolbar颜色. Palette对象给予你权限访问Bitmap图片里面的颜色, 同时也根据Bitmap提供了6个主要的颜色, 供你填写设计选择. 设置依赖 Palette为库从版本Android Su
android调色板取色板
10-26
android调色板、取色板实现，圆盘取色板，可以点击或者滑动取色，可以接收颜色设置自动跳转到对应位置
Android代码-Android 上的取色工具。
08-06
ColorPickerView You can use ColorPickerView just like ImageView and get HSV colors, ARGB values, Hex color codes from your gallery pictures or custom images by tapping on the desired color. Including in your project Gradle Add below codes to your root build.gradle file (not your module build.gradle file). allprojects { repositories { jcenter() } } And add a dependency code to your module's build.gradle file. dependencies { implementation "com.github.skydoves:colorp
android palette组件用法,Android Palette（调色板）的使用
weixin_42363388的博客
05-26 2002
一、Palette的简单介绍android-support-v7-palette 里面的Palette是Android L SDK 中的新特性，可以使用 Palette 从图像中提取出突出的颜色(主色调)，获取到颜色之后我们再将这个颜色值赋给 ActionBar、状态栏等。从而达到界面色调的统一，使界面美观协调。原理通过得到一个bitmap，通过方法进行分析，取出LightVibrantSwatc...
Android中使用Palette让你的页面UI优雅起来
fxjzzyo的博客
05-15 1814
android中Palette的介绍，用法，举例，用Palette做一个优雅的卡片+文字列表。
android 取色方法,安卓取色器 - 「一年好景君须记」，带你玩转安卓的色彩世界 - Android 应用 - 工具 - 【最美应用】...
weixin_42524703的博客
05-25 1861
在这篇文章中，会介绍 5 个取色软件。它们分别属于两个等级，前 2 个第一等级，体验很好；后 3 个则属于第二等级，体验不错，但我觉得相比第一等级有一些不足需要改进。调色板Palette最好的软件还是作为第一个分享吧，我实在舍不得将它放在最后。它有三种模式，分别是拍照、图库、图片链接。功能虽然很单一只是取色，但是这三种模式却足够专业强大。另外，它还提供了推荐图片，你可以从中选择自己喜欢的图片、色彩...
Android Jetpack-Compose教程：从入门到精通
资源摘要信息:"Jetpack-Compose是谷歌推出的一种用于构建原生Android界面的声明式UI框架，它基于Kotlin语言，并且是Android官方推荐的开发方式。Jetpack-Compose将UI组件的构建方式从传统的XML布局文件转变成了更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BennuCTech

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值