Android矢量图(三)--VectorDrawable渐变色

Android矢量图(一)--VectorDrawable基础和Android矢量图(二)--VectorDrawable所有属性全解析这两篇文章把VectorDrawable的基础及其所有属性都介绍了，应该可以很优雅地使用VectorDrawable了，本文主要讨论如何使用VectorDrawable支持渐变色。

Android Nougat之前的VectorDrawable不支持渐变色，如果要使用渐变色就要使用png图片或者自定义GradientDrawable。可喜的是API 24中的VectorDrawable支持了gradient，不过在API < 24的设备上没法兼容gradient，否则运行时crash：Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #0: invalid drawable tag vector，目前我还没找到兼容办法，文件只能放在drawable-v24目录下。

传统的GradientDrawable分为linear、radial、sweep三类，那么本文也分为这三类进行讨论。

linear

加入gradient很简单，直接上代码：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:aapt="http://schemas.android.com/aapt"
        android:width="96dp"
        android:height="96dp"
        android:viewportHeight="100"
        android:viewportWidth="100">
    <path
        android:pathData="M1,1 H99 V99 H1Z"
        android:strokeColor="#000000"
        android:strokeWidth="2">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endColor="#009944"
                android:startColor="#b9b202"
                android:startX="50"
                android:endX="50"
                android:startY="1"
                android:endY="99"
                android:type="linear">
            </gradient>
        </aapt:attr>
    </path>
</vector>

只需要在path标签下新建一个子标签aapt:attr，name为fillColor，而aapt:attr里面的是gradient标签，这里的gradient和传统的gradient很类似。对于linear渐变色，我们就可以看到只定义了7个属性：android:startColor、android:endColor、android:startX、android:endX、android:startY、android:endY、android:type。AS(android studio)的预览图如图1所示。

图1: linear

上面代码只能定义start和end两种颜色，还有另一种写法，可以定义多种颜色，实现酷炫的效果。
我们可以使用item标签来定义渐变的区域块，每两个item标签之间表示一个渐变区域块，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:aapt="http://schemas.android.com/aapt"
        android:width="96dp"
        android:height="96dp"
        android:viewportHeight="100"
        android:viewportWidth="100">
    <path
        android:pathData="M1,1 H99 V99 H1Z"
        android:strokeColor="#000000"
        android:strokeWidth="2">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endColor="#009944"
                android:startColor="#b9b202"
                android:startX="50"
                android:endX="50"
                android:startY="1"
                android:endY="99"
                android:type="linear">
                <item
                    android:color="#b99b5b"
                    android:offset="0.0" />
                <item
                    android:color="#39bdcc"
                    android:offset="0.8" />
                <item
                    android:color="#9b3e00"
                    android:offset="1.0" />
            </gradient>
        </aapt:attr>
    </path>
</vector>

上面代码将图片分为2部分，前80%部分是一个独立的渐变区域块，后20%部分是另一个渐变的区域块，AS的预览图如图2所示。 图2

值得注意的是传统的linear类型的gradient有个angle的属性表示渐变方向，默认0表示从左向右渐变，90表示从下向上，这里的gradient没有angle属性，怎么决定渐变方向呢？其实android:startX、android:endX、android:startY、android:endY这四个属性已经决定了渐变方向。借助group标签的rotation的属性也可以实现，不懂group标签的话可以看下这篇文章：Android矢量图(一)--VectorDrawable基础。

radial

radial也很简单，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:aapt="http://schemas.android.com/aapt"
        android:width="96dp"
        android:height="96dp"
        android:viewportHeight="100"
        android:viewportWidth="100">
    <path
        android:pathData="M1,1 H99 V99 H1Z"
        android:strokeColor="#000000"
        android:strokeWidth="2">
        <aapt:attr name="android:fillColor">
            <gradient
                android:endColor="#009944"
                android:startColor="#b9b202"
                android:gradientRadius="50"
                android:centerX="50"
                android:centerY="50"
                android:type="radial">
                <item
                    android:color="#b9b202"
                    android:offset="0.0" />
                <item
                    android:color="#39bdcc"
                    android:offset="0.2" />
                <item
                    android:color="#b99b5b"
                    android:offset="0.4" />
                <item
                    android:color="#009944"
                    android:offset="1.0" />
            </gradient>
        </aapt:attr>
    </path>
</vector>

可以看到我们只定义了android:endColor、android:startColor、android:gradientRadius、android:centerX、android:centerY、android:type6个属性，其实如果使用item标签的话，startColor和endColor这两个属性完全是多余的，AS的预览图如图3所示。

图3

sweep

sweep也很简单，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:aapt="http://schemas.android.com/aapt"
        android:width="96dp"
        android:height="96dp"
        android:viewportHeight="100"
        android:viewportWidth="100">
    <path
        android:pathData="M1,1 H99 V99 H1Z"
        android:strokeColor="#000000"
        android:strokeWidth="2">
        <aapt:attr name="android:fillColor">
            <gradient
                android:centerX="50"
                android:centerY="50"
                android:type="sweep">
                <item
                    android:color="#b9b202"
                    android:offset="0.0" />
                <item
                    android:color="#39bdcc"
                    android:offset="0.2" />
                <item
                    android:color="#b99b5b"
                    android:offset="0.4" />
                <item
                    android:color="#009944"
                    android:offset="1.0" />
            </gradient>
        </aapt:attr>
    </path>
</vector>

我们只定义了android:centerX、android:centerY、android:type三个属性。AS的预览图如图4所示。

图4

可以看到预览图4出现了问题，代码中我们明明把扫描中心定义在了虚拟空间的中心位置，但是预览图的扫描点确是位于左上角。我写这篇文章的时候用的AS版本是3.0.1 stable channel，这估计是android studio渲染的bug吧。

运行代码，在手机上的渲染效果如图5所示，可以看到，一切正常了。 图5

---

匆匆写完了，有错误的地方欢迎留言指出。