--- highlight: androidstudio theme: github --- 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，[点击查看活动详情](https://juejin.cn/post/7099702781094674468 "https://juejin.cn/post/7099702781094674468") 在上篇文章中，我们学习了 Android 中 SVG 的基本语法。本篇文章来学习一下高级一点的用法：使用 SVG 绘制渐变色和圆形。 # 一、渐变色的绘制一张最简单的渐变色 SVG 图片代码如下： ```xml ``` 效果图： ![linear gradient](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff799490af5e4f0bb88cb4f52526134a~tplv-k3u1fbpfcp-watermark.image?) 通过 aapt:attr 指定需要注入属性，name 指定注入的属性名，这里设置为 android:fillColor，表示需要注入的属性是填充色。然后编写 gradient 标签，设置开始颜色 startColor，结束颜色 endColor，这里指定为从白色到黑色。然后设置起始点和终点的坐标，这里定义的是从 (0,0) 到 (100,100)，也就是从画布左上角到右下角，这条路径的含义是渐变色的变化方向。为了更清晰地解释渐变色的方向，不妨将起始点和终点修改为 (0,0) 到 (0,100)，也就是将这里的 endX 改为 0，效果如下： ![vertical_gradient](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8b229a6004904c81bf84a26f6c5649fd~tplv-k3u1fbpfcp-watermark.image?) 可以很明显的看出，渐变色的方向由左上到左下变成了从上到下，这就是渐变色方向的含义。 type 属性用于指定渐变色的渐变类型，常用的类型有 linear、radial、sweep，分别表示线型、发散型、扫描型。如果渐变色只能指定 startColor、endColor，那就只能处理两种颜色之间的渐变，那么多色渐变做起来就会很复杂。所以还有另一种方式指定渐变色的颜色变化，就是给 gradient 标签内部添加 item 标签： ```xml ``` 效果如下： ![gradient with item](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4d02e77ba7414a23a53ad22b00d1467f~tplv-k3u1fbpfcp-watermark.image?) 每个 item 标签代表一种颜色，offset 表示这个颜色处于整个渐变区域的哪个位置。取值范围是 0~1，表示整个渐变区域的百分比。在设置了 item 之后，startColor 和 endColor 就不会起作用了。也就是说 startColor/endColor 和 item 标签是不能混用的。通过 item 标签，我们将 offset 0 的区域指定为白色，offset 0.5 的区域指定为蓝色，offset 1 的区域指定为黑色，就形成了上图中的效果。再看一个发散型渐变色的例子： ```xml ``` 效果图： ![radial gradient](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/415d847e58ee4094a42a7f0c2c1f73d7~tplv-k3u1fbpfcp-watermark.image?) > 是不是有种黑洞照片的科幻感 =,= 在这个例子中，type 指定为 radial，表示发散型渐变色。发散型渐变色需要的参数和线型渐变色的参数略有不同。 startColor 和 endColor 表示起始颜色和结束颜色，这一点和线型渐变色是相同的。并且，同样可以通过 item 标签指定多种渐变色。然后通过 centerX、centerY 指定圆心的坐标，通过 gradientRadius 指定渐变色的半径。这样就能完成上图的效果。接下来再看一个扫描型渐变色的例子： ```xml ``` 效果图： ![sweep gradient](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9fb8b42316bf4e88915d64f731307f39~tplv-k3u1fbpfcp-watermark.image?) 在这个例子中，type 指定为 sweep，表示扫描型渐变色。可以看到，扫描型渐变色和发散型渐变色的写法比较类似。同样地，startColor 和 endColor 表示起始颜色和结束颜色。并且，也可以通过 item 标签指定多种渐变色。然后再通过 centerX、centerY 指定圆心的坐标即可。 > 注：线型、射线型、扫描型的名字是我自己翻译的，我没有找到这三种渐变色类型的官方中文译名。建议读者直接使用英文名交流 linear、radial、sweep。 > 再注：在 Android Studio 中编辑渐变色时，没有代码提示、自动补全的功能，我暂时没有找到解决办法，只能手打一个个属性。 # 二、圆形的绘制一个最简单的圆形的代码是： ```xml ``` 效果图： ![circle](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/543fe83c0c8e4464aa45c125b5066203~tplv-k3u1fbpfcp-watermark.image?) 圆形的绘制使用的是 A 符号，前文中讲过，A 是用来绘制弧线的（arc）。在 SVG 中，并没有专门用于绘制圆形的符号。所以要么通过一条几乎闭合的弧线绘制圆形、要么用两条弧线绘制圆形。读者可能会有疑问，为什么说是几乎闭合呢？如果将弧线的起点和终点设置成一样，不就能绘制一条完整的圆形了吗？实际上 A 符号的起点和终点一样时，不会触发 SVG 的绘制。这可能是个 bug，（产品经理小声说道：这其实是个 feature）。或许 A 符号出于安全检查的考虑，为了避免做无用的绘制，将起点和终点一致的弧线直接忽略了。所以这里的 pathData 中，先移动到 (100,100) 坐标准备绘制，而弧线的终点坐标是 (99,100)，终点和起点的横坐标相差 1，目的就是避免 A 符号不触发绘制。所以这里的圆严格意义上来讲不是一个正圆，但肉眼是分辨不出来的。如果用两条弧线绘制圆形的话，可以保证绘制出的是一个正圆，具体方法是每条弧线只画一个半圆，最后拼接成一个正圆。这种方式稍显复杂，所以我没有采用。 # 小结本文学习了三种渐变色的绘制：linear、radial、sweep。以及 A 符号绘制圆形的技巧。 # 参考文章 [Android 绘制矢量图（下）](https://github.com/wkxjc/BingDwenDwen/blob/master/blogs/Android%20%E7%BB%98%E5%88%B6%E7%9F%A2%E9%87%8F%E5%9B%BE%EF%BC%88%E4%B8%8B%EF%BC%89%E2%80%94%E2%80%94%20%E7%94%BB%E4%B8%80%E4%B8%AA%E5%86%B0%E5%A2%A9%E5%A2%A9.md) [Android矢量图(一)--VectorDrawable基础](https://www.jianshu.com/p/0972a0d290e9) [Android矢量图(二)--VectorDrawable所有属性全解析](https://www.jianshu.com/p/89efdbe01ac9) [Android矢量图(三)--VectorDrawable渐变色](https://www.jianshu.com/p/553dfdf4f5c5)