Material Design整理(七)——Palette调色板

简介

Palette的意思是调色板,它的作用是从图像中提取出突出的颜色,这样就可以将提取出来的颜色赋给状态栏、Toolbar、标题栏等,使得整个界面看起来色调统一,UI风格更加美观和融洽。

看上方效果图:可以看到,下面的6个条块的颜色是从图片中提取出来的,Palette可以提取的颜色有:

  • VibrantColor(有活力的颜色)
  • LightVibrantColor(有活力的 亮色)
  • DarkVibrantColor(有活力的 暗色)
  • MutedColor(柔和的颜色)
  • LightMutedColor(柔和的 亮色)
  • DarkMutedColor(柔和的 暗色)

使用

1、添加依赖

compile 'com.android.support:palette-v7:26.0.0-alpha1'

2、代码调用

    private void pickPicColors() {
        Bitmap bitmap = ((BitmapDrawable) iv_palette_img.getDrawable()).getBitmap();
        Palette.Builder builder = Palette.from(bitmap);
        builder.generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                // 提取有活力的颜色
                int vibrantColor = palette.getVibrantColor(Color.RED);
                iv_vibrant.setBackgroundColor(vibrantColor);
                //提取有活力的 亮色
                int lightVibrantColor = palette.getLightVibrantColor(Color.RED);
                iv_vibrant_light.setBackgroundColor(lightVibrantColor);
                //提取有活力的 暗色
                int darkVibrantColor = palette.getDarkVibrantColor(Color.RED);
                iv_vibrant_dark.setBackgroundColor(darkVibrantColor);
                //提取柔和的颜色
                int mutedColor = palette.getMutedColor(Color.RED);
                iv_muted.setBackgroundColor(mutedColor);
                //提取柔和的亮色
                int lightMutedColor = palette.getLightMutedColor(Color.RED);
                iv_muted_light.setBackgroundColor(lightMutedColor);
                //提取柔和的暗色
                int darkMutedColor = palette.getDarkMutedColor(Color.RED);
                iv_muted_dark.setBackgroundColor(darkMutedColor);
            }
        });
    }

Palette也是使用建造者模式,先创建builder,通过调用Palette.from()得到Palette.Builder对象,一些配置可以通过builder来设置,我们只是使用默认的配置。

通过调用builder的generate方法分析图片,得到Palette对象,这里传入了一个Listener,该方法是异步执行,因为分析图像颜色需要时间,如果图片中颜色多样而且复杂,分析所消耗的事件也会越长,所以是通过接口回调分析完毕的结果。

得到Palette对象后,我们就可以通过它获取到6种色调,由于不一定能够提取到对应的色调,所以在调用每种方法的时候需要传入一个默认的颜色,如果提取不到对应的颜色,则是用默认颜色来代替。


3、获取样本 Swatch

Palette.Swatch vibrantSwatch = palette.getVibrantSwatch();//获取有活力的颜色样本
Palette.Swatch lightVibrantSwatch = palette.getLightVibrantSwatch();//获取有活力 亮色的样本
Palette.Swatch drakVibrantSwatch = palette.getDarkVibrantSwatch();//获取有活力 暗色的样本
Palette.Swatch mutedSwatch = palette.getMutedSwatch();//获取柔和的颜色样本
Palette.Swatch lightMutedSwatch = palette.getLightMutedSwatch();//获取柔和 亮色的样本
Palette.Swatch darkMutedSwatch = palette.getDarkMutedSwatch();//获取柔和 暗色的样本

使用Swatch的方法

int rgb = vibrantSwatch.getRgb();//获取对应样本的rgb
float[] hsl = vibrantSwatch.getHsl();//获取hsl颜色
int population = vibrantSwatch.getPopulation();//获取像素的数量
int titleTextColor = vibrantSwatch.getTitleTextColor();//获取适合标题文字的颜色
int bodyTextColor = vibrantSwatch.getBodyTextColor();//获取适配内容文字的颜色

Palette除了可以获取到上面提到的6中色调外,还可以获取到对应的Swatch对象,Swatch是样本的意思,Swatch样本对象中,可以获取色调的RGB颜色,HSL颜色,像素的数量等,同时,还提供了相当牛逼的方法,getTitleTextColor()和getBodyTextColor(),获取适合作为图片上方标题和内容文字的颜色,如:

int titleColor=vibrantSwatch.getTitleTextColor();
int contentColor=vibrantSwatch.getBodyTextColor();
tv_palette_title.setTextColor(titleColor);
tv_palette_content.setTextColor(contentColor);

原文发布于微信公众号 - Android机动车(JsAndroidClub)

原文发表时间:2017-12-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android开发经验

Android自定义View-记录一个简单却又常见的效果实现

代码 简单列下主要代码,完整代码地址放在了文字末尾。 1.为了更加灵活,我这里提供了很多属性用于用户自己来设置:

8420
来自专栏Thinks

带你轻松打开svg滤镜的大门

上次和大家一起,用最简单直白,轻松粗暴的方式学习了一遍SVG动画,这次我们再一起来搞点不一样的东西,SVG滤镜的实现。

20020
来自专栏算法+

pixel art之 hqx 算法

在去年的时候,偶然看到hqx算法。 一个高质量的插值放大算法。 与双线性插值等插值算法相比,这个算法放大后对人眼保护相对比较好。 没有双线性插值看起来模糊,固然...

39460
来自专栏我就是马云飞

自定义角标库

前言 角标的需求在app是经常需要用到的,比如未读通知/信息等,一般,我们可以通过嵌套相对布局的方式来设置角标,但是除了TextView,可能Butt...

32270
来自专栏杨龙飞前端

line-height属性总结

19530
来自专栏编程之旅

iOS开发——Core Graphics绘图

我们在搭建UI界面时,有很多时候,我们会用到iOS自带的绘图功能来完成一些界面的效果,很常用也很方便。今天我们在这里就一起讨论一下iOS的绘图功能。

30220
来自专栏糊一笑

CSS Grid 新手入门

另外,下面一段话摘自A Complete Guide to Grid,对于CSS Grid会有更加清楚地释义

22360
来自专栏前端桃园

深入理解z-index

在页面编写的过程中,经常需要处理元素的重叠。重叠的顺序不当则容易造成元素被错误地遮盖等现象。一般地,有很多人认为只需要指定元素的z-index即可调整重叠的顺序...

13420
来自专栏everhad

Android自定义评分控件:RatingStarView

RatingStarView Android自定义的评分控件,类似RatingBar那样的,使用星星图标(full、half、empty)作为rating值的“...

46590
来自专栏GIS讲堂

CSS+JS实现图片集展示

翻页是通过updateImage这个函数实现的,传递参数为type,判断操作时“上一张”还是“下一张”,updateImage函数如下:

21460

扫码关注云+社区

领取腾讯云代金券