Android 使用Vector XML文件创建矢量图片资源

转载请注明出处:http://blog.csdn.net/klxh2009/article/details/51121034 本文出自【付小华的博客】


Vector:矢量的意思

我们知道,在安卓开发过程中,经常使用到png格式的图片资源,这种图片需要有不同分辨率来做屏幕适配,当图片数量很大时,被打包的图片资源占据了app的绝大部分容量,使用Vector来创建图片,将大大减少png图片的使用,提高开发性能。废话不多说,可以先看下效果:

Android 使用Vector XML文件创建矢量图片资源_第1张图片

这就是一个矢量图,下面我来讲讲怎么来实现它吧:

所需工具:

1、阿里巴巴矢量图库(http://www.iconfont.cn/)

2、GIMP(GNU Image Manipulation Program)

其中,GIMP我提供了两种下载方式:

官网:http://www.gimp.org/

百度网盘:http://pan.baidu.com/s/1sl9VnRZ

3、Android Studio


实现步骤:

1、从阿里巴巴矢量图库下载需要的svg矢量图

Android 使用Vector XML文件创建矢量图片资源_第2张图片

(注意这里的尺寸)

2、使用已经安装好了的GIMP打开下载的这个矢量图

Android 使用Vector XML文件创建矢量图片资源_第3张图片

3、选择Tool Options下的魔棒点击刚刚打开的五角星

Android 使用Vector XML文件创建矢量图片资源_第4张图片

Android 使用Vector XML文件创建矢量图片资源_第5张图片

(这是选中之后的效果,出现蚂蚁线,,,会PS的同学应该对这个很明白的)

4、然后再按图示操作:选择【Select】-->【To Path】,就可以看到右边的Brushes窗口下的Paths选项里多了个路径。

Android 使用Vector XML文件创建矢量图片资源_第6张图片

Android 使用Vector XML文件创建矢量图片资源_第7张图片

5、导出路径

Android 使用Vector XML文件创建矢量图片资源_第8张图片

导出时选择自己需要导出到的路劲,输入文件名,建议导出使用xml格式的文件,我这里为“star.xml”,然后点击save


6、打开star.xml文件,可以看到好多数字,在path节点下的d里,这里的值就是我们需要的

Android 使用Vector XML文件创建矢量图片资源_第9张图片


7、我们使用Android Studio来写代码,在drawable目录下新建一个star_path.xml文件,内容如下:

其中需要注意这里的viewportHeight和viewportWidth值,设置太小就不能看到它的预览图了




        


8、最后在布局文件里使用:




    

    

目录结构:

Android 使用Vector XML文件创建矢量图片资源_第10张图片

OK,就是如此简单。


你可能感兴趣的:(Android,开发)