Android使用 SVG 资源文件(一)

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

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

Android使用 SVG 资源文件(一)_第2张图片

我们所要的就是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 资源文件

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="600dp" android:height="600dp" android:viewportHeight="512" android:viewportWidth="512">

    <path android:fillColor="#410a0a0a" android:pathData="@string/pretty_girl"/>

</vector>

这里解释一下这几个属性;
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 资源

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView  android:id="@+id/id_img" android:layout_centerInParent="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/pretty_girl"/>

</RelativeLayout>

运行之后效果图如下:
Android使用 SVG 资源文件(一)_第3张图片

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

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

你可能感兴趣的:(Android使用 SVG 资源文件(一))