矢量资源工具Vector_Asset_Studio

2018-10-28 11:14:29

 

Android Studio有一个称为“Vector Asset Studio”的工具,

它可以将SVG文件和PSD文件转化为工程可用的矢量可绘制资源(vector drawable resources),

使用矢量资源的好处是:

1、比图片资源要轻巧,编译出来的APK体积更小

2、可以自动适应不同尺寸和分辨率的屏幕

 

 

Android 5.0之后新增加了一个VectorDrawable类,用于定义矢量资源,但是必须要求5.0及更高版本才可以使用。

但是使用“Vector Asset Studio”这个工具,则不会受到低版本系统的影响!

这是因为“Vector Asset Studio”会在构建APK的时候将矢量资源转化为不同density的图片资源!~

 

以下说说使用方法:

在Android Studio中,依次点击“File”--“New”--“Vector Assets”,即可打开“Vector Asset Studio”工具,如下:

【Android】矢量资源工具Vector_Asset_Studio

在上面的界面中,

Asset Type--表示资源来源,有两种:Material Icon 和 Local File(SVG,PSD),分别是内置资源和其它本地资源

Name---表示文件名称,即drawable名称

Icon-----表示可选内置图标,点击可更改

Size-----表示图标大小

Opacity-表示图片不透明度

 

下面是内置的图标界面:


【Android】矢量资源工具Vector_Asset_Studio

 

下面是从本地导入一个SVG文件的效果:


【Android】矢量资源工具Vector_Asset_Studio

点击“Next”之后,将会提示你选择资源存放路径~~

 

【Android】矢量资源工具Vector_Asset_Studio

点击Finish即自动生成矢量资源,如下图所示:


【Android】矢量资源工具Vector_Asset_Studio

矢量资源是一个xml文件,里面描述了图形效果~~

 

至于这个矢量资源怎么用嘛,其实很简单,就把它当作成普通的drawable来引用就可以了~

Android Studion在构建的时候会将它转化为图片资源的

 

 【Android】矢量资源工具Vector_Asset_Studio

如果需要更改矢量资源的颜色,其实也很简单,一行代码就搞定了

【Android】矢量资源工具Vector_Asset_Studio

 

 

另:

附SVG资源下载地址:http://www.iconsvg.com/

还有这个:http://www.iconthink.com/

这个是阿里巴巴的:http://www.iconfont.cn/plus

 

 

Android5.0之后可直接支持矢量资源,不需要在构建的时候转化为图形资源,如果使用VectorDrawableCompat兼容包,可以让Android3.0以上的系统都支持。但是这有个不好之处。矢量资源加载的时候需要消费更多的CPU资源,毕竟,内存和性能不可兼得。官方建议不要超过200dp * 200dp ,否则的话会需要长时间执行绘制,特别是矢量动画。


  • 2017-07-05 09:48:51

    CSS 元素垂直居中的 6种方法

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。本文收集了六种利用css进行元素的垂直居中的方法,每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。

  • 2017-07-06 10:02:18

    大白话讲解Promise(一)

    去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范。作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念与使用方法。

  • 2017-07-11 21:54:14

    MYSQL5.7版本sql_mode=only_full_group_by问题

    一旦开启 only_full_group_by ,感觉,group by 将变成和 distinct 一样,只能获取受到其影响的字段信息,无法和其他未受其影响的字段共存,这样,group by 的功能将变得十分狭窄了

  • 2017-07-14 13:51:58

    NodeJS连接MySQL出现Cannot enqueue Handshake after invoking quit.

    原因在于node连接上mysql后如果因网络原因丢失连接或者用户手工关闭连接后,原有的连接挂掉,需要重新连接;如下代码,每次访问结束都关闭,每次开始访问前重连接下,代码中没有监听连接的fatal错误,copy需谨慎

  • 2017-07-14 13:53:02

    nodejs解决mysql和连接池(pool)自动断开问题

    最近在做一个个人项目,数据库尝试使用了mongodb、sqlite和mysql。分享一下关于mysql的连接池用法。项目部署于appfog,项目中我使用连接池链接数据库,本地测试一切正常。上线以后,经过几次请求两个数据接口总是报503。一直不明就里,今天经过一番排查终于顺利解决了。