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 参数的布局中获得相同的效果，请将渐变拆分为两个可绘制对象并将其设置为 2 个不同 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 中的值以获得所需的结果

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>

Android 用渐变放大中心颜色

Android enlarge center color with gradient

android

android-layout

android-drawable