Android用渐变放大中心颜色

Question

我无法使用渐变放大中心颜色的宽度。
目标是：

较大的中心，带有一些颜色，侧面是透明的。

用法：

<ImageView
    android:layout_width="match_parent"
    android:layout_height="5dp"
    android:src="@drawable/gradient_normal"/>

我尝试了很多与layer-list 的组合，但结果并不好。一种解决方案可以将 Layout 划分为 50%-50% 并设置第一个渐变从左到右（从透明到颜色）和第二个从右到左（从颜色到透明），但是这个解决方案对我来说似乎很复杂。

例如，这个generator 不能放大中心黄色。 （有 Android XML 代码生成器。）

有更简单的解决方案吗？谢谢。

API21+

Answer 1

我希望这是你的想法。我正在使用layer-list。我在任一端都使用了"@color/colorAccent"。将其更改为"#0FFF" 以获得透明颜色，这是问题中所要求的。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="50dp">
        <shape android:shape="rectangle">
            <gradient
                android:startColor="@color/colorPrimary"
                android:endColor="@color/colorAccent"
                android:centerColor="@color/colorPrimary"
                android:centerX="10%"/>
            <size
                android:height="100dp"
                android:width="50dp"/>
        </shape>
    </item>
    <item
        android:right="50dp">
        <shape android:shape="rectangle">
            <gradient
                android:startColor="@color/colorAccent"
                android:endColor="@color/colorPrimary"
                android:centerColor="@color/colorPrimary"
                android:centerX="80%"/>
            <size
                android:height="100dp"
                android:width="50dp"/>
        </shape>
    </item>
</layer-list>

玩转android:centerX 属性，直到你得到你想要的。

输出

这是 centerX 在 10% 和 80% 时可绘制预览的样子

现在 centerX 分别为 60% 和 40%

编辑

要在使用match_parent 作为layout_width 参数的布局中获得相同的效果，请将渐变分成两个可绘制对象并将其设置为两个不同ImageViews 或FrameLayouts 的背景

left_gradient.xml

<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#0FFF"
        android:centerColor="#000"
        android:centerX="50%"
        android:endColor="#000"/>
</shape>

right_gradient.xml

<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#000"
        android:centerColor="#000"
        android:centerX="50%"
        android:endColor="#0FFF"/>
</shape>

在您的 Layout xml 文件中

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="15dp"
    android:baselineAligned="false">
    <FrameLayout
        android:layout_width="0dp"
        android:background="@drawable/left_gradient"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
    <FrameLayout
        android:layout_width="0dp"
        android:background="@drawable/right_gradient"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
</LinearLayout>

与上一个案例一样，调整两个渐变文件的 android:centerX 中的值以获得所需的结果

Answer 2

对于仍在寻找答案的人...

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:centerColor="@android:color/transparent"
                android:centerY="0.8"
                android:endColor="#60000000"
                android:startColor="@android:color/transparent" />
        </shape>
    </item>

    <item>
        <shape>
            <gradient
                android:angle="90"
                android:centerColor="@android:color/transparent"
                android:centerY="0.2"
                android:endColor="@android:color/transparent"
                android:startColor="#60000000" />
        </shape>
    </item>
</layer-list>