黑马程序员技术交流社区

标题: 【济南中心】Android显示矢量图(一) [打印本页]

作者: 大山哥哥    时间: 2016-11-30 22:49
标题: 【济南中心】Android显示矢量图(一)

Android 5.0之后支持矢量图资源。这样可以大大减少资源文件的数量和app的大小。下面我们就来学习一下如何显示矢量图。
首先,在drawable文件夹下创建一个VectorDrawable的xml文件,定义出上图的矢量图,根节点是<vector>
[AppleScript] 纯文本查看 复制代码
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="163dp"
    android:height="154dp"
    android:viewportWidth="163"
    android:viewportHeight="154">
    <path
        android:fillColor="#00C"
        android:pathData="M66.8,77 a14.7,14.7 0 0,1 29.4,0 a14.7,14.7 0 0,1 -29.4,0z"/>
    <path
        android:fillColor="#00C"
        android:pathData="M81.5,3c-11.2,0-19.2,9.1-19.2,20.3c0,8.3,6.7,15.4,13,18.6c-0.9-1.3-1.4-2.8-1.4-4.4c0-4.2,3.4-7.6,7.6-7.6
                c4.2,0,7.6,3.4,7.6,7.6c0,1.8-0.6,3.5-1.7,4.8c6.8-2.9,13.3-10.3,13.3-19C100.7,12.1,92.7,3,81.5,3z"/>
    <path
        android:fillColor="#00C"
        android:pathData="M29.2,24.7c-7.9,7.9-7.1,20,0.8,28c5.9,5.9,15.7,6.2,22.3,4c-1.5-0.3-3-1-4.2-2.1c-3-3-3-7.8,0-10.8
                c3-3,7.8-3,10.8,0c1.3,1.3,2,2.9,2.2,4.6c2.7-6.9,2.1-16.7-4-22.8C49.2,17.5,37.1,16.7,29.2,24.7z"/>
    <path
        android:fillColor="#00C"
        android:pathData="M7.5,77c0,11.2,9.1,19.2,20.3,19.2c8.3,0,15.4-6.7,18.6-13c-1.3,0.9-2.8,1.4-4.4,1.4c-4.2,0-7.6-3.4-7.6-7.6
                c0-4.2,3.4-7.6,7.6-7.6c1.8,0,3.5,0.6,4.8,1.7c-2.9-6.8-10.3-13.3-19-13.3C16.6,57.8,7.5,65.8,7.5,77z"/>
    <path
        android:fillColor="#00C"
        android:pathData="M29.2,129.3c7.9,7.9,20,7.1,28-0.8c5.9-5.9,6.2-15.7,4-22.3c-0.3,1.5-1,3-2.1,4.2c-3,3-7.8,3-10.8,0
                c-3-3-3-7.8,0-10.8c1.3-1.3,2.9-2,4.6-2.2c-6.9-2.7-16.7-2.1-22.8,4C22,109.3,21.2,121.4,29.2,129.3z"/>
    <path
        android:fillColor="#00C"
        android:pathData="M81.5,151c11.2,0,19.2-9.1,19.2-20.3c0-8.3-6.7-15.4-13-18.6c0.9,1.3,1.4,2.8,1.4,4.4c0,4.2-3.4,7.6-7.6,7.6
                c-4.2,0-7.6-3.4-7.6-7.6c0-1.8,0.6-3.5,1.7-4.8c-6.8,2.9-13.3,10.3-13.3,19C62.3,141.9,70.3,151,81.5,151z"/>
    <path
        android:fillColor="#00C"
        android:pathData="M133.8,129.3c7.9-7.9,7.1-20-0.8-28c-5.9-5.9-15.7-6.2-22.3-4c1.5,0.3,3,1,4.2,2.1c3,3,3,7.8,0,10.8
                s-7.8,3-10.8,0c-1.3-1.3-2-2.9-2.2-4.6c-2.7,6.9-2.1,16.7,4,22.8C113.8,136.5,125.9,137.3,133.8,129.3z"/>
    <path
        android:fillColor="#00C"
        android:pathData="M155.5,77c0-11.2-9.1-19.2-20.3-19.2c-8.3,0-15.4,6.7-18.6,13c1.3-0.9,2.8-1.4,4.4-1.4c4.2,0,7.6,3.4,7.6,7.6
                c0,4.2-3.4,7.6-7.6,7.6c-1.8,0-3.5-0.6-4.8-1.7c2.9,6.8,10.3,13.3,19,13.3C146.4,96.2,155.5,88.2,155.5,77z"/>
    <path
        android:fillColor="#00C"
        android:pathData="M133.8,24.7c-7.9-7.9-20-7.1-28,0.8c-5.9,5.9-6.2,15.7-4,22.3c0.3-1.5,1-3,2.1-4.2c3-3,7.8-3,10.8,0
                c3,3,3,7.8,0,10.8c-1.3,1.3-2.9,2-4.6,2.2c6.9,2.7,16.7,2.1,22.8-4C141,44.7,141.8,32.6,133.8,24.7z"/>
</vector>

然后将这个VectorDrawable设置给一个ImageView,来显示出来:
[AppleScript] 纯文本查看 复制代码
 ImageView imageView = (ImageView) findViewById(R.id.image_static);
        imageView.setImageResource(R.drawable.svg_converted);

矢量图呢,就这么容易的显示出来了。 下一篇,再给大家分享一下矢量图的动画。敬请期待。




作者: 橘子哥    时间: 2016-12-1 09:42
虽然看不懂,但是我仍然感觉好厉害!
作者: cat73    时间: 2016-12-22 21:15
前排占座留名 0.0
作者: baby14    时间: 2019-7-2 10:38
多谢分享




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2