Android使用渐变放大中心颜色

Question

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

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

用法：

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

我尝试了多种组合layer-list，但效果并不理想。一种解决方案是将Layout划分为50％-50％，然后将第一个渐变从左到右（从透明到彩色）设置为第二个从右到左（从彩色到透明），但是这种解决方案对我来说似乎非常复杂。

例如，此生成器无法放大中间的黄色。（有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两个渐变文件中的值以获得所需的结果