vector_xml属性

最新推荐文章于 2023-01-09 18:44:11 发布

原创最新推荐文章于 2023-01-09 18:44:11 发布 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Android #vector

Android 专栏收录该内容

46 篇文章

订阅专栏

本文详细介绍了Android矢量图形XML文件的定义与使用方法。包括vector、group、path等标签的属性及其作用，如transform变换、裁剪路径等高级特性。

vector_xml属性

矢量图形对应的XML文件定义在res/drawable下，在XML文件中的根标签是vector。

矢量图形的xml文件支持以下标签：

vector：根标签，表示一个矢量动画。矢量图形对应的Java类是VectorDrawable。VectorDrawable没有提供setPathData之类的方法，所以我们只能在XML内定义矢量图形。vector标签下支持0个或多个group标签，表示一组路径的集合，在group内定义一个或多个path标签，定义要被绘制的路径，也可以不加group，直接在vector下定义一个或多个path标签，group/path标签下还支持clip-path标签。

vector支持的属性：

1）android:name：定义矢量图形的名称

2）android:width：定义Drawable的宽度，支持所有dimension单位，一般使用dp。drawable的宽度不一定是最终绘制宽度，比如给ImageView设置backgroud则Drawable绘制宽度等于ImageView的宽度，给ImageView设置src则在ImageView大于Drawable宽度时，Drawable绘制宽度等于自己定义的宽度。

3）android:height：定义Drawable的宽度，支持所有dimension单位，一般是dp。其它同上。

4）android:viewportWidth：定义矢量图形的视图(viewport)空间的宽度，viewport是一个虚拟的canvas，后面所有的path都在该坐标系上绘制。坐标系左上方为(0,0)，横轴从左向右，纵轴从上到下。横轴可视区域就是0~viewportWidth。不用写单位。

5）android:viewportHeight：定义矢量图形的可视区域的高度。其它见上。[0,0]~[viewportWidth,viewportHeight]定义了虚拟canvas的可视区域。不用写单位。

6）android:tint：作为染色(tint)的色彩应用到drawable上。默认不应用tint。

7）android:tintMode：tint颜色的Porter-Duff混合模式，默认是src_in。

8）android:autoMirrored：如果drawable布局方向是RTL(right-to-left)时，drawable绘制是否需要镜像化（镜像化就是绕自身x轴中线旋转180度）。

9）android:alpha：drawble的透明度，取值0～1

group：

定义一组路径和子group，另外还定义了转换信息(transformation information)。转换信息定义在vector指定的视图区域内（与viewport坐标系相同）。定义的应用转换的顺序是缩放–>旋转–>平移，所以同时定义的这些属性最先应用scaleX/scaleY属性，最后应用translateX/translateY属性。

group支持的属性：

1）android:name：定义group的名称

2）android:rotation：group对应矢量图形的旋转角度，取值是360度制。

3）android:pivotX：Group旋转和缩放时的中心点的X轴坐标。取值基于viewport视图的坐标系，不能使用百分比。

4）android:pivotY：Group旋转和缩放时的中心点的Y轴坐标。取值基于viewport视图的坐标系，不能使用百分比。

5）android:scaleX：Group在X轴上的缩放比例，最先应用到图形上。

6）android:scaleY：Group在Y轴上的缩放比例，最先应用到图形上。

7）android:translateX：Group在X轴的平移距离，取值基于viewport视图的坐标系。最后应用到图形上。

8）android:translateY：Group在Y轴的平移距离，取值基于viewport视图的坐标系。最后应用到图形上。

path：

定义一个路径，一个路径即可以表示一块填充区域也可以表示一根线条。

path支持的属性：

1）android:name：定义路径的名称

2）android:pathData：定义路径的数据，路径由多条命令组成，格式与SVG标准的path data的d属性完全相同，路径命令的参数定义在viewport视图的坐标系。

3）android:fillColor：指定填充路径的颜色，一般是一个颜色值，在SDK24及以上，可以指定一个颜色状态列表或者一个渐变的颜色。如果在此属性上做渐变动画，新的属性值会覆盖此值。如果不指定，则path不被填充。

4）android:strokeColor：指定路径线条的颜色，一般是一个颜色值，在SDK24及以上，可以指定一个颜色状态列表或者一个渐变的颜色。如果在此属性上做渐变动画，新的属性值会覆盖此值。如果不指定，则path的线条不会绘制出来。

5）android:strokeWidth：指定路径线条的宽度，基于viewport视图的坐标系（不要dp/px之类的结尾）。

6）android:strokeAlpha：指定路径线条的透明度。

7）android:fillAlpha：指定填充区域的透明度。

8）android:trimPathStart：取值从0到1，表示路径从哪里开始绘制。0~trimPathStart区间的路径不会被绘制出来。

9）android:trimPathEnd：取值从0到1，表示路径绘制到哪里。trimPathEnd~1区间的路径不会被绘制出来。

10）android:trimPathOffset：平移可绘制区域，取值从0到1，线条从(trimPathOffset+trimPathStart绘制到trimPathOffset+trimPathEnd)，注意：trimPathOffset+trimPathEnd如果超过1，其实也是绘制的的，绘制的是0～trimPathOffset+trimPathEnd-1的位置。

11）android:strokeLineCap：设置线条首尾的外观，三个值：butt（默认，向线条的每个末端添加平直的边缘）, round（向线条的每个末端添加圆形线帽）, square（向线条的每个末端添加正方形线帽。）。

12）android:strokeLineJoin：设置当两条线条交汇时，创建什么样的边角（线段连接类型）：三个值：miter（默认，创建尖角）,round（创建圆角）,bevel（创建斜角）。

13）android:strokeMiterLimit：设置设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离。只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效。

14）android:fillType：**设置路径的填充类型，与SVG格式的”fill-rule”属性相同。

clip-path：

定义当前裁切的路径。裁切路径只能用于当前group和其子元素，只有在裁切路径内的元素才会被显示出来。clip-path定义后才会影响后面path的绘制，如果一个group内有多个path，clip-path定义在第三位，则前面两个path不受其影响，后面的path受其影响。如果希望clip-path对整个group都生效，应放在第一位。

clip-path支持的属性：

1）android:name：定义裁切路径的名称

2）android:pathData：定义裁切路径，取值与上面讲的pathData相同。

//VectorDrawableCompat的xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    <!-- 图片本身的大小 -->
    android:width="500px"
    android:height="500px"
    <!-- 画布的大小 -->
    android:viewportHeight="500"
    android:viewportWidth="500">
    <!-- 用来把多个path或者subgroup组合起来，group提供了一些属性比如旋转、缩放、平移。这些属性值的变化会反应在它内部的path和subgroup元素上-->
    <group
        android:scaleX="5.0"
        android:scaleY="5.0"
        //图像旋转角度
        android:rotation="45.0">
        <!-- 这里group和path有一个name属性，这个属性用来在使用动画时指定动画要驱动的对象 -->
        <path
            android:name="star"
            android:pathData="M 50.0,90.0 L 82.9193546357,27.2774101308 L"
            android:strokeColor="@color/colorAccent"
            android:strokeWidth="2" />
    </group>
</vector>

//定义AnimatedVectorDrawableCompat的xml
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_drawable">
    <target
        android:name="star"
        android:animation="@animator/star_anim" />
</animated-vector>

根元素是animated-vector，并且有一个必须的属性android:drawable用来指定要驱动的矢量图对象。子标签target一方面用来指定要驱动的矢量图内的group和path的名称(这里和VectorDrawableCompat的xml中的group和path名称对应)；另一方面指定要使用哪个属性动画来驱动group和path的属性进行变化来产生动画效果。