Android渐变放大中心颜色

Question

我无法扩大中心渐变色的宽度。
目标是：

中心较大，有一定的颜色，并在两侧透明。

用法：

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

我尝试了许多layer-list的组合，但结果并不理想。一个解决方案可以是将布局分成50％-50％并将第一个渐变从左到右设置（从透明到颜色），第二个渐变从右到左设置（从颜色到透明），但我认为这种解决方案似乎非常复杂。

例如，这个生成器无法放大中心的黄色颜色。（有Android XML代码生成器。）

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

API21+

- t0m

---

你有没有考虑过在Android上使用高度为1行，具有渐变侧边和透明中心的9-patch png图片呢？再结合后期Android API上的“色调颜色”（我认为色调在19+版本上可靠地工作（约占95％的设备）），你就可以产生任何颜色组合。关于正确的渐变drawable：也许你应该发布一些核心布局的框架，这样别人就可以更好地猜测将其更改为约束布局的难度，或者在下面添加列表作为背景。此外，如果您不想使用约束布局，请提前警告。 - Ped7g

使用ShapeDrawable.ShaderFactory并从resize(int width, int height)方法返回LinearGradient。 - pskink

你尝试过我发布的答案吗？如果那不是你心中的解决方案，请告诉我。 - Ajil O.

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>

在你的布局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 的值以获得所需的结果。

- Ajil O.

---

感谢您的帖子。我想让整个“layer-list”的宽度与“match_parent”相匹配。我在“ImageView”中使用“layer-list”，其中有“android:layout_width =”match_parent“”和“android:layout_height = 5dp”。 - t0m

@t0m 我已经更新了我的答案以适应你的需求。如果这不起作用，请回复我。 - Ajil O.

谢谢。我之前提到了同样的解决方案：“一种解决方案是将布局分为50%-50%，并将第一个渐变从左到右设置（从透明到颜色），第二个从右到左（从颜色到透明）”。我接受你的答案，因为有很好的示例代码。 - t0m

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>

- Abhishek Dharmik