位图转化为矢量图

前言: 上一篇文章BottomNavigationView+ViewPager实现底部导航栏 中的底部菜单项使用的图片是矢量图,AndroidStudio本身带了一些矢量图,但是有时候并不符合我们的需求。所以我们需要自己画矢量图,但是简单的矢量图还可以,path少pathData数据简单,稍微复杂一些的图就不那么容易弄了。我们希望把UI给的位图使用工具转化为矢量图,这样就简单多了。下面我演示一下把png图片转化为矢量图。

第一步:逆向思维——首先要思考当有矢量图图后,怎么导入工程的drawable文件夹下, 右键drawable文件夹——>new——>Vertor Assert,然后呈现你眼前的如下:
位图转化为矢量图_第1张图片

Asset Type默认选中Material Icon选项,这个选项表示使用AndroidStudio自带的矢量图;Name就是矢量图的名称;点击图中Icon的小安卓图标,可以进入矢量图库进行选择;Size是矢量图的尺寸,默认是24dp*24dp,勾选Override选项以后,可以自己设置大小;Opacity是图标的不透明度; 最后一行的那个选项,设置图片是否需要镜像反转,当布局方向是RTL(不了解的可以百度一下),即从右到左布局时才有用。一般不勾选这个选项。
位图转化为矢量图_第2张图片

Asset Type勾选Local file表示使用本地导入的矢量图,括号已经注明,只能是SVG和PSD格式的文件,到这里,我们目标其实已经很明确了,只要把位图转化成SVG或者PSD格式的文件就可以了。

第二步:位图转化为SVG, 用png转化为SVG格式文件,需要下载一个工具——VectorMagic,我这里是下载了一个中文破解版的,当然也可以下载其他网站的VectorMagic,只要能用就可以;使用VectorMagic工具的步骤如下:
位图转化为矢量图_第3张图片位图转化为矢量图_第4张图片位图转化为矢量图_第5张图片位图转化为矢量图_第6张图片

上面四步没有复杂的操作,第四步需注意,另存为时,文件格式为svg格式。 我是message_normal.png图片做处理的,处理后生成一个message_normal.svg文件
位图转化为矢量图_第7张图片

第三步:将svg文件导入AndroidStudio中 如第一步中的图2所示,选择本地的文件,找到message_normal.svg,点击next,接下来的一个页面不用做任何处理,直接点击Finish就可以了,然后就会在drawable文件夹下生成一个ic_message_normal.xml的文件,打开文件就可以在androidstudio的Preview中看到效果。

Ok,到这里,文章就结束了,有不对的地方欢迎指正。

你可能感兴趣的:(2016-android总结)