安卓自定义控件或其他效果Android 学习Android开发

Android中SVG的使用姿势

2017-02-16  本文已影响407人  饱醉豚我去年买了个表

SVG是什么?

SVG的历史和优势

在 2003 年一月,SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有:太阳微系统、Adobe、苹果公司、IBM 以及柯达。与其他图像格式相比,使用 SVG 的优势在于:

Android中该如何使用SVG呢?

Android5.0之后为支持SVG提供了两个个类:VectorDrawableAnimatedVectorDrawable,如果想在5.0之前使用,需要加入com.android.support:appcompat-v7:23.2.0以上版本的兼容包,如:

compile 'com.android.support:appcompat-v7:24.2.0'

然后配置一下gadle,如果Gradle Plugin的版本在2.0或者以上,则配置:

// Gradle Plugin 2.0+  
 android {  
   defaultConfig {  
     vectorDrawables.useSupportLibrary = true  
    }  
 }

如果你正在使用Gradle 1.5 ,则应该配置:

// Gradle Plugin 1.5  
 android {  
   defaultConfig {  
     generatedDensities = []  
  }  
 
  // This is handled for you by the 2.0+ Gradle Plugin  
  aaptOptions {  
    additionalParameters "--no-version-vectors"  
  }  
 }

将SVG格式的图片转换为VectorDrawable 地址:
http://inloop.github.io/svg2android/

VectorDrawable可以用一个XML文件来定义,根元素是<vector>,定义一个XML文件vector_drawable.xml如下:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="@string/app_name"
    android:width="200dp"
    android:height="200dp"
    android:tint="@color/colorAccent"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <group>
        <path
            android:fillAlpha="100"
            android:fillColor="#FF000000"
            android:pathData="M12,2c1.1,0 2,0.9 2,2s-0.9,2 -2,2 -2,-0.9 -2,
            -2 0.9,-2 2,-2zM21,9h-6v13h-2v-6h-2v6L9,22L9,9L3,9L3,7h18v2z"
            android:strokeLineCap="round" />
    </group>
</vector>

在ImageView中引用:

  <ImageView
        android:id="@+id/iv_vector"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:contentDescription="@string/app_name"
        app:srcCompat="@drawable/vector_drawable" />

或者在代码里设置:

ImageView iv_vector= (ImageView) findViewById(R.id.iv_vector);
AnimatedVectorDrawableCompat animatedVectorDrawableCompat = AnimatedVectorDrawableCompat.create(this, R.drawable.vector_drawable);
iv_vector.setImageDrawable(animatedVectorDrawableCompat);

效果图:


vector.png

来看下各个属性的含义:

参数 备注
<vector>
android:name 定义VectorDrawable的名字
android:width、android:height 定义图片的宽、高,支持所有尺寸单位,通常用dp指定
android:viewportWidth、android:viewportHeight 定义图片被划分的比例大小,例如上面的600.0,即把64dp平均分成500份,后面Path标签中的坐标,就全部使用的是这里划分后的坐标系统,width和height这两个值必须一样,否则图片会出现变形。
android:tint 定义图片的颜色,默认不设置颜色,该值会覆盖path标签中的android:fillColor值
android:tintMode //定义图片颜色为Porter-Duff blending 模式,默认值为 src_in
android:autoMirrored //当布局方向从右到左时,该图片是否自动被镜像
android:alpha 图片的透明度,取值范围(0-255),255表示全透明
<group> 包含一组path或子group,通过group可以把多个path组合到一块形成一个图片
android:name 定义group的名字
android:rotation 定义group顺时针旋转的角度
android:pivotX、android:pivotY (pivotX,pivotY)定义了group缩放、旋转时的中心点
android:scaleX、android:scaleY X轴、Y轴的缩放倍数
android:translateX、android:translateY X轴、Y轴的平移倍数
<path> 定义被绘制的路径
android:name 定义路径名字
android:pathData 定义矢量图的路径信息
android:fillColor 定义填充路径的颜色,没有定义不填充
android:strokeColor 定义路径边框的颜色
android:strokeWidth 定义路径边框的宽度
android:strokeAlpha 定义路径边框颜色的透明度
android:fillAlpha 定义填充路径颜色的透明度
android:trimPathStart、android:trimPathEnd 取值范围都是(0,1),意思是截取从起始部分到结束部分的部分path
android:trimPathOffset //设置路径截取区域,取值范围(0,1)
android:strokeLineCap //设置路径线帽的形状,取值为 butt, round, square
android:strokeLineJoin 设置路径交界处的连接方式,取值为 miter,round,bevel
android:strokeMiterLimit //设置斜角的上限
<clip-path> 定义当前绘制的剪切路径。注意,clip-path 只对当前的 group 和子 group 有效
android:name 定义clip-path名字
android:pathData 类似于path中的pathdata,定义路径信息

path标签中的pathData中指令:

参数 备注
M M = moveto(X,Y) :将画笔移动到(X,Y)坐标位置
L L = lineto(X,Y) :画直线到(X,Y)坐标位置
H H = horizontal lineto(X):画水平线到指定的X坐标位置
V V = vertical lineto(Y):画垂直线到指定的Y坐标位置
C C = curveto(X1,Y1,X2,Y2,ENDX,ENDY):三阶贝赛尔曲线
S S = smooth curveto(X2,Y2,ENDX,ENDY)
Q Q = quadratic Belzier curve(X,Y,ENDX,ENDY):二阶贝赛尔曲线
T T = smooth quadratic Belzier curveto(ENDX,ENDY):映射
A A = elliptical Arc(RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
Z Z = closepath():关闭路径

注:上面的指令,可以大写也可以小写,大写相对于屏幕坐标系;小写相对于父View坐标系。

AnimatedVectorDrawable将VectorDrawable和动画联系到一起,可以用三个XML文件来表示,如下:
表示VectorDrawable的XML文件:icon_vector.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:tint="@color/colorAccent"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <path
        android:name="icon_path"
        android:fillColor="#FF000000"
        android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"
        android:trimPathEnd="1.0"
        android:trimPathStart="0.0" />
</vector>

表示AnimatedVectorDrawable的XML文件:icon_vector_anim.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    <!--icon_vector即为要操作的VectorDrawable资源文件-->
    android:drawable="@drawable/icon_vector">
    <target
        <!--target的name,这里为上面VectorDrawable文件里的path名字-->
        android:name="icon_path"
        <!--为目标添加的动画-->
        android:animation="@anim/anim_icon" />

</animated-vector>

用来定义动画的XML文件:anim_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <objectAnimator
        android:duration="2000"
        android:propertyName="trimPathStart"
        android:valueFrom="0.0"
        android:valueTo="1.0" />
    <objectAnimator
        android:duration="2000"
        android:propertyName="trimPathStart"
        android:valueFrom="1.0"
        android:valueTo="0.0" />
</set>

在布局文件中引用:

<ImageView
        android:id="@+id/iv_anim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:contentDescription="@string/app_name"
        android:src="@drawable/icon_vector_anim" />

效果图:

vector_a.gif
完整代码地址:AnimatedVectorDrawable_Demo

参考:
1、Android Vector曲折的兼容之路
2、android 中使用svg
3、Android Support Library 23.2有哪些新东西

上一篇下一篇

猜你喜欢

热点阅读