android 代码中使用矢量图,在 Android 中使用 SVG 矢量图

本文为菜鸟窝作者 吴威龙 的连载

菜鸟窝是专业的程序猿在线学习平台,提供最系统的 Android 项目实战课程

如需转载,请联系菜鸟窝公众号(cniao5),并注明出处。

[toc]

前言:

SVG 格式图片很多优点,但是 android 程序员关心的优点无非是:SVG 较 GIF、JPEG 的优势。

首先简要解释一下矢量图像格式和位图图像格式的区别。矢量图像用点和线来描述物体,所以文件会比较小,同时也能提供高清晰的画面,适合于直接打印或输出。而位图图像的存储单位是图像上每一点的像素值,因此一般的图像文件都很大,会占用大量的网络带宽。SVG 是一种矢量图形格式,GIF、JPEG 是位图图像格式。有了两者的概念后,SVG 较 GIF、JPEG 的优势显而易见。

任意放缩:

用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。

文本独立:

SVG 图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。也不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。

较小文件:

总体来讲,SVG 文件比那些 GIF 和 JPEG 格式的文件要小很多,因而下载也很快。

超强显示效果:

SVG 图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨力和打印分辨力。

超级颜色控制:

SVG 图像提供一个 1 600 万种颜色的调色板,支持 ICC 颜色描述文件标准、RGB、线性填充、渐变和蒙版。

如何使用

这里推荐一个图标网站:阿里巴巴矢量图标库

搜索找到需要的图片,选择 svg 下载

b8f4bcb046b0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

这里写图片描述

下载好的文件是这样的:

b8f4bcb046b0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

这里写图片描述

把这个文件导入 AS 中,即可使用

b8f4bcb046b0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

这里写图片描述

b8f4bcb046b0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

这里写图片描述

注意导入后的 SVG 文件,和导入前是不一样的。

b8f4bcb046b0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

这里写图片描述

这样就可以和之前引用 jpg、png 图片那样使用 svg 矢量图了。

下面介绍一种炫酷的绘制动画效果。

SVG 绘制动画

demo 演示:

b8f4bcb046b0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

这里写图片描述

b8f4bcb046b0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

这里写图片描述

使用的第三方库

//svg函数库

compile 'com.jrummyapps:animated-svg-view:1.0.1'

compile 'com.android.support:animated-vector-drawable:${latest_version}'

具体实现过程请看源码:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值