Android 多梯度形状

我想创建一个类似下图的形状：

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

---

有什么想法吗？

你有没有尝试过用一个几乎透明的不透明度覆盖另一个图像上的高光，用一个不透明的不透明度覆盖另一个图像上的绿色渐变？

我认为你不能用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）。如前所述，您可以将其用作标准绘图工具

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

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

我现在无法测试这个，这是我头脑中的代码，但基本上只是替换，或者为您需要的颜色添加停止。基本上，在我的示例中，您将从浅绿色开始，在中心之前稍微淡入白色（以进行淡入，而不是剧烈的过渡），从白色淡入中绿色45%到55%，然后从中绿色淡入深绿色55%到最后。这可能与您的形状不完全相同（目前，我无法测试这些颜色），但您可以修改它以复制您的示例

编辑：另外，

0,0,0，theButton.getHeight（）

引用渐变的x0,y0,x1,y1坐标。基本上，它从x=0（左侧），y=0（顶部）开始，然后延伸到x=0（我们需要一个垂直梯度，所以不需要从左到右的角度），y=按钮的高度。因此，从按钮顶部到按钮底部的梯度成90度角

编辑：好吧，我还有一个想法很管用，哈哈。现在它可以在XML中工作，但也可以在Java中用于形状。它有点复杂，我想有一种方法可以把它简化成一个单一的形状，但这就是我现在得到的：

green\u horizontal\u 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>

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

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

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

然而！这导致了另一个恼人的问题，即在绘制TextView之前无法测量它。我还不太确定如何才能做到这一点……但手动为topInset插入一个数字确实有效

我撒谎了，再编辑一次

好的，了解如何手动更新此层drawable以匹配容器的高度，可以找到完整的描述。此代码应该放在onCreate（）方法中：

---

我完了！哟！：）

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

---

您可以仅使用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>

---

试试这个方法，然后你可以做任何你想做的事情
它就像一个堆栈，所以要小心哪个项目是第一个还是最后一个。

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

---

没有，不过我不太确定如何将一个渐变放置在另一个渐变的形状上。我正在使用android:background=“@drawable/myshape”将该形状用作线性布局的背景。是否可以将两个具有不同不透明性的形状层叠在一起？（我不知道。）问题是梯度是垂直的。我需要的形状垂直分离（即：水平线），但我需要的梯度是水平的（即：从左向右移动）。在这个例子中，分离器和梯度都是垂直的。哦，好的，我明白你现在说的。（图像在工作时被屏蔽，因此我只能从手机上查看您的图像，很难说清楚细节）。不幸的是，我现在还没有一个解决方案，尽管我假设你可以创建一个有两个矩形的可绘制形状，一个是水平渐变，一个是白色到黑色的垂直渐变，一半是大小，一半是不透明，与底部对齐。至于如何做到这一点，我目前还没有任何具体的例子。是的，这就是我希望能够做到的，但我只是还没有弄清楚。我非常感谢你的帮助不客气！我又试了一次，我想我基本上得到了你想要的东西。您可能需要通过Java（根据注释）动态地进行这些操作，但这在固定大小的情况下就可以了。这是您希望给出的答案，至少+10。我喜欢你回答中的战斗感：你对Android API，谁会赢？我们会知道吗？；）另外，它是非常有用的学习材料，因为你保留了所有你遇到的怪癖。另请参见

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);
            }
        });

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

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

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