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 资源文件


<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

这里解释一下这几个属性; 
android:width=”600dp” 实际显示的宽度为600dp 
android:height=”600dp” 实际显示的高度为600dp 
android:viewportHeight=”512” 矢量限定的宽度为512,这没有单位; 
android:viewportWidth=”512” 矢量限定的高度为512 
其实以上两个属性,就是我们 svg 图片的宽高 
Android使用 SVG 资源文件(一)_第3张图片

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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

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

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

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