手把手教学, android 使用 SVG

简单介绍:

SVG在Web上的应用非常广泛,在Android 5.X之前的Android版本上,大家可以通过一些第三方开源库来在Android中使用SVG。而在Android 5.X之后,Android中添加了对SVG<path>标签支持。从而让开发者可以使用SVG来创建更加丰富的动画效果。

1.什么是svg

  • 可伸缩矢量图形
  • 定义用于网络的基于矢量的图形
  • 使用XML格式定义图形
  • 万维网联盟的标准
  • 与诸如DOM和XSL之类的W3C标准是一个整体
  • 图像在放大或改变尺寸的情况下其图形质量不会有所损失

针对最后一点说一下,可能大家对SVG没那么熟悉,那么拿一个大家熟悉的Bitmap来跟SVG作个比较。Bitmap通过在每个像素点上存储色彩信息来表达图像,而SVG是一个绘图标准。与Bitmap相比,SVG最大的优点就是放大不会是真。而且Bitmap需要为不同分辨率设计多套图标,而矢量图则不需要。

2.<path>标签

SVG可使用<path>标签来创建,为了提高大家兴趣,先看看使用效果图

Paste_Image.png

加入我想要上图左上角的那个箭头,就可以用<path>来画,再也不用网上找图片了。这里留个悬念,后面再说说怎么画。

简单介绍一下<path>标签,大家粗略地看一下就好:
M = moveto(M X,Y) :将画笔移动到指定的坐标位置
L = lineto(L X,Y) :画直线到指定的坐标位置
H = horizontal lineto(H X):画水平线到指定的X坐标位置
V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY):三次贝赛曲线
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY):二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射前面路径后的终点
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
Z = closepath():关闭路径

有几点要注意:

  • 坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下。
  • 所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系
  • 指令和数据间的空格可以省略
  • 同一指令出现多次可以只用一个

3.Android中使用SVG

Google在Android 5.X中提供了两个新API来帮助支持SVG:

  • VectorDrawable
  • AnimatedVectorDrawable

其中,VectorDrawable让你可以创建基于XML的SVG图形,并结合AnimatedVectorDrawable来实现动画效果。

首先来讲讲VectorDrawable的使用:
Android Studio中我们可以用独特的姿势创建SVG,如下图

Paste_Image.png

点击Vector Asset后可以看到:

Paste_Image.png

英文不好朋友我给大家翻译一下:
Local SVG file : 可以选择本地的SVG文件
Material Icon : 可以选择自带的SVG
Resource name : 当然就是xml文件的名字
Size : 图片大小
Override defalut size from Material Design : 勾选后替代默认的大小
Opactity : 透明度
Enable atuo mirroring for RTL layout : 用于镜像显示

我们可以在 Material Icon 下choose一个箭头

Paste_Image.png

然后自动生成xml文件

<vector 
     xmlns:android="http://schemas.android.com/apk/res/android"    
     android:width="24dp"    
     android:height="24dp"    
     android:viewportHeight="24.0"    
     android:viewportWidth="24.0">    
    <path        
        android:fillColor="#FFFFFF" 
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z" />
</vector>

在preview里面可以看到效果

Paste_Image.png

其中包含两组宽高属性,分别具有不同含义。widthheight表示该SVG图形的具体大小,而viewportHeightviewportWidth表示SVG图形划分比例。后面在绘制path时所使用的参数,就是根据这两个值来进行转换,比如上面的代码,将24dp划分为24份,如果在绘制图形时使用坐标(12,12),则意味着该坐标位于该SVG图形正中间。所以,如果widthheight的比例与viewportHeightviewportWidth的比例不一致,就会使图形发生压缩,形变。

<path>标签内我们看看:
pathData 就是绘制SVG图形所用到的指令。
fillColor 这个属性表明绘制出来的是一个填充的图形,我在这个属性里设了一个白色,如果想要绘制一个非填充的图形,可以使用 strokeColor

Paste_Image.png

然后我们只需在控件里使用这个xml文件就行了

<TextView
     android:layout_width="wrap_content"
     android:layout_height="match_parent"
     android:drawableLeft="@drawable/ic_arrow_back_black_24dp" />
再来说说AnimatedVectorDrawable

AnimatedVectorDrawable 的作用是给 VectorDrawable 提供动画效果。在XML文件中通过<animated-vector>标签来声明对 AnimatedVectorDrawable 的使用,并指定其作用的<path><group>

举个例子,线性动画:

我们先创建一个静态的 VectorDrawable ,取名为 line.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
   android:width="200dp"    
   android:height="200dp"    
   android:viewportHeight="100"    
   android:viewportWidth="100">
    <group>
    <!-- 如果指定属性为 pathData,
         则要添加一个属性 android:strokeLineCap="pathType", 
         来告诉系统进行pathData变换-->
        <path
            android:name="path1"
            android:pathData="
            M 20,80
            L 50,80 80,80"
            android:strokeColor="#000"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
        <path
            android:name="path2"
            android:pathData="
            M 20,20
            L 50,20 80,20"
            android:strokeColor="#000"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
    </group>
</vector>

在preview里面是这样子:

Paste_Image.png

在path1和path2分别绘制了两条直线,每条直线由三个点控制( M 20,80 L 50,80 80,80),( M 20,20 L 50,20 80,20),接下来创建两个 objectAnimator

<objectAnimator
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:interpolator="@android:anim/bounce_interpolator"
    android:propertyName="pathData"
    android:valueFrom="M 20,80 L 50,80 80,80"
    android:valueTo="M 20,80 L 50,50 80,50"
    android:valueTyoe="pathType"/>
<objectAnimator
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:interpolator="@android:anim/bounce_interpolator"
    android:propertyName="pathData"
    android:valueFrom="M 20,2 L 50,20 80,20"
    android:valueTo="M 20,80 L 50,50 80,50"
    android:valueType="pathType"/>

分别用来控制上面 VectorDrawable 里的 <path> 的位置(注意: objectAnimator 放在 res/animator 里)

最后写一个 animated-vector ,把 VectorDrawableobjectAnimator 连起来

<animated-vector 
xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/line">
    <target
        android:name="path1"
        android:animation="@animator/path1">
    </target>

    <target
        android:name="path2"
        android:animation="@animator/path2">
    </target>
</animated-vector>

那么整个动画就写完了,接下来在布局文件中引用 VectorDrawable

<ImageView
    android:id="@+id/iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/line"/>

然后在activity中

ImageView imageView = (ImageView) findViewById(R.id.imageView );
Drawable drawable = imageView.getDrawable();
if(drawable instanceof Animatable){
   ((Animatable) drawable).start();
}

运行代码,可以看见两条线慢慢从中间断开,最后形成"X"状

Paste_Image.png

关于动画我就做这个小小的演示,大家先了解个大概,还有更酷炫的轨迹动画就不详细讲了。有关动画如果有人想看的话往后抽个空我再写。下面教大家一些实用的技巧。

找一个带svg的网页,按F12查看代码

Paste_Image.png

可以看到上图<svg>对应的是“语音”这个图标,右键选择 作为HTML编辑

Paste_Image.png

可以看到<svg>的全部代码

<svg width="1024" height="1024" viewBox="0 0 1024 1024">
              <g class="transform-group">
                <g transform="translate(0, 28) scale(1, -1) scale(0.03125, 0.03125)">
                  <path d="M827.246871 444.924581c-12.94994 0.588401-23.925922-9.432837-24.51637-22.382776-0.093121-2.062985-0.418532-6.353708-1.106194-12.542664-1.170662-10.54824-2.959402-22.35924-5.490038-35.106566-7.226588-36.413328-18.898419-72.794933-35.917024-106.534362-47.672766-94.508467-126.925784-150.334937-248.217245-150.71663-121.290437 0.381693-200.546525 56.208163-248.217245 150.71663-17.018605 33.739429-28.692482 70.120011-35.919071 106.534362-2.529613 12.747325-4.317329 24.558325-5.487991 35.106566-0.687662 6.188956-1.014096 10.479679-1.108241 12.542664-0.588401 12.94994-11.564383 22.971178-24.514323 22.382776-12.951987-0.588401-22.973224-11.564383-22.382776-24.51637 0.5137-11.339256 2.63092-30.394241 7.446599-54.654784 8.000208-40.316218 20.946055-80.665181 40.051181-118.537743 51.840692-102.776781 138.972145-167.127392 265.456884-175.017082l0-85.599563L291.185872-13.400962c-12.96529 0-23.473621-10.510378-23.473621-23.473621 0-12.96529 10.508331-23.473621 23.473621-23.473621l441.857477 0c12.963243 0 23.473621 10.508331 23.473621 23.473621 0 12.963243-10.510378 23.473621-23.473621 23.473621L534.272259-13.400962l0 85.454254c127.791501 7.209192 215.690434 71.734788 267.86063 175.162392 19.104103 37.872562 32.050973 78.221526 40.051181 118.537743 4.815679 24.260543 6.930853 43.315528 7.446599 54.654784C850.217025 433.360198 840.197834 444.33618 827.246871 444.924581zM510.171352 195.80785c106.568131 0 193.353706 86.506213 193.353706 193.220676L703.525058 635.128551c0 106.59269-86.567611 193.220676-193.353706 193.220676-106.570177 0-193.353706-86.508259-193.353706-193.220676l0-246.100024C316.817646 282.432767 403.385257 195.80785 510.171352 195.80785zM363.764887 635.128551c0 80.693834 65.674769 146.273435 146.407488 146.273435 80.8197 0 146.407488-65.570391 146.407488-146.273435l0-246.100024c0-80.69588-65.674769-146.273435-146.407488-146.273435-80.8197 0-146.407488 65.568345-146.407488 146.273435L363.764887 635.128551z" fill="#737383"></path>
                </g>
              </g>
            </svg>

接下来打开SVG转换工具:http://oss.chengxingyao.cn/svg2android/index.html
把<svg>复制到上面,就能自动生成xml,可以看到下图左下角的“语音”图标

Paste_Image.png

用SVG还有一个优点就是体积相对于普通的图片文件要小,就拿上面的“箭头”作为例子

Paste_Image.png
Paste_Image.png

png文件2.93KB, svg 335字节,而且还能自适应,是不是要爱上svg了。
那么今天就说到这里了,最后放出一些svg开源图库。

https://xituqu.com/335.html#comments
http://www.iconfont.cn/collections?spm=a313x.7781069.0.0.fEW4eG&personal=1
http://www.iconsvg.com/


更多精彩文章请扫描下方二维码关注微信公众号"AndroidCzh":这里将长期为您分享原创文章、Android开发经验等!
QQ交流群: 705929135

推荐阅读更多精彩内容