Android使用 SVG 资源文件（一）

来源：互联网发布：java hello world代码编辑：程序博客网时间：2024/05/21 14:45

这里就不介绍背景了，直接说说在 Android 中如何使用 SVG资源吧！
使用步骤：
1、SVG资源的源文件
要使用 SVG资源，我们首先得有 svg 资源，在哪里找呢，有很多工具能够生成 SVG资源，比如omnigraffle图形编辑器，我这里生成好了一张 SVG资源的图片
这里写图片描述

用浏览器打开之后可以看到它的代码

这里写图片描述

我们所要的就是path 之后的 svg 代码，把它拷贝到我们的代码中

M 6.783868 184 C 6.783868 184 7.349524 160.57912 14.131572 157.31086 C 19.783036 155.677 29.389906 150.7756 31.085964 149.68606 C 32.78275 148.59634 32.78093 143.14954 32.78093 143.69422 C 32.78093 144.23854 20.34669 156.22168 11.870586 156.22168 C 29.9572 140.971 27.130012 136.06888 27.130012 136.06888 C 27.130012 136.06888 12.434786 147.50698 9.04267 146.41762 C 24.302642 132.80062 26.565084 126.26464 26.565084 126.26464 C 26.565084 126.26464 7.349524 136.06888 0 132.25594 C 17.523324 127.35418 22.044022 88.13767 22.044022 88.13767 C 22.044022 88.13767 25.998882 52.18906 28.82607 45.6529 C 29.9572 39.66178 41.26122 -2.27822 91.564273 4.80244 C 141.86809 11.88328 134.52148 75.06544 134.52148 76.69959 C 134.52148 78.333574 135.65042 76.15482 135.65042 81.056866 C 135.65042 85.95886 133.3898 88.13767 133.3898 88.13767 C 133.3898 88.13767 135.65133 93.584493 135.65133 102.84378 C 133.955276 101.20983 133.3898 98.486374 132.259764 100.12038 C 131.69538 106.656376 130.0006 105.022426 126.6083 117.54976 C 126.041916 124.0861 133.955276 128.98804 136.78028 128.98804 C 131.12918 131.16676 140.1713 132.80062 140.1713 132.80062 C 140.1713 132.80062 159.38686 135.52402 166.17091 139.88164 C 172.95351 144.23908 181.43398 169.29364 181.99854 182.91064 C 182.56402 183.99982 6.783868 184 6.783868 184 Z
到这里我们的 svg 资源就已经准备就绪了，接下就是在代码中使用它

2、编写 vector drawable 资源文件

<code class="hljs xml 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;"><span class="hljs-pi" style="color: rgb(0, 102, 102); box-sizing: border-box;"><?xml version="1.0" encoding="utf-8"?></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">vector</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"600dp"</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"600dp"</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:viewportHeight</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"512"</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:viewportWidth</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"512"</span>></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">path</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:fillColor</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#410a0a0a"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:pathData</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@string/pretty_girl"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">vector</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; 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="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

这里解释一下这几个属性；
android:width=”600dp” 实际显示的宽度为600dp
android:height=”600dp” 实际显示的高度为600dp
android:viewportHeight=”512” 矢量限定的宽度为512，这没有单位；
android:viewportWidth=”512” 矢量限定的高度为512
其实以上两个属性，就是我们 svg 图片的宽高
这里写图片描述

android:pathData=”@string/pretty_girl”，即图片内容的path路径，path 中的值一般不会超过viewportHeight 和 viewportWidth的值，在这里就是不会超过512

3、运用，与其他 drawable 资源文件一样，直接设置 View 的背景或者 ImageView 的 src 资源

<code class="hljs xml 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;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">RelativeLayout</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"match_parent"</span>    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"match_parent"</span>></span>    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ImageView</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+id/id_img"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_centerInParent</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"true"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@drawable/pretty_girl"</span>/></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">RelativeLayout</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; 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="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>

运行之后效果图如下：
这里写图片描述

到这里算是大功告成！但是，这个效果只有 Android5.0及之后的版本才支持，所以，研究它没多大意义，就目前而言没多大意义！所以我就在想，能否让低版本的系统也能够支持 SVG矢量图呢？答案是肯定的。下一篇 Android使用 SVG 资源文件（二）会给大家讲解，如何在低版本中使用 SVG文件，如果对 SVG有兴趣的朋友可以继续关注。

这里就不贴代码了，因为只有在 Android5.0以上的系统中才能跑。

0 0