多渐变形状

Question

我想创建一个如下图所示的形状：

注意上半部分从颜色 1 到颜色的渐变2，但有一个从颜色 3 渐变到颜色 4 的下半部分。我知道如何使用单个渐变制作形状，但我不确定如何将形状分成两半并制作具有 2 个不同渐变的 1 个形状。

有什么想法吗？

Answer 1

您可以仅使用 xml 形状来做到这一点 - 只需使用图层列表和负填充，如下所示：

    <layer-list>

        <item>
            <shape>
                <solid android:color="#ffffff" />

                <padding android:top="20dp" />
            </shape>
        </item>

        <item>
            <shape>
                <gradient android:endColor="#ffffff" android:startColor="#efefef" android:type="linear" android:angle="90" />

                <padding android:top="-20dp" />
            </shape>
        </item>

    </layer-list>

Answer 2

尝试这个方法，然后你就可以做你想做的一切。
它就像一个堆栈，所以要小心哪个项目是第一个或最后一个。

<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="50dp" android:start="10dp" android:left="10dp">
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <corners android:radius="3dp" />
        <solid android:color="#012d08"/>
    </shape>
</item>
<item android:top="50dp">
    <shape android:shape="rectangle">
        <solid android:color="#7c4b4b" />
    </shape>
</item>
<item android:top="90dp" android:end="60dp">
    <shape android:shape="rectangle">
        <solid android:color="#e2cc2626" />
    </shape>
</item>
<item android:start="50dp" android:bottom="20dp" android:top="120dp">
    <shape android:shape="rectangle">
        <solid android:color="#360e0e" />
    </shape>
</item>

Answer 3

您是否尝试过将一个渐变与近乎透明的不透明度叠加在另一张图像之上，以不透明的不透明度表示绿色渐变？

Answer 4

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
    android:width="2dp"
    android:color="#AEAEAE"></stroke>
<corners android:radius="0dp" />
<padding
    android:bottom="2dp"
    android:left="5dp"
    android:right="1dp"
    android:top="2dp" />

<gradient
    android:endColor="#3F51B5"
    android:startColor="#2196F3"
    android:type="linear"></gradient>

Answer 5

我认为你不能在 XML 中做到这一点（至少不能在 Android 中），但我发现了一个很好的解决方案 这里看起来会有很大的帮助！

ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
    @Override
    public Shader resize(int width, int height) {
        LinearGradient lg = new LinearGradient(0, 0, width, height,
            new int[]{Color.GREEN, Color.GREEN, Color.WHITE, Color.WHITE},
            new float[]{0,0.5f,.55f,1}, Shader.TileMode.REPEAT);
        return lg;
    }
};

PaintDrawable p=new PaintDrawable();
p.setShape(new RectShape());
p.setShaderFactory(sf);

基本上，int 数组允许您选择多个颜色停止点，以下浮点数组定义这些停止点的位置（从 0 到 1）。然后，如上所述，您可以将其用作标准 Drawable。

编辑：以下是您在场景中如何使用它的方法。假设您有一个在 XML 中定义的按钮，如下所示：

<Button
    android:id="@+id/thebutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Press Me!"
    />

然后您可以在 onCreate() 方法中添加类似的内容：

Button theButton = (Button)findViewById(R.id.thebutton);
ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
    @Override
    public Shader resize(int width, int height) {
        LinearGradient lg = new LinearGradient(0, 0, 0, theButton.getHeight(),
            new int[] { 
                Color.LIGHT_GREEN, 
                Color.WHITE, 
                Color.MID_GREEN, 
                Color.DARK_GREEN }, //substitute the correct colors for these
            new float[] {
                0, 0.45f, 0.55f, 1 },
            Shader.TileMode.REPEAT);
         return lg;
    }
};
PaintDrawable p = new PaintDrawable();
p.setShape(new RectShape());
p.setShaderFactory(sf);
theButton.setBackground((Drawable)p);

我目前无法测试它，这是我脑海中的代码，但基本上只是替换或添加停止以获得您需要的颜色。基本上，在我的示例中，您将从浅绿色开始，在中心之前稍微淡入白色（以提供淡入淡出，而不是粗糙的过渡），从白色淡入 45% 到 55% 之间的中绿色，然后从从 55% 到最后，中绿色到深绿色。这可能看起来与您的形状不完全一样（现在，我无法测试这些颜色），但您可以修改它以复制您的示例。

编辑：此外， 0, 0, 0, theButton.getHeight() 指的是渐变的 x0, y0, x1, y1 坐标。所以基本上，它从 x = 0（左侧）、y = 0（顶部）开始，并延伸到 x = 0（我们需要垂直渐变，因此不需要从左到右的角度），y = 高度按钮的。因此，渐变从按钮顶部到按钮底部呈 90 度角。

编辑：好吧，我还有一个可行的想法，哈哈。现在它可以在 XML 中运行，但也应该可以用于 Java 中的形状。它有点复杂，我想有一种方法可以将其简化为单个形状，但这就是我现在所拥有的：

green_horizo​​ntal_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <corners
        android:radius="3dp"
        />
    <gradient
        android:angle="0"
        android:startColor="#FF63a34a"
        android:endColor="#FF477b36"
        android:type="linear"
        />    
</shape>

half_overlay.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <solid
        android:color="#40000000"
        />
</shape>

layer_list.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <item
        android:drawable="@drawable/green_horizontal_gradient"
        android:id="@+id/green_gradient"
        />
    <item
        android:drawable="@drawable/half_overlay"
        android:id="@+id/half_overlay"
        android:top="50dp"
        />
</layer-list>

test.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    >
    <TextView
        android:id="@+id/image_test"
        android:background="@drawable/layer_list"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:gravity="center"
        android:text="Layer List Drawable!"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        android:textSize="26sp"     
        />
</RelativeLayout>

好的，基本上我已经在 XML 中为水平绿色渐变创建了一个形状渐变，设置为 0 度角，从顶部开始区域的左侧为绿色，右侧为绿色。接下来，我制作了一个半透明灰色的形状矩形。我非常确定可以将其内联到图层列表 XML 中，从而避免这个额外的文件，但我不确定如何实现。但是好吧，那么这种 hacky 部分就出现在 layer_list XML 文件中。我将绿色渐变作为底层，然后将半覆盖作为第二层，与顶部偏移 50dp。显然，您希望这个数字始终是您的视图大小的一半，而不是固定的 50dp。不过，我认为您不能使用百分比。从那里，我只是将 TextView 插入到我的 test.xml 布局中，使用 layer_list.xml 文件作为背景。我将高度设置为 100dp（叠加层偏移大小的两倍），结果如下：

Tada ！

再编辑：我意识到您可以将形状作为项目嵌入到可绘制图层列表中，这意味着您不再需要 3 个单独的 XML 文件！您可以像这样组合它们来获得相同的结果：

layer_list.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <item>
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle"
            >
            <corners
                android:radius="3dp"
                />
            <gradient
                android:angle="0"
                android:startColor="#FF63a34a"
                android:endColor="#FF477b36"
                android:type="linear"
                />    
        </shape>
    </item>
    <item
        android:top="50dp" 
        >
        <shape
            android:shape="rectangle"
            >
            <solid
                android:color="#40000000"
                />
        </shape>            
    </item>
</layer-list>

您可以通过这种方式对任意数量的项目进行分层！我可能会尝试一下，看看是否可以通过 Java 获得更通用的结果。

我认为这是最后一次编辑...：好的，所以你绝对可以通过Java修复定位，如下所示：

    TextView tv = (TextView)findViewById(R.id.image_test);
    LayerDrawable ld = (LayerDrawable)tv.getBackground();
    int topInset = tv.getHeight() / 2 ; //does not work!
    ld.setLayerInset(1, 0, topInset, 0, 0);
    tv.setBackgroundDrawable(ld);

但是！这会导致另一个恼人的问题，即在绘制 TextView 之前您无法测量它。我还不太确定如何完成此操作...但是手动插入 topInset 的数字确实有效。

我撒谎了，再编辑一次

好的，找到了如何手动更新该图层可绘制以匹配容器的高度，可以找到完整的描述此处。这段代码应该放在你的 onCreate() 方法中：

final TextView tv = (TextView)findViewById(R.id.image_test);
        ViewTreeObserver vto = tv.getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                LayerDrawable ld = (LayerDrawable)tv.getBackground();
                ld.setLayerInset(1, 0, tv.getHeight() / 2, 0, 0);
            }
        });

我就完成了！哇！ :)

Answer 6

您可以使用图层列表在 xml 中对渐变形状进行分层。
想象一个具有如下默认状态的按钮，其中第二个项目是半透明的。它增加了一种渐晕效果。 （请原谅自定义颜色。）

<!-- Normal state. -->
<item>
    <layer-list>
        <item>  
            <shape>
                <gradient 
                    android:startColor="@color/grey_light"
                    android:endColor="@color/grey_dark"
                    android:type="linear"
                    android:angle="270"
                    android:centerColor="@color/grey_mediumtodark" />
                <stroke
                    android:width="1dp"
                    android:color="@color/grey_dark" />
                <corners
                    android:radius="5dp" />
            </shape>
        </item>
        <item>  
            <shape>
                <gradient 
                    android:startColor="#00666666"
                    android:endColor="#77666666"
                    android:type="radial"
                    android:gradientRadius="200"
                    android:centerColor="#00666666"
                    android:centerX="0.5"
                    android:centerY="0" />
                <stroke
                    android:width="1dp"
                    android:color="@color/grey_dark" />
                <corners
                    android:radius="5dp" />
            </shape>
        </item>
    </layer-list>
</item>