Android使用渐变放大中心颜色 [英] Android enlarge center color with gradient

问题描述

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

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

用法:

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

我尝试了许多与layer-list的组合，但效果并不理想.一种解决方案是将布局"划分为50％-50％，然后将第一个渐变从左到右(从透明到彩色)设置为第二个从右到左(从彩色到透明)，但是这种解决方案对我来说似乎很复杂. >

例如，此生成器无法放大中心黄色. (有Android XML代码生成器.)

有没有更简单的解决方案?谢谢.

API21 +

解决方案

我希望这是您的初衷.我正在使用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中的值以获得所需的结果

I can not enlarge the width of a centeral color with a gradient.
The goal is:

Larger center with some color, and transparent on sides.

Usage:

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

I tried many combinations with layer-list, but the result was not nice. One solution can be divide Layout to 50%-50% and set the first gradient from left to right (from transparent to color) and second right to left (from color to transparent), but this solution seems very complicated to me.

For example, this generator cannot enlarge the center yellow color. (There is Android XML code generator.)

Any simpler solution? Thank you.

API21+

解决方案

I hope this is what you had in mind. I am using layer-list. I have used "@color/colorAccent" for either end. Change it to "#0FFF" to get a transparent color, which was required in the question.

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

Play around with the android:centerX attributes till you get what you want.

OUTPUT

This is what the drawable preview looks like with centerX at 10% and 80%

now with centerX at 60% and 40%

EDIT

To get the same effect in a layout that uses match_parent as the layout_width parameter, split the gradient into two drawables and set it as background for 2 different ImageViews or 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>

In your Layout xml file

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

Like with the previous case, tweak around with the values in android:centerX of both the gradient files to get the desired result

这篇关于Android使用渐变放大中心颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！