前言
介绍如何使用vector 进行绘制几何图标。
vector 其实使用的就是svg格式的矢量图。我们如果通过https://www.iconfont.cn/ 进行下载，得到的图片，也可以选择svg格式。
SVG介绍
通常情况下，有以下几种使用Vector Asset的方式
1.File-> New -> Vestor Asset 然后使用google提供的各种基础库进行修改。
2.通过设计或者UI将图片导出为svg格式，然后倒入到drawable文件夹下进行替换。
3.自己根据参数逻辑，直接手写。
那么，好好的png用的也很好，为什么要有svg呢？
1.可被非常多的工具读取和修改(比如记事本)
2.与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强
3.是可伸缩的
4.图像可在任何的分辨率下被高质量地打印
5.可在图像质量不下降的情况下被放大
6.图像中的文本是可选的，同时也是可搜索的(很适合制作地图)
7.可以与 Java 技术一起运行
8.是开放的标准
9.SVG文件是纯粹的 XML
如果想更清晰的了解svg绘制格式的内容，可以到W3school 进行学习：https://www.w3school.com.cn/svg/index.asp
vector 介绍
绘制的大部分代码都是在<path>标签内。同时，一个vector之中允许存在多个<path>标签
基本语法
每个命令都有大小写形式，大写代表后面的参数是绝对坐标，小写表示相对坐标，相对于上一个点的位置。参数之间用空格或逗号隔开。
命令案例介绍：
M (x y) 把画笔移动到x,y，要准备在这个地方画图了。
L (x y) 直线连到x,y，还有简化命令H(x) 水平连接、V(y)垂直连接。
Z，没有参数，连接起点和终点 //闭合线段
C(x1 y1 x2 y2 x y)，控制点（x1,y1）（ x2,y2），终点x,y 。 //三阶贝塞尔曲线
Q(x1 y1 x y)，控制点（x1,y1），终点x,y //二阶贝塞尔曲线
A(rx ry x-axis-rotation large-arc-flag sweep-flag x y) //绘制圆弧
rx ry 椭圆半径
x-axis-rotation x轴旋转角度
large-arc-flag 为0时表示取小弧度，1时取大弧度 （舍取的时候，是要长的还是短的）
sweep-flag 0取逆时针方向，1取顺时针方向
关于<vector>标签里面的函数介绍
android:name 定义该drawable的名字
android:width 定义该 drawable 的内部宽度,支持所有 Android 系统支持的尺寸，通常使用 dp
android:height 定义该 drawable 的内部高度,支持所有 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 该图片的透明度属性
关于<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 设置路径截取的范围
android:strokeLineCap 设置路径线帽的形状，取值为 butt, round, square.
android:strokeLineJoin 设置路径交界处的连接方式，取值为 miter,round,bevel.
android:strokeMiterLimit 设置斜角的上限
关于<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 只针对当前的group和子group有效。
默认情况下vector下就是一个group了。
android:name 定义该 path 的名字
android:pathData 定义当前需要绘制的剪切路径，就是将已经绘制好的path 的部分path裁剪掉。 很多复杂图形都是通过裁剪和绘制进行堆叠而成。
案例介绍
1.圆形
代码：
<vector android:height="40dp"
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:viewportWidth="40"
android:viewportHeight="40">
<path
android:pathData="
M6,20
A 5 5 0 1 1 35 20
A5 5 0 1 1 6 20
z"
android:strokeWidth="3"
android:strokeColor="#fff" />
</vector>
效果：
2.箭头
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:height="40dp"
android:viewportWidth="40"
android:viewportHeight="40">
<path
android:pathData="
M8,20
L30,20
M32,20
L27 15
L27 24
z"
android:strokeWidth="3"
android:strokeColor="#fff" />
</vector>
效果：
3.正三角形
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:height="40dp"
android:viewportWidth="40"
android:viewportHeight="40">
<path
android:pathData="
M20,10
L30,30
L10,30
z"
android:strokeWidth="3"
android:strokeColor="#fff" />
</vector>
效果：
4.直角三角形
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:height="40dp"
android:viewportWidth="40"
android:viewportHeight="40">
<path
android:pathData="
M10,10
v20
h20
z"
android:strokeWidth="3"
android:strokeColor="#fff" />
</vector>
效果：
4.横线
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:height="40dp"
android:viewportWidth="40"
android:viewportHeight="40">
<path
android:pathData="
M8,20
L32,20
z"
android:strokeWidth="3"
android:strokeColor="#fff" />
</vector>
效果：
5.圆形
<vector android:height="40dp"
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:viewportWidth="40"
android:viewportHeight="40">
<path
android:pathData="
M4,20
A 9 6 0 1 1 36 20
A9 6 0 1 1 4 20
z"
android:strokeWidth="3"
android:strokeColor="#fff" />
</vector>
效果：
6.平行四边形
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:height="40dp"
android:viewportWidth="40"
android:viewportHeight="40">
<path
android:strokeColor="#fff"
android:strokeWidth="3"
android:pathData="
M20,13
h15
L20,28
h-15
z"
/>
</vector>
效果：
7.正方形
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:height="40dp"
android:viewportWidth="40"
android:viewportHeight="40">
<path
android:strokeColor="#fff"
android:strokeWidth="3"
android:pathData="
M10,10
h20 v20 h-20
z"
/>
</vector>
效果：
8.五角星
<vector android:height="40dp"
android:viewportHeight="24.0" android:viewportWidth="24.0"
android:width="40dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path
android:fillColor="#fff"
android:pathData="
M22,9.24l-7.19,-0.62
L12,2 9.19,8.63 2,9.24l5.46,4.73
L5.82,21 12,17.27 18.18,21
l-1.63,-7.03L22,9.24z
M12,15.4l-3.76,2.27 1,-4.28 -3.32,-2.88 4.38,-0.38
L12,6.1l1.71,4.04 4.38,0.38 -3.32,2.88 1,4.28
L12,15.4
z"/>
</vector>
效果：
9.气泡框
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:height="20dp"
android:viewportWidth="20"
android:viewportHeight="10">
<path
android:fillColor="#fff"
android:pathData="
M1,0
Q0,0 0,1
V8
Q0,9 1,9
L19,9
Q20,9 20,8
V1
Q20,0 19,0
M9.5,9
H10.5
L10,10
z" />
</vector>
效果：
10.向右 按钮
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:height="40dp"
android:viewportWidth="50.0"
android:viewportHeight="50.0">
<path
android:strokeColor="#fff"
android:strokeWidth="5"
android:pathData="M10,10
L26.7,26.9
M25,25
L10,40"/>
</vector>
效果：
11.百度logo
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24"
android:viewportWidth="24">
<path
android:name="toe1"
android:fillColor="#ffffff"
android:pathData="M 4.5 7 C 5.88071187458 7 7 8.11928812542 7 9.5 C 7 10.8807118746 5.88071187458 12 4.5 12 C 3.11928812542 12 2 10.8807118746 2 9.5 C 2 8.11928812542 3.11928812542 7 4.5 7 Z" />
<path
android:name="toe2"
android:fillColor="#ffffff"
android:pathData="M 9 3 C 10.3807118746 3 11.5 4.11928812542 11.5 5.5 C 11.5 6.88071187458 10.3807118746 8 9 8 C 7.61928812542 8 6.5 6.88071187458 6.5 5.5 C 6.5 4.11928812542 7.61928812542 3 9 3 Z" />
<path
android:name="toe3"
android:fillColor="#ffffff"
android:pathData="M 15 3 C 16.3807118746 3 17.5 4.11928812542 17.5 5.5 C 17.5 6.88071187458 16.3807118746 8 15 8 C 13.6192881254 8 12.5 6.88071187458 12.5 5.5 C 12.5 4.11928812542 13.6192881254 3 15 3 Z" />
<path
android:name="toe4"
android:fillColor="#ffffff"
android:pathData="M 19.5 7 C 20.8807118746 7 22 8.11928812542 22 9.5 C 22 10.8807118746 20.8807118746 12 19.5 12 C 18.1192881254 12 17 10.8807118746 17 9.5 C 17 8.11928812542 18.1192881254 7 19.5 7 Z" />
<path
android:fillColor="#ffffff"
android:pathData="M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79 .05 c-.11 .02 -.22 .05 -.33 .09 -.7 .24 -1.28 .78 -1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79 .29 1.02 1.02 2.03 2.33 2.32 .73 .15 3.06-.44 5.54-.44h.18c2.48 0 4.81 .58 5.54 .44 1.31-.29 2.04-1.31 2.33-2.32 .31 -2.04-1.3-3.49-2.61-4.8z" />
</vector>
效果：
评论区