android palette组件用法,Android Palette(调色板)的使用
一、Palette的简单介绍
android-support-v7-palette 里面的Palette是Android L SDK 中的新特性,可以使用 Palette 从图像中提取出突出的颜色(主色调),获取到颜色之后我们再将这个颜色值赋给 ActionBar、状态栏等。从而达到界面色调的统一,使界面美观协调。
原理
通过得到一个bitmap,通过方法进行分析,取出LightVibrantSwatch,DarkVibrantSwatch,LightMutedSwatch,DarkMutedSwatch这些样本,然后得到rgb。
Palette这个类中提取以下突出的颜色
Vibrant (有活力)
Vibrant dark(有活力 暗色)
Vibrant light(有活力 亮色)
Muted (柔和)
Muted dark(柔和 暗色)
Muted light(柔和 亮色)
创建方法
//目标bitmap
Bitmap bm =BitmapFactory.decodeResource(getResources(),R.drawable.kale);
//方法1
Palette.Builder builder = Palette.from(bm);
Palette palette=builder.generate();
//方法2 使用异步
builder.generate(bitmap, new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
// Here's your generated palette
}
二、内部嵌套类和常用方法
Palette.Builder
生成器类,生成 Palette 实例。
Palette.Filter
过滤器接口,使 Palette 有更加细腻的颜色过滤
Palette.PaletteAsyncListener
异步加载监听
pattle.Swatch
提供获取结果的色彩样本
from(List switches)
通过预设的 Palette.Swatch 颜色样本列表 来生成 Palette
返回值:static Palette
from(Bitmap bitmap)
通过返回 Palette.Builder 实例来构建 Palette
返回值:static Palette.Builder
generate(Bitmap bitmap,int numColors) 、generate(Bitmap bitmap) 、
该方法已被遗弃,建议用 Palette.Builder 来生成Palette
返回值:static Palette
getColorForTarget(Target target,int defaultColor)
返回一个从目标获取的的 rgb 色值
返回值:int
getDarkMutedColor(int defaultColor)
返回一个柔和的暗色调 rgb 值
返回值:int
getDarkMutedSwatch()
返回一个柔和的暗色调样本类
返回值:Palette.Swatch
getDarkVibrantColor(int defaultColor)
返回一个鲜明的暗色调 rgb 值
返回值:int
getDomainSwatch()
返回一个主色调的样本类
返回值:Palette.Swatch
getLightMutedColor(int defaultColor)
返回一个柔和的亮色调颜色 rgb
返回值:Palette.Swatch
getLightVibrantSwatch()
返回一个鲜明的亮色调样本类
返回值:Palette.Swatch
三、使用样本(swatch)
创建完一个实例之后,我们还需要得到一种采集的样本(swatch),有6中样本(swatch):
Palette.getVibrantSwatch()
Palette.getDarkVibrantSwatch()
Palette.getLightVibrantSwatch()
Palette.getMutedSwatch()
Palette.getDarkMutedSwatch()
Palette.getLightMutedSwatch()
List swatches = palette.getSwatches();//一次性获得所有的swatch;
使用方法
getPopulation(): the amount of pixels which this swatch represents.
getRgb(): the RGB value of this color.
getHsl(): the HSL value of this color.
getBodyTextColor(): the RGB value of a text color which can be displayed on top of this color.
getTitleTextColor(): the RGB value of a text color which can be displayed on top of this color.
比如如果你的TextView 有个背景图片,要想让字体颜色能够和背景图片匹配,则使用getBodyTextColor()比较合适,getTitleTextColor()其实应该和getBodyTextColor()差不多
四、Size问题
在上面的代码中,你可能注意到了可以设置palette的size。size越大,花费的时间越长,而越小,可以选择的色彩也越小。最佳的选择是根据image的用途:
头像之类的,size最好在24-32之间;
风景大图之类的 size差不多在8-16;
默认是16.
Bitmap bm = BitmapFactory.decodeResource(getResources(),
R.drawable.kale);
Palette palette = Palette.generate(bm);
if (palette.getLightVibrantSwatch() != null) {
//需要注意的是`getVibrantSwatch()可能会返回一个null值,
//所以检查一下是必须的。
//得到不同的样本,设置给imageview进行显示
iv.setBackgroundColor(palette.getLightVibrantSwatch().getRgb());
iv1.setBackgroundColor(palette.getDarkVibrantSwatch().getRgb());
iv2.setBackgroundColor(palette.getLightMutedSwatch().getRgb());
iv3.setBackgroundColor(palette.getDarkMutedSwatch().getRgb());
}
注意
加载不能在主线程中进行,加载方式有同步加载和异步加载两种:
1 同步
由于他们很可能会比较耗时(在分析大图片或者所需颜色较多时),所以它们不应该在主线程中执行。你应该先在别的线程中使用这两个函数进行解析,解析成功之后再使用。
//在加载图片的后台线程中同步加载
Palette palette = Palette.from(bitmap).genrate();
.
.
.
2 异步
有时候你不会在加载图片的线程(非主线程)中使用解析出的颜色,所以Palette提供了异步方法,他们与之前的函数的区别就是需要传入PaletteAsyncListener,提供在图片解析完成后的回调函数。
//异步加载
Palette.from(bitmap).genrate(new PaletteAsyncListener(){
public void onGenerated(Palette p){
.
.
.
}
});
Palette经常用于和ViewPager,Fragment搭配使用,当我们的Pager切换时伴随着Fragment的变化,而Fragment里的内容一般是不同的,所以每个Fragment里的一般视觉效果也是不同的,所以我们可以用Palette来去提取Fragment中的主色调,把这个主色调用于整体的UI风格。
2625875-1a5ffa9daaeb0192.gif
其他Demo
private void setPaletteColor(TextView tv, int color) {
tv.setBackgroundColor(color);
tv.setText(ColorUtils.toRGBHexString(color));
tv.setTextColor(ColorUtils.parseBackgroundColor(color));
}
private void initPalette() {
Drawable drawable = mPictureIv.getDrawable();
Bitmap bitmap = drawableToBitmap(drawable);
// Synchronous
// mPalette = Palette.from(bitmap).generate();
// Asynchronous
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
// Use generated instance
int defaultColor = Color.parseColor("#b64242");
int mVibrantColor = palette.getVibrantColor(defaultColor);
int mDarkVibrantColor = palette.getDarkVibrantColor(defaultColor);
int mLightVibrantColor = palette.getLightVibrantColor(defaultColor);
int mMutedColor = palette.getMutedColor(defaultColor);
int mDarkMutedColor = palette.getDarkMutedColor(defaultColor);
int mLightMutedColor = palette.getLightMutedColor(defaultColor);
setPaletteColor(mVibrantColorTv, mVibrantColor);
setPaletteColor(mDarkVibrantColorTv, mDarkVibrantColor);
setPaletteColor(mLightVibrantColorTv, mLightVibrantColor);
setPaletteColor(mMutedColorTv, mMutedColor);
setPaletteColor(mDarkMutedColorTv, mDarkMutedColor);
setPaletteColor(mLightMutedColorTv, mLightMutedColor);
// dominant color (主色)
int mDominantColor = palette.getDominantColor(defaultColor);
setPaletteColor(mDominantColorTv, mDominantColor);
// Swatch - 色块 // 15种
List mSwatchList = palette.getSwatches();
Toast.makeText(MainActivity.this, "Swatch num: " + mSwatchList.size(), Toast.LENGTH_SHORT).show();
int index = -1;
LinearLayout mSwatchesContainer = null;
LinearLayout.LayoutParams params;
for (Palette.Swatch swatch : mSwatchList) {
int color = swatch.getRgb();
index++;
if (index % 3 == 0) {
mSwatchesContainer = new LinearLayout(getApplicationContext());
mSwatchesContainer.setOrientation(LinearLayout.HORIZONTAL);
params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.WRAP_CONTENT
);
params.topMargin = (int) DisplayUtils.dp2px(getApplicationContext(), 10);
mContainerLayout.addView(mSwatchesContainer, params); //
}
LinearLayout mSwatchContainer = new LinearLayout(getApplicationContext());
mSwatchContainer.setOrientation(LinearLayout.VERTICAL);
params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT);
params.weight = 1;
params.gravity = Gravity.CENTER;
if (mSwatchesContainer != null) {
mSwatchesContainer.addView(mSwatchContainer, params); //
}
TextView mColorTv = new TextView(getApplicationContext());
mColorTv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
setPaletteColor(mColorTv, color); //
mColorTv.setGravity(Gravity.CENTER);
params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
(int) DisplayUtils.dp2px(getApplicationContext(), 80)
);
params.gravity = Gravity.CENTER;
mSwatchContainer.addView(mColorTv, params); //
TextView mColorNameTv = new TextView(getApplicationContext());
mColorNameTv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
mColorNameTv.setText("Swatch " + index);
mColorNameTv.setGravity(Gravity.CENTER);
mColorNameTv.setTextColor(Color.parseColor("#333333"));
params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT
);
params.gravity = Gravity.CENTER;
mSwatchContainer.addView(mColorNameTv, params);
}
}
});
}
Drawable转Bitmap的方法:
public static Bitmap drawableToBitmap(Drawable drawable) {
Bitmap bitmap = Bitmap.createBitmap(
drawable.getIntrinsicWidth(),
drawable.getIntrinsicHeight(),
drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888 : Bitmap.Config.RGB_565);
Canvas canvas = new Canvas(bitmap); // canvas -> bitmap
//canvas.setBitmap(bitmap);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
drawable.draw(canvas); // drawable -> canvas
return bitmap; // drawable -> canvas -> bitmap
}
ColorUtils
public class ColorUtils {
public static int parseBackgroundColor2(int color) {
int counter = 0;
counter += Color.red(color) >= 128 ? 1 : 0;
counter += Color.green(color) >= 128 ? 1 : 0;
counter += Color.blue(color) >= 128 ? 1 : 0;
return counter >= 2 ? Color.BLACK : Color.WHITE;
}
// 通过分析背景色来决定当前文字的匹配颜色,使文字颜色自适应背景颜色
public static int parseBackgroundColor(int color) {
int red = Color.red(color);
int green = Color.green(color);
int blue = Color.blue(color);
if (red >= 128 && green >= 128 // 三选二
|| red >= 128 && blue >= 128
|| green >= 128 && blue >= 128) {
return Color.rgb(0, 0, 0);
}
return Color.rgb(255, 255, 255);
}
// #FF55FF => color
// int color = Color.parseColor("#b64242");
// color -> #FF55FF
public static String toRGBHexString(final int color) {
return toRGBHexString(Color.red(color), Color.green(color), Color.blue(color));
}
// (r,g,b) -> #FF55FF
public static String toRGBHexString(int red, int green, int blue) {
return toARGBHexString(-1, red, green, blue);
}
// default prefix: "#"
// (a,r,g,b) -> #FF55FF55
public static String toARGBHexString(int alpha, int red, int green, int blue) {
return toARGBHexString("#", alpha, red, green, blue);
}
public static String toARGBHexString(String prefix, int alpha, int red, int green, int blue) {
StringBuilder sb = new StringBuilder();
sb.append(prefix);
if (alpha != -1) {
String mAlphaStr = Integer.toHexString(alpha);
sb.append(mAlphaStr.length() == 1 ? "0" + mAlphaStr : mAlphaStr);
}
String mRedStr = Integer.toHexString(red);
sb.append(mRedStr.length() == 1 ? "0" + mRedStr : mRedStr);
String mGreenStr = Integer.toHexString(green);
sb.append(mGreenStr.length() == 1 ? "0" + mGreenStr : mGreenStr);
String mBlueStr = Integer.toHexString(blue);
sb.append(mBlueStr.length() == 1 ? "0" + mBlueStr : mBlueStr);
return sb.toString().toUpperCase();
}
}
android palette组件用法,Android Palette(调色板)的使用相关推荐
- android palette组件用法,android Palette调色板使用详解
Palette是一个可以从图片(Bitmap)中提取颜色的帮助类,可以使UI更加美观,根据图片动态的显示相应的颜色.现在最新的api是在版本22.0.0添加的,本篇文章也是使用的22.0.0的api版 ...
- android palette组件用法,Android Material Design:使用Palette优化界面色彩搭配。
我写过一篇博客介绍了常用Material Design控件的使用. http://www.jianshu.com/p/776cc6329fff 本想把大部分的Material Design的知识点写到 ...
- android palette组件用法,android Palette使用详解
Palette是一个可以从图片(Bitmap)中提取颜色的帮助类,可以使UI更加美观,根据图片动态的显示相应的颜色.现在最新的api是在版本22.0.0添加的,本篇文章也是使用的22.0.0的api版 ...
- android palette组件用法,Android Support Palette使用详解
使用Palette API选择颜色 良好的视觉设计是app成功所必不可少的, 而色彩设计体系是设计的基础构成. Palette包是支持包, 能够从图片中解析出突出的颜色, 从而帮助你创建出视觉迷人的应 ...
- android图片显示组件,Android可循环显示图像的Android Gallery组件用法实例
本文实例分析了Android可循环显示图像的Android Gallery组件用法.分享给大家供大家参考,具体如下: Gallery组件主要用于横向显示图像列表,不过按常规做法.Gallery组件只能 ...
- android palette组件用法,Android--Palette基本使用
Palette是一个类似调色板的工具类,根据传入的bitmap,提取出主体颜色,使得图片和颜色更加搭配,界面更协调.Palette 可以从一张图片中提取颜色,我们可以把提取的颜色融入到App UI中, ...
- android palette组件用法,Palette颜色提取使用详解
如果你试过android Lollipop的sdk,你可能注意到了Palette.Palette从图像中提取突出的颜色,这样可以把色值赋给ActionBar.或者其他,可以让界面整个色调统一. 创建P ...
- android置组件下面,Android Jetpack架构组件(十二)之Hilt
一. 依赖注入简介 依赖注入(英文Dependency Injection,简写DI)是一种被广泛使用的编程技术,主要的作用代码解耦. 借助依赖注入,我们可以轻松的管理类之间的依赖,并最终建立高可维护 ...
- android气泡组件,气泡 | Android 开发者 | Android Developers
气泡让用户可以轻松查看并参与对话. 气泡内置于"通知"系统中.它们浮动在其他应用内容上层,并会跟随用户转到任意位置.气泡可以展开以显示应用功能和信息,并可在不使用时收起. 当设备处 ...
最新文章
- 使用Python和OpenCV进行文本偏斜校正
- 二手服务器cpu性能,二手服务器cpu当主机
- 部署Configuration Manager主站点以及辅助站点
- Codeforces 1103
- java 实体属性个数_?Java中比较实用实体转换工具介绍
- python3精要(7)-集合,集合运算,集合解析
- 在Oracle Cloud上的Prime-UI,JAX-RS和Jersey和Gson
- 第二十六期:HTTP 3的前世今生及尝鲜
- Coursera自动驾驶课程第7讲:Vehicle Lateral Control
- 搭建微信令牌中控服务器,使用ThinkJs搭建微信中控服务的实现方法
- plsql能连mysql吗_面试官:能给我讲讲用代码实现MySQL的读写分离的思路吗?
- python中lower()函数的用法
- Speaker Recognition: Feature Extraction
- CAS3.5.x(x1)支持OAuth2 server
- 网络编程(三):网络中的端口号
- 《觉醒年代》掀观剧热潮,年轻人为什么爱看主旋律了?
- 图文详解,浪涌保护器(SPD)的参数解读与选用
- CFA一级学习笔记--衍生品(二)--定价与估值
- Flutter高仿微信-第57篇-添加好友
- 图书管理系统(归还书籍)