使用SVG图片格式

来源:互联网 发布:vultr修改默认端口 编辑:程序博客网 时间:2024/06/05 20:52

SVG格式, 适应屏幕, 图片较小, 还有很多优点, 参考. 本文讲解如何使用SVG格式.

SVG: Scalable Vector Graphics, 可缩放矢量图形. 
IRI: Internationalized Resource Identifiers, 国际化资源标识符.

下载SVG格式的图片.

新建项目, 空白项目显示图片.

Android Studio 2.0 
路径: File -> New -> Vector Asset -> Local SVG file

加载

勾选重置图片大小左右布局适配.

drawable文件夹中, 就会发现.xml格式的图片.

代码中导入图片.

<code class="hljs perl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <ImageView        android:layout_width=<span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>        android:layout_height=<span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>        android:contentDescription=<span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(0, 136, 0); box-sizing: border-box;">"<span class="hljs-variable" style="margin: 0px; padding: 0px; color: rgb(102, 0, 102); box-sizing: border-box;">@null</span>"</span>        android:src=<span class="hljs-string" style="margin: 0px; padding: 0px; color: rgb(0, 136, 0); box-sizing: border-box;">"<span class="hljs-variable" style="margin: 0px; padding: 0px; color: rgb(102, 0, 102); box-sizing: border-box;">@drawable</span>/homer_simpson"</span>/></code><ul class="pre-numbering" style="margin: 0px; padding: 6px 0px 40px; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">1</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">2</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">3</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">4</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">5</li></ul><ul class="pre-numbering" style="margin: 0px; padding: 6px 0px 40px; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">1</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">2</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">3</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">4</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">5</li></ul>

显示 
显示

如果是非AS2.0版本, 我们可以使用在线网站转换. 
网址: http://inloop.github.io/svg2android/

上传SVG图片, 生成代码. 
Online

勾选删除空组添加变换.

可以下载在线图片, 也可以在drawable文件夹中, 创建.xml文件, 粘贴代码. 
使用方式与自动生成的类似, 直接添加即可.

通过观察发现, 均是500x500的图片: 
自动生成的SVG图片是20KB, 在线生成的SVG图片是29KB. 
而PNG(放大的系统图片)要732KB, 由此得知SVG图片还是非常节省内存的. 
对于一些较大的App, 使用SVG图片有很大的吸引力.

Github下载地址

OK, Enjoy It.

0 0
原创粉丝点击