线性渐变CenterX

Question

我正在尝试为按钮创建透明渐变背景，如下所示：

（起始颜色不是灰色但透明）

但我得到了这个： （白色部分太窄）

这是我的gradient.xml：

<!-- Here centerX does not work -->
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:centerX="30%"
        android:startColor="@android:color/transparent"
        android:endColor="@android:color/white"/>

</shape>

我还尝试添加centerColor，但透明区域变为灰色！

<!-- Here the startColor turns greyish -->
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:centerColor="@android:color/white"
        android:centerX="30%"
        android:endColor="@android:color/white"
        android:startColor="@android:color/transparent" />

</shape>

提前致谢！

Answer 1

如果您需要的只是渐变移动到drawable的左侧，请尝试这样的事情：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="100dp">
        <color android:color="@android:color/white"/>
    </item>
    <item android:width="100dp">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
        <gradient
            android:centerX="30%"
            android:endColor="@android:color/white"
            android:startColor="@android:color/transparent"/>
        </shape>
    </item>
</layer-list>

该图层由两个矩形组成：

1. 白色矩形向右移动了30dp
2. 渐变矩形，宽度为30dp

Answer 2

centerX仅在您设置centerColor时有效。

但是，如果您将中心颜色设置为@android:color/transparent，则渐变从不透明白色变为透明黑色 ，而不是白

@android:color/transparent定义为#00000000，它是透明的黑色而非白色。通常它并不重要，因为颜色无论如何都是透明的，但是在渐变的情况下它会产生黑色。

所以，你需要

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:startColor="#00ffffff"
        android:centerColor="#00ffffff"
        android:endColor="#ffffffff"
        android:centerX="30%" />
</shape>

在这种情况下，渐变中的颜色相同（#ffffff，即白色），但alpha从00变为ff。