Question

我不能用渐变来放大中心色的宽度目标是：

较大的中心有一些颜色，两侧透明。

用法：

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

我尝试了很多与layer-list的组合，但结果并不好。一种解决方案是将布局划分为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属性，直到获得所需内容。

<强>输出

这是drawX预览在centerX处于10％和80％

时的样子

现在，centerX为60％和40％

修改

要在使用match_parent作为layout_width参数的布局中获得相同效果，请将渐变拆分为两个drawable并将其设置为2个不同ImageViews或{{1 }}

<强> left_gradient.xml

FrameLayouts

<强> right_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>

在您的布局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>

与上一个案例一样，调整两个渐变文件的<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>中的值以获得所需的结果

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用渐变放大中心色

2 个答案: