使用 Palette 使你的 UI 色彩与内容更贴合

版权声明:

本公众号发布的所有文章,未特殊署名,均属于原创,版权归本公众号所有。

转载请参阅公众号的:《转载授权》。

一、前言

今天介绍一个 Android 下比较有意思的 Support v7 库,Palette,它翻译过来就是调色板。

Palette 可以从一张 Bitmap 中提取出它突出的颜色,这样我们就可以将提取出来的颜色设置在 App 的固定 UI 中(例如:ToolBar 的背景),使得 UI 页面的整体风格更加的美观和融洽。

比如,对于一些影视类的 App,视频详情页的主题都是视频的海报,那么对于页面背景,我们可以提取视频海报的颜色,设置在背景上,使得效果更佳柔和美观。

Palette 是一个 Support v7 的包,如果使用 Gradle 引入依赖,这里使用最新的 26.+。

 
compile "com.android.support:palette-v7:26.+"

二、Palette 的使用

Palette 使用起来非常的简单,既然目的是从一个图片中提取颜色,它的步骤就有:

  1. 传递一个 Bitmap,得到一个 Palette。

  2. 通过 Palette 提取需要的颜色。

就是这么简单,如同要将大象放冰箱,需要几步一样清晰。

那么接下来我们先来了解它使用的细节。

2.1 传递 Bitmap 得到一个 Palette

Palette 在旧版本上有一些 generate() 的方法,用于生成一个 Palette 对象,但是在新版本上已经被标记为 @Depercated 了,所以这里不推荐使用。

而在新版上,推荐使用 Palette.Builder 来创建我们的 Palette 对象,我们可以通过 from() 方法使用它。

一般我们使用第一个方法即可,直接传递进去一个 Bitmap 对象。得到 Builder 之后,我们还可以配置一些规则,但是一般我们不需要进行额外的(后面会讲到)。再通过 Builder.generate() 即可得到我们需要的 Palette 对象了。

2.2 通过 Palette 提取颜色

Palette 从图片中提取的颜色,有很多选择。这里又涉及到另外一个类,Swatch 。

Palette 可被提取的每个颜色,都被封装成一个 Swatch 对象,用来管理多种颜色。

这些 Swatch 有:

  • DominantSwatch

  • VibrantSwatch

  • DarkVibrantSwatch

  • LightVibrantSwatch

  • MutedSwatch

  • DarkMutedSwatch

  • LightMutedSwatch

其实这些 Swatch,真的不太好解释其意义,唯一特别一点的就是 DominantSwatch ,它是从图片中提取的最突出的颜色。

这些 Swatch 在 Palette 都提供了对应的 getXxx() 方法获得。不过需要注意的是,这些 getXxx() 方法可能会得到一个 null ,因为有些颜色是没有的。

如果只是需要得到一个颜色值,Palette 同时也提供了对应的 getXxxColor() 方法,方便我们使用。

得到 Swatch 对象之后,就可以通过对应的 Swatch 中对应的 Api 获取我们需要的颜色值。

  • getPopulation() :Swatch 中的像素个数。

  • getRgb():颜色的 RGB 值。

  • getHsl():颜色的 HSL 值。

  • getBodyTextColor():对应的文字颜色值。

  • getTitleTextColor():对应的标题文字颜色值。

通常来说,我们只需要通过 getRgb() 获取到对应的颜色设置在背景上,如果背景之上还有文字内容,可以通过 getBodyTextColor() 提取出与背景匹配的文字颜色值,这样可以显得更加的柔和,让文字看起来更清晰和舒服。比如,如果一个深色的背景,为它设置一个默认的深色文字,基本上就看不见了,因为对比对太弱。

2.3 举个例子

到这里,基本上 Palette 的基本 Api 就讲解清楚了,下面举个实际的例子来看看。

这里找了三张 Eason 的海报,用于做 Palette 的 Demo 资源,间隔去替换图片,然后分别提取出对应的颜色和字体颜色,设置在下面按钮的背景上,然后每 3s 切换一张图片。

因为有一些图片,获取的 Swatch 可能会返回 null ,所以这里用了一个比价扎眼的红色,作为错误色。

以下是获取 Swatch 的代码。

接下来通过 Swatch 提取我们需要的颜色。

这里分别获取了需要的颜色以及字体颜色,下面看看运行的效果:

可以看到,确实有一些颜色,被标记成了红色,说明当前图片有获取不到的对应颜色。

三、分析 Palette 的实现

3.1 Palette 的主线逻辑

继续深入看看 Palette 的实现原理,先从主线开始看。

Builder.generate() 开始。

从代码中可以看到,在 generate() 中,主线逻辑:

  1. 首先会通过 scaleBitmapDown() 方法,将图片压缩成一个小像素的,等于生成了一个新的 Bitmap 对象,这样有利于内存的管理,并且也减少了计算量。

  1. 然后再通过 mRegion 判断是否只是提取图片的某个区域,默认是完整的图片全部提取,当然也可以对 mRegion 进行配置。

  2. 之后再构造一个 ColorCutQuantizer 对象,使用它的 getQuantizedColors() 方法得到 Swatch。

  3. 使用完前面压缩的 Bitmap 对象之后,再使用 recycle() 将其回收掉。

  4. 最后,通过 Palette 本身的构造函数,去生成一个 Palette 对象,返回出去。

接下来看看比较关键的 ColorCutQuantizer 中的实现逻辑。

从代码中可以看到,其中的逻辑还是很清晰的。

  1. 首先通过 quantizeFromRgb888() 方法,将每个像素的颜色进行量化,类似于将每个颜色取一个靠近的设置。举个不恰当的例子,将不同深度的红,都标记成红色。

  2. 再通过 shouldIgnoreColor() 过滤掉不需要的颜色。

  3. 最终获取到的颜色,如果小于等于我们设置的 maxColors,就可以通过 approximateToRgb888() 生成一批 Swatch。

  4. 如果大于 maxColors,就再通过 quantizePixels() 去掉一些杂色。

  5. 无论如何,最终操作的就是这里得到的 mQuantizedColors 对象。

3.2 Swatch 的 Target

所有需要的 Swatch ,都是被 Target 对象所标记。不同的 Swatch 都是通过 Target 中标记的常量值,进行运算,得到行的颜色。

3.3 过滤掉不需要的颜色

Palette 可以设置一些我们不需要的颜色,让它们不参与运算。这里的过滤条件,通过 Filter 来设定,并且 Palette 也提供给了一个 DEFAULT_FALTER 来标记默认的过滤颜色。

可以看到,默认的 Filter 会过滤掉一些靠近黑和白的颜色。

当然,我们也可以自己定义 Filter ,并通过 Palette 中的 addFilter()clearFilters() 来管理它。

这里存储 Filter 的是一个 ArrayList ,所以我们是可以定义很多个 Filter 加入进去的,它们都会生效。

3.4 设置 MaxColor

在 ColorCutQuantizer 中,被使用的 maxColor ,主要用于标记需要使用的颜色个数。它是可以通过 maximumColorCount() 方法,进行设置的,如果不对其进行设定,默认值为 16。

理论上来说,这里设置的maxColor 的值越大,运算花费的时间就越长。而越小,可以被选择的色值也就越少。

所以最佳的做法是根据当前 Bitmap 的用途来决定,色彩越丰富的图,设置的 maxColor 越大,即可。不过正常来说也不需要额外的设定,默认的配置就挺好用了。

四、小结

到这里就分析完 Palette 的所有相关的内容,不要仅仅满足使用。实际上看了 Palette 的源码,对色彩的运算,也有了更加深入的了解。


推荐阅读:

点赞或者分享吧~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: flat ui palette 是一种设计概念,用于指代扁平化用户界面的颜色调色板。扁平化设计是一种趋势,旨在使用户界面看起来简洁、清晰,并通过减少阴影、渐变和纹理等元素来实现。同时,flat ui palette也提供了一组适用于扁平化用户界面的颜色选项。 flat ui palette 的特点是颜色浅淡、饱和度较低,使得界面易于阅读和理解。它通常采用简洁的色彩结构,遵循少即是多的原则。常见的颜色选项包括蓝色、绿色、红色、橙色、灰色等,这些颜色都是相对柔和而不刺眼的。此外,flat ui palette 还强调简单性和一致性,因此常常使用单色或少量配色来实现整个用户界面的统一。 flat ui palette 的优势在于它能够提供直观、直接的用户体验。扁平化设计通过简化界面元素,使用户能够轻松地理解和操作应用程序或网站。颜色的选择也是经过精心考虑,使得界面加和谐、舒适。 然而,flat ui palette 也存在一些限制。由于颜色的选择相对有限,可能会使界面显得单调,缺乏足够的视觉吸引力。此外,部分用户可能对扁平化设计感到陌生,在导航和交互方面可能会遇到一些困难。 总之,flat ui palette 是一种用于扁平化用户界面的颜色调色板,通过简化和统一的设计原则,提供了直观、直接的用户体验。在设计中使用 flat ui palette 可以使界面看起来清晰、简洁,但也需要注意平衡好简约和视觉吸引力之间的关系。 ### 回答2: Flat UI Palette是一种平面设计的配色方案。它采用了简洁、扁平的设计风格,追求简单明了的界面效果。 Flat UI Palette拥有一系列基于明亮而清新的颜色选项。其中包括明亮的蓝色、绿色、黄色以及橙色。这些颜色经过精心挑选和搭配,旨在给用户带来愉悦和轻松的界面体验。 Flat UI Palette的配色方案注重色彩的对比度和相容性,既保证了清晰度,又给人以视觉上的舒适感。此外,它还特别注重在不同元素之间的视觉层次感和触感,以便让用户加容易理解和操作。 Flat UI Palette的设计原则也遵循了简洁和直观的哲学。它避免了繁琐的效果和复杂的图形元素,而是着重于简单、直观和易于使用的界面。这种设计风格使得各种信息和功能加清晰易懂,减少了用户的认知负担。 总而言之,Flat UI Palette是一种以简洁、扁平和直观为特点的配色方案。它注重色彩的对比度和相容性,追求用户界面的清晰度和视觉上的舒适感。通过它,用户可以加轻松、愉悦地使用各种应用和网站。 ### 回答3: Flat UI Palette(扁平化界面调色板)是一种用于设计扁平化界面的色彩方案。扁平化设计是一种简化、去除渐变和阴影效果,注重纯色、简洁和直观的设计风格。而Flat UI Palette则提供了一套适用于扁平化设计的颜色选择。 Flat UI Palette通常包含一系列的鲜艳、明亮的色彩,例如亮蓝、鲜黄、鲜绿、亮红等。这些颜色在界面设计中被广泛应用,以突出界面元素、增强用户体验。同时,Flat UI Palette也注重色调的搭配和配对,使得整体界面色彩搭配协调、和谐。 扁平化设计和Flat UI Palette的兴起主要得益于移动设备的普及和界面设计的转变。扁平化设计可以使得界面加直观、易懂,适合移动设备的小屏幕。而Flat UI Palette提供了一种规范、易用的颜色方案,帮助设计师好地应用扁平化设计思维。 在实际设计中,设计师可以根据具体需求选择和调整Flat UI Palette中的颜色。例如,可以选择适用于界面主要元素的亮蓝作为基调色,再搭配其他亮色、中性色等进行界面的细节处理。设计师也可以根据品牌风格和用户群体进行定制化的颜色选择,以满足不同设计需求。 总而言之,Flat UI Palette是一种为扁平化界面设计提供的色彩方案,它的使用可以使得界面加简洁、直观,增强用户体验。同时,根据具体需求和情景,设计师可以灵活选择和调整Flat UI Palette中的颜色,让界面设计加符合品牌风格和用户期望。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值