Android xml代码绘制图形三 Vector 详解

直达机票

Android xml代码绘制图形一 Shape 详解
Android xml代码绘制图形二 Layer-list 详解
Android xml代码绘制图形三 Vector 详解

引言

手机APP开发离不开图标，图标具有释义、美化、引导的作用，android开发提供了xml绘制简单图形的方法，可不必依赖UI工程师切图，而且图片能随意的更改，既方便又节省空间，使用起来非常便捷。具体可以分为 shape、layer-list、vector三种方法，本文将详细介绍vector的使用方法

Vector简单介绍

• vector是用于绘制矢量图的，类似svg
• api版本要求：android5.0+

Vector使用方法

• 在'res/drawable'下创建xml资源文件，编辑属性
• 使用该资源文件的方式和图片资源一样

vector根节点属性介绍

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    android:viewportWidth="20"
    android:viewportHeight="20">
</vector>
<!--
width： 图形的实际宽度
height：图形的实际长度
viewportHeight：画布的长度
viewportWidth： 画布的宽度
-->

• 一切按照比例进行绘制，比如：当 viewportWidth = 20、width = 40dp 时（即1:2），如果指定线的长度为3，那么实际绘制时线对应的长度就是6dp
• 针对上面的xml代码中，将 width和height改为40dp，那么就相当于对图放大了一倍，一般情况下都设定为1:1的比例，这样比较方便理解和计算

path节点属性介绍

• vector里最重要的内容就是path节点了，path节点是真正的绘制代码
• path节点中主要有几种类型，M = 移动到某个点、L = 直线、A = 弧线、Q = 二阶贝塞尔、C = 三阶贝塞尔、Z = 闭合、V = 垂直、H = 水平
• 以上path节点类型字母，大写表示绝对坐标、小写表示相对坐标
• 坐标系是以左上角为原点，向下为 Y 轴正方向，向右为 X 轴正方向

path节点详细使用方法

• 注意strokeWidth和strokeColor必须配置参数才能看到绘制的线
• M = 移动到某个点
  用法：M(x,y)
  要绘制任何图形首先得有个起点吧，这个可以用M来表示，参数是坐标
  M表示移动到某个点的意思
• L = 直线
  L(x,y)
  绘制直线比较简单，用字母L表示，当绘制水平线时可以用H,绘制垂直线时可以用V，L后面主要跟两个参数，就是要绘制的直线的终点坐标，而起点坐标都是以上一个点作为起点坐标
• V = 垂直、H = 水平
  用法：V(y)
  用法：H(x)
  水平、垂直绘制直线
• A = 弧线
  A(x轴半径、y轴半径 x轴旋转角度 大小弧 顺逆时针 终点坐标x，终点坐标y)
  x轴旋转角度 = 0或1（1=？），大小弧 = 0或1（1 = 大），顺逆时针 = 0或1（1 = 顺）
• Q = 二阶贝塞尔
  用法：Q(x1,y1 x2,y2)
  x1y1为控制点
  x2y2为终点
• C = 三阶贝塞尔
  用法：Q(x1,y1 x2,y2 x3,y3)
  x1y1为控制点1
  x2y2为控制点2
  x3y3为终点
• Z = 闭合
  用法：Z

示例