背景
前段时间,在进行项目开发的时候,UI给了一个银行卡相关的列表,每个item都是渐变效果,直接使用背景图片,直接导致的是包增加近2M。
列表示例( >20个)简单做法:服务器返回对象银行卡item,包含其图片就行了;
但在这个项目中,放在了客户端进行了判断,为什么要放在客户端呢,就不说了。。。。。
于是乎,研究了下Palette ,给itemView生成背景颜色,包括圆角,渐变.
了解
需求:根据银行图标为其对应item添加渐变圆角背景
通过对Palette的简单了解,做了一个Demo和封装了一个Util进行方便开发。效果背景图示例:
Demo效果附上参考资料:Palette状态栏颜色提取
截图演示
&
Demo截图
Palette 探索
Gradle 添加依赖 :
版本自己控制,这里是我当前的版本!
compile 'com.android.support:palette-v7:23.4.0'
简单异步回调使用及其解释 :
Palette回调颜色方法
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() { @Override public void onGenerated(Palette palette) { Palette.Swatch a = palette.getVibrantSwatch(); Palette.Swatch b=palette.getLightVibrantSwatch(); Palette.Swatch c = palette.getDarkVibrantSwatch(); Palette.Swatch d = palette.getMutedSwatch(); Palette.Swatch e = palette.getLightMutedSwatch(); Palette.Swatch f = palette.getDarkMutedSwatch(); f.getRgb(); f.getTitleTextColor(); f.getHsl(); f.getBodyTextColor(); }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
简单总结
Palette的回调颜色中,其中 获得活力颜色(getVibrantSwatch()),是全部都可以返回值的,而其他的颜色对象,可能会返回null 。其次,还有获得亮活力颜色(getLightVibrantSwatch)返回null的几率小于其它返回的颜色,当然除了上面说的活力颜色。
实践
重申:根据银行图片返回对应item的圆角,渐变背景
分析 :
Android 上对view的背景颜色的设置圆角,渐变,可以通过Shape文件实现,比如:
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF" android:angle="135" android:type="linear" android:gradientRadius="8dp" /> <corners android:radius="5dp" /></shape>
而在代码中可以通过Drawable的子类 - GradientDrawable 来创建Drawable对象,后通过view.setBackgroundDrawable()或view.setBackground()来实现。
思路:
- 根据图标生成Bitmap对象
- 使用Palette,根据Bitmap获取活力颜色与亮活力颜色
- 创建GradientDrawable对象,设置圆角,根据上面的颜色值,设置渐变,并返回Drawable对象
- 通过setBackground添加给view
实现:
(1)获取Bitmap对象
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.icon_one);
(2)获取颜色值
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() { @Override public void onGenerated(Palette palette) { Palette.Swatch a = palette.getVibrantSwatch(); Palette.Swatch b=palette.getLightVibrantSwatch();}}
(3)生成Drawable对象
/** * 创建Drawable对象 * @param RGBValues * @param two * @return */ private Drawable changedImageViewShape(int RGBValues,int two){ GradientDrawable shape = new GradientDrawable(GradientDrawable.Orientation.TL_BR ,new int[]{RGBValues,two}); shape.setShape(GradientDrawable.RECTANGLE); shape.setGradientType(GradientDrawable.LINEAR_GRADIENT); shape.setCornerRadius(8); return shape; }
(4)设置给View - 示例 textview
tv.setBackgroundDrawable(changedImageViewShape(a.getRgb(),b.getRgb())) tv.setTextColor(a.getTitleTextColor())
分享
PaletteUtil工具类分享
import android.content.res.Resources;import android.graphics.Bitmap;import android.graphics.BitmapFactory;import android.graphics.Color;import android.graphics.drawable.Drawable;import android.graphics.drawable.GradientDrawable;import android.support.v7.graphics.Palette;/** * Created by yuan on 2016/8/28. * 获取图片背景色 */public class PaletteUtil implements Palette.PaletteAsyncListener{ private static PaletteUtil instance; private PatternCallBack patternCallBack; public static PaletteUtil getInstance(){ if(instance==null){ instance=new PaletteUtil(); } return instance; } public synchronized void init(Bitmap bitmap,PatternCallBack patternCallBack){ Palette.from(bitmap).generate(this); this.patternCallBack=patternCallBack; } public synchronized void init(Resources resources, int resourceId,PatternCallBack patternCallBack){ Bitmap bitmap = BitmapFactory.decodeResource(resources,resourceId); Palette.from(bitmap).generate(this); this.patternCallBack=patternCallBack; } @Override public synchronized void onGenerated(Palette palette) { Palette.Swatch a = palette.getVibrantSwatch(); Palette.Swatch b=palette.getLightVibrantSwatch(); int colorEasy=0; if(b!=null){ colorEasy=b.getRgb(); } patternCallBack.onCallBack(changedImageViewShape(a.getRgb(),colorEasy) ,a.getTitleTextColor()); } /** * 创建Drawable对象 * @param RGBValues * @param two * @return */ private Drawable changedImageViewShape(int RGBValues, int two){ if(two==0){ two=colorEasy(RGBValues); }else { two = colorBurn(two); } GradientDrawable shape = new GradientDrawable(GradientDrawable.Orientation.TL_BR ,new int[]{RGBValues,two}); shape.setShape(GradientDrawable.RECTANGLE); shape.setGradientType(GradientDrawable.LINEAR_GRADIENT); shape.setCornerRadius(8); return shape; } /** * 颜色变浅处理 * @param RGBValues * @return */ private int colorEasy(int RGBValues) { int red = RGBValues >> 16 & 0xff; int green = RGBValues >> 8 & 0xff; int blue = RGBValues & 0xff; if(red==0){ red=10; } if(green==0){ green=10; } if(blue==0){ blue=10; } red = (int) Math.floor(red * (1 + 0.1)); green = (int) Math.floor(green * (1 + 0.1)); blue = (int) Math.floor(blue * (1 + 0.1)); return Color.rgb(red, green, blue); } /** * 颜色加深处理 * @param RGBValues * @return */ private int colorBurn(int RGBValues) { int red = RGBValues >> 16 & 0xff; int green = RGBValues >> 8 & 0xff; int blue = RGBValues & 0xff; red = (int) Math.floor(red * (1 - 0.1)); green = (int) Math.floor(green * (1 - 0.1)); blue = (int) Math.floor(blue * (1 - 0.1)); return Color.rgb(red, green, blue); } public interface PatternCallBack{ void onCallBack(Drawable drawable,int titleColor); }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
使用方法 :
(1) init(Resource res,int resId,callback) 方式
PaletteUtil.getInstance() .init(getResources() ,R.mipmap.icon_one ,new PaletteUtil.PatternCallBack() { @Override public void onCallBack(Drawable drawable, int titleColor) { tv.setTextColor(titleColor); tv.setBackgroundDrawable(drawable); } });
(2) init(bitmap,callback) 方式
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.icon_one); PaletteUtil.getInstance().init(bitmap, new PaletteUtil.PatternCallBack() { @Override public void onCallBack(Drawable drawable, int titleColor) { } });
Last
GitHub 地址:https://github.com/LABELNET/PaletteColorDemo