VectorDrawable基础知识
来源:互联网 发布:淘宝客活动报名审核 编辑:程序博客网 时间:2024/06/05 12:43
1、概述
VectorDrawable是用xml文件定义一系列点、线、曲线及其颜色信息的矢量图。其最主要的优点是缩放不损失图片质量。我们也可以通过使用多个xml矢量图文件来做动画,从而避免适配多分辨率使用多张图片。 从android 5.0(api 21),系统提供了VectorDrawable与AnimatedVectorDrawable来支持矢量图。
2、 关于VectorDrawable
VectorDrawable定义一个静态的drawable对象。类似svg格式,每个矢量图被定义成由path和gourp对象构成的树状结构。
每个path包含了对象的几何轮廓,group包含了变化的具体规则。所有的path会按照xml中定义的顺序依次绘制。
此处插入官网图
android studio中的vector asset studio提供了非常简单的添加xml文件矢量图的功能。
如下为一个矢量电池图片的xml文件。
<!-- res/drawable/battery_charging.xml --><vector xmlns:android="http://schemas.android.com/apk/res/android" <!-- intrinsic size of the drawable --> android:height="24dp" android:width="24dp" <!-- size of the virtual canvas --> android:viewportWidth="24.0" android:viewportHeight="24.0"> <group android:name="rotationGroup" android:pivotX="10.0" android:pivotY="10.0" android:rotation="15.0" > <path android:name="vect" android:fillColor="#FF000000" android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z" android:fillAlpha=".3"/> <path android:name="draw" android:fillColor="#FF000000" android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/> </group></vector>
使用矢量图xml文件必须在AppCompatImageView中使用或者利用StateListDrawable,如下
<android.support.v7.widget.AppCompatImageView android:id="@+id/iv_scale_test" android:layout_width="20dp" android:layout_height="20dp" app:srcCompat="@drawable/test_vector_battery"/>
渲染后的图形如下
3、关于AnimatedVectorDrawable
AnimatedVectorDrawable为矢量图增加了动画信息。动画矢量图可以通过三个单独的资源文件定义,也可以通过一个单独的文件定义整个drawable。
3.1、利用多个文件定义动画矢量图
构建动画矢量图时,需要如下文件
- Vecotr Drawable xml文件
- AnimatedVectorDrawable xml文件,其中定义了目标Vector Drawable,要动画的目标paths及groups,及其通过ObjectAnimator或者AnimatorSet定义的目标对象。
- animator动画文件
三个示例文件分别如下
VectorDrawable xml文件
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600" > <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0" > <path android:name="vectorPath" android:fillColor="#000000" android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" /> </group></vector>
AnimatedVectorDrawable xml文件
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vd" > <target android:name="rotationGroup" android:animation="@anim/rotation" /> <target android:name="vectorPath" android:animation="@anim/path_morph" /></animated-vector>
animator xml文件,如下定义两个动画
<objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" /> <set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z" android:valueType="pathType"/></set>
在项目中使用如下代码开始动画
((AnimatedVectorDrawableCompat) mTestImg.getDrawable()).start(); 或者转型为Animatedable对象,然后调用start()方法。
3.2、利用单个文件定义动画矢量图
示例代码如下:
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"> <aapt:attr name="android:drawable"> <vector android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24"> <path android:name="root" android:strokeWidth="2" android:strokeLineCap="square" android:strokeColor="?android:colorControlNormal" android:pathData="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" /> </vector> </aapt:attr> <target android:name="root"> <aapt:attr name="android:animation"> <objectAnimator android:propertyName="pathData" android:valueFrom="M4.8,13.4 L9,17.6 M10.4,16.2 L19.6,7" android:valueTo="M6.4,6.4 L17.6,17.6 M6.4,17.6 L17.6,6.4" android:duration="300" android:interpolator="@android:interpolator/fast_out_slow_in" android:valueType="pathType" /> </aapt:attr> </target></animated-vector>
其中aapt标记创建了单独的资源并且在矢量文件中引用。这种方式需要24版本以上的构建工具。
4、xml矢量文件中的元素
path的可选项释义
android:name 定义该 path 的名字,这样在其他地方可以通过名字来引用这个路径
android:pathData 和 SVG 中 d 元素一样的路径信息。
android:fillColor 定义填充路径的颜色,如果没有定义则不填充路径
android:strokeColor 定义如何绘制路径边框,如果没有定义则不显示边框
android:strokeWidth 定义路径边框的粗细尺寸
android:strokeAlpha 定义路径边框的透明度
android:fillAlpha 定义填充路径颜色的透明度
android:trimPathStart 从路径起始位置截断路径的比率,取值范围从 0 到1
android:trimPathEnd 从路径结束位置截断路径的比率,取值范围从 0 到1
android:trimPathOffset 设置路径截取的范围,取值范围从 0 到1
android:strokeLineCap 设置路径线帽的形状,取值为 butt, round, square.
android:strokeLineJoin 设置路径交界处的连接方式,取值为 miter,round,bevel.
android:strokeMiterLimit 设置斜角的上限
group的可选项释义
group :主要是用来设置路径做动画的关键属性的
android:name 定义 group 的名字
android:rotation 定义该 group 的路径旋转多少度
android:pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。
android:pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。
android:scaleX 定义 X 轴的缩放倍数
android:scaleY 定义 Y 轴的缩放倍数
android:translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的。
android:translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的。
clip-path释义
clip-path定义当前绘制的剪切路径。clip-path只对当前的group和子group有效。
android:name 定义clip path的名字
android:pathData 和 path中的 android:pathData 的取值一样。
vector可选项释义
android:name 定义该drawable的名字
android:width 定义该 drawable 的内部(intrinsic)宽度,支持所有 Android 系统支持的尺寸,通常使用 dp
android:height 定义该 drawable 的内部(intrinsic)高度,支持所有 Android 系统支持的尺寸,通常使用 dp
android:viewportWidth 定义矢量图视图的宽度,视图就是矢量图 path 路径数据所绘制的虚拟画布
android:viewportHeight 定义矢量图视图的高度,视图就是矢量图 path 路径数据所绘制的虚拟画布
android:tint 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的
android:tintMode 定义 tint 颜色的 Porter-Duff blending 模式,默认值为 src_in
android:autoMirrored 设置当系统为 RTL (right-to-left)
布局的时候,是否自动镜像该图片。比如 阿拉伯语
android:alpha 该图片的透明度属性
5、Vector Drawables的兼容问题
为了兼容api21以下版本,系统提供了2个支持库support-vector-drawable及animated-vector-drawable,其中分别包含了VectorDrawableCompat和AnimatedVectorDrawableCompat。其中VectorDrawableCompat可以兼容到api 7,AnimatedVectorDrawableCompat可以兼容到api11。
通过如下配置来使用vectorDrawable支持库
//For Gradle Plugin 2.0+ android { defaultConfig { vectorDrawables.useSupportLibrary = true } }(低于1.5或者更低版本的gradle配置方法见官网)
在加载drawable时,不是所有接受drawable id的地方都可以使用vector drawable的。当在使用矢量图像时用app:srcCompat替换android:src,在代码中可以使用 setImageResource() 来设置图片源。
为了更好的渲染,建议在定义矢量图片时设置为黑色,然后利用android:tint着色。
6、版本问题
com.android.support:appcompat-v7包25.4.0及以上版本的支持库才有以下特性:
1.path渐变 从一个path渐变到另外一个path。(即使使用了在api21以下的手机上无效,只是不报错而已)
2.path变化的插值器
com.android.support:appcompat-v7包26.0.0-beta1及更高的支持库有以下特性:
1.沿着path移动任意对象。(这一点不是很理解)
注意,在不支持的版本上应用以上特性可能会造成crash。
7、参考:
- https://developer.android.com/guide/topics/graphics/vector-drawable-resources.html
- https://developer.android.com/studio/write/vector-asset-studio.html#importing
- VectorDrawable基础知识
- VectorDrawable
- VectorDrawable
- VectorDrawable-第一章
- VectorDrawable入门
- VectorDrawable 详解
- VectorDrawable-第一章
- VectorDrawable-第一章
- VectorDrawable(矢量图)
- VectorDrawable 详解
- 矢量图VectorDrawable
- VectorDrawable矢量图
- Android VectorDrawable与SVG
- VectorDrawable-第二章
- VectorDrawable-第三章
- VectorDrawable – 第四章
- VectorDrawable与AnimatedVectorDrawable
- Android VectorDrawable与SVG
- POJ 2356 Find a multiple
- SpringBoot进阶之统一接口返回信息格式
- [c] windows下编译boost 1.55.0
- 思想才是王道之sql与递归
- 数据结构 P42-43 算法实现 多项式的建立及加法
- VectorDrawable基础知识
- matlab自定义函数的几种方法
- 虚拟继承+虚函数,含有虚函数的菱形虚拟继承
- brainproduct recorder 远程采集脑电波实时数据
- OkHttp
- LeetCode -- Search Insert Position
- bzoj1008: [HNOI2008]越狱
- Tomcat 报错 (The Tomcat server configuration at \Servers\Tomcat v7.0 Server at localhost-config is mi)
- 字符串算法——查找有序数组旋转后最小值(有重复元素)(Find Minimum in Rotated Sorted Array II)