图片和颜色

tint属性

tint属性一个颜色值,可以对图片做颜色渲染,我们可以给view的背景设置tint色值,给ImageView的图片设置tint色值,也可以给任意Drawable或者NinePatchDrawable设置tint色值。

在应用的主题中也可以通过设置 android:tint 来给主题设置统一的颜色渲染。

tint的渲染模式有总共有16种,xml文件中可以使用6种,代码中我们可以设置16种,渲染模式决定了渲染颜色和原图颜色的取舍和合成规则:

  1. PorterDuff.Mode.CLEAR 所绘制不会提交到画布上。
  2. PorterDuff.Mode.SRC 显示上层绘制图片
  3. PorterDuff.Mode.DST 显示下层绘制图片
  4. PorterDuff.Mode.SRC_OVER 正常绘制显示,上下层绘制叠盖。
  5. PorterDuff.Mode.DST_OVER 上下层都显示。下层居上显示。
  6. PorterDuff.Mode.SRC_IN 取两层绘制交集。显示上层。
  7. PorterDuff.Mode.DST_IN 取两层绘制交集。显示下层。
  8. PorterDuff.Mode.SRC_OUT 取上层绘制非交集部分。
  9. PorterDuff.Mode.DST_OUT 取下层绘制非交集部分。
  10. PorterDuff.Mode.SRC_ATOP 取下层非交集部分与上层交集部分
  11. PorterDuff.Mode.DST_ATOP 取上层非交集部分与下层交集部分
  12. PorterDuff.Mode.XOR 取两层绘制非交集。两层绘制非交集。
  13. PorterDuff.Mode.DARKEN 上下层都显示。变暗
  14. PorterDuff.Mode.LIGHTEN 上下层都显示。变亮
  15. PorterDuff.Mode.MULTIPLY 取两层绘制交集
  16. PorterDuff.Mode.SCREEN 上下层都显示。

通过tint色处理的图片会原图显示出不一样的颜色,我们可以通过这种方式利用一张图片做出图片选择器的效果,让控件在按压状态下显示另外一种颜色:

通过给图片设置tint色生成另外一种图片
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/ring"
android:tintMode="multiply"
android:tint="#5677fc" />
利用新的图片生成图片选择器
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tint_bitmap" android:state_pressed="true"/>
<item android:drawable="@drawable/ring" />
</selector>

Palette调色版

Palette调色板,可以很方便的让我们从图片中提取颜色。并且可以指定提取某种类型的颜色。

  1. Vibrant 鲜艳的
  2. Vibrant dark鲜艳的暗色
  3. Vibrant light鲜艳的亮色
  4. Muted 柔和的
  5. Muted dark柔和的暗色
  6. Muted light柔和的亮色

对图片取色是一个比较消耗性能的操作,其内部会对图片的像素值进来遍历以分析对比,所以我们要在异步线程中去完成。

如果操作本来就属于后台线程,可以使用:
Palette p = Palette.generate(Bitmap bitmap);
如果在主线程中,我们可以使用异步的方式:
Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
public void onGenerated(Palette palette) {  }
});

当操作完成后或者异步回调后,我们就可以使用以下方式来获取对应的色值了,并且可以在没有获取到的情况下之指定默认值:

p.getVibrantColor(int defaultColor);
p.getDarkVibrantColor(int defaultColor);
p.getLightVibrantColor(int defaultColor);
p.getMutedColor(int defaultColor);
p.getDarkMutedColor(int defaultColor);
p.getLightMutedColor(int defaultColor);

在使用palette之前,bitmap提供获取指定位置的像素值:

bitmap.getPixel(x,y)

但是该方式只能获取某一点的像素值,palette是对整个bitmap的所有像素值进行分析,并选出几个像素占比比较多的像素值,这样选择出来的色值更符合图片的整体色值。

vector矢量图

矢量图也称为面向对象的图像或绘图图像,是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示图像。矢量图形最大的优点是无论放大、缩小或旋转等不会失真;最大的缺点是难以表现色彩层次丰富的逼真图像效果。

Android L开始支持矢量图,我们可以用它来处理一些图形简单的icon,方便我们的适配。

Android L中对矢量图的支持是通过xml文件构建,通过矢量图的path描述来生成一个矢量图,对应的java对象为VectorDrawable。

下面是官方文档提供的一个矢量图,利用改文件,我们可以创建一个随意放大缩小都不会失真的心形

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="300dp"
android:width="300dp"
android:viewportHeight="40"
android:viewportWidth="40">
<path android:fillColor="#ff00ff"
android:pathData="M20.5,9.5
c-1.955,0,-3.83,1.268,-4.5,3
c-0.67,-1.732,-2.547,-3,-4.5,-3
C8.957,9.5,7,11.432,7,14
c0,3.53,3.793,6.257,9,11.5
c5.207,-5.242,9,-7.97,9,-11.5
C25,11.432,23.043,9.5,20.5,9.5z"/>
</vector>

矢量图的pathData数据就是用来描述矢量图的数学公式,其含义如下表:

命令类型 使用描述 代表含义 举例说明
移动指令 M x,y M移动绝对位置 M 100,240
移动指令 m x,y m移动相对于上一个点 m 100,240
绘制指令 L 或 l 从当前点绘制直线到指定点 L 100,100
绘制指令 H 或 h 水平直线 h 100
绘制指令 V 或 v 垂直直线 v 100
绘制指令 C 或 c 三次方程式贝塞尔曲线 C 100,200 200,400 300,200
绘制指令 Q 或 q 二次方程式贝塞尔曲线 Q 100,200 300,200
绘制指令 S 或 s 平滑三次方程式贝塞尔曲线 S 100,200 200,400 300,200
绘制指令 T 或 t 平滑二次方程式贝塞尔曲线 T 100,200 300,200
绘制指令 A 或 a 椭圆 A 5,5 0 0 1 10,10
关闭指令 Z 或 z 将图形的首、尾点用直线连接 Z
填充规则 F0 EvenOdd 填充规则  
填充规则 F1 Nonzero 填充规则  

通过path命令来进行简单的图形还是可行的,但是复杂的图形我们就需要借助工具来生成了,比如使用 Expression Design,就可以直接粘贴来自其它软件的矢量图形,然后选择导出,导出时做如后选择:文件->导出->导出属性->格式->XAML Silverlight 画布,即可得到XAML格式的矢量图形,也就是Path。

更多矢量图学习可参考:http://www.w3.org/TR/SVG11/paths.html#

Android5.0新特性——图片和颜色(drawable)的更多相关文章

  1. Android5.0新特性之——按钮点击效果动画(涟漪效果)

    Android5.0 Material Design设计的动画效果 RippleDrawable涟漪效果 涟漪效果是Android5.0以后的新特性.为了兼容性,建议新建drawable-v21文件夹 ...

  2. Android5.0新特性-Material Design

    概述 2014年,Google携Android5.X重装归来.全新的UI设计和更加优化的性能,令开发人员眼前一亮 安装和配置Android5.0开发环境 开发Android还得靠AS.下载地址 htt ...

  3. Android5.0新特性——兼容性(support)

    兼容性 虽然Material Design新增了许多新特性,但是并不是所有新内容对对下保持了兼容. 使用v7包 v7 support libraries r21 及更高版本包含了以下Material ...

  4. Android5.0新特性:RecyclerView实现上拉加载更多

    RecyclerView是Android5.0以后推出的新控件,相比于ListView可定制性更大,大有取代ListView之势.下面这篇博客主要来实现RecyclerView的上拉加载更多功能. 基 ...

  5. Android5.0新特性——全新的动画(animation)

    全新的动画 在Material Design设计中,为用户与app交互反馈他们的动作行为和提供了视觉上的连贯性.Material主题为控件和Activity的过渡提供了一些默认的动画,在android ...

  6. Android5.0新特性

    1.Activity转场动画 首先,把之前启动Activity的代码改成下面的写法: (如果低版本需要加注解@RequiresApi(api = Build.VERSION_CODES.LOLLIPO ...

  7. Android5.0新特性——新增的Widget(Widget)

    新增的Widget RecyclerView RecyclerView是ListView的升级版,它具备了更好的性能,且更容易使用.和ListView一样,RecyclerView是用来显示大量数据的 ...

  8. Android5.0新特性——阴影和剪裁(shadow)

    阴影和剪裁 View的z属性 Material Design建议为了凸显布局的层次,建议使用阴影效果,并且Android L为了简化大家的工作,对View进行了扩展,能使大家非常方便的创建阴影效果: ...

  9. Kotlin实例----android5.0新特性之palette

    一.Palette的使用 使用Palette可以让我们从一张图片中拾取颜色,将拾取到的颜色赋予ActionBar,StatusBar以及UI背景色可以让界面色调实现统一或者加载不同图片时同步变化色调 ...

随机推荐

  1. ODAC (V9.5.15) 学习笔记(二十)大数据量获取处理

    ODAC获取数据的效率比较高,在Web程序中希望能够更快获取第一页的数据时,可以有几种方式: 1.在数据库中进行分页处理: 2.获取所有数据,只是快速返回第一页数据. 第一种方案对应用服务器资源消耗最 ...

  2. MemCached用法

    所需要的jar包: com.danga.MemCached.MemCachedClient com.danga.MemCached.SockIOPool 自行下载/** * 缓存服务器集群,提供缓存连 ...

  3. K3 WISE开发手册

    1.VB插件工程的命名.命名空间和生成的DLL命名要一致,否则导致注册不成功!

  4. 实例演示 kino.razor (前端 Javascript 模板工具,Razor 风格)的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  5. (转)offsetof与container_of宏[总结]

    1.前言 今天在看代码时,遇到offsetof和container_of两个宏,觉得很有意思,功能很强大.offsetof是用来判断结构体中成员的偏移位置,container_of宏用来根据成员的地址 ...

  6. HMM 自学教程(四)隐马尔科夫模型

    本系列文章摘自 52nlp(我爱自然语言处理: http://www.52nlp.cn/),原文链接在 HMM 学习最佳范例,这是针对 国外网站上一个 HMM 教程 的翻译,作者功底很深,翻译得很精彩 ...

  7. js-变量

    一.变量的类型  Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量.例如: ...

  8. 2013/11/22工作随笔-缓存是放在Model层还是放在Controller层

    web网站的典型代码框架就是MVC架构,Model层负责数据获取,Controller层负责逻辑控制,View层则负责展示. 一般数据获取是去mysql中获取数据 但是这里有个问题,我们不会每次请求都 ...

  9. 说说jsonp

    什么是jsonp jsonp充其量只能说是一种"方法".它可以让页面从其他域中获取资料.   首先要知道的是同源策略,在javascript中使用http请求(ajax)是会受到同 ...

  10. 数论 - 欧拉函数模板题 --- poj 2407 : Relatives

    Relatives Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11372   Accepted: 5544 Descri ...