Question

我想在Android上使用两种背景颜色制作按钮样式，例如下图：

http://i.stack.imgur.com/ExKXl.png

是否可以使用可绘制资源？我正在http://developer.android.com/guide/topics/resources/drawable-resource.html上搜索解决方案，但没有一种可以有两种颜色。

有办法吗？

[编辑答案]

解决方案是创建一个包含项目的<layer-list>，每个<item>都有一个<shape>。代码如下（整个按钮的高度为32dp，因此我使用了每种颜色的半高）：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- Top color -->
    <item android:bottom="16dp">
        <shape android:shape="rectangle">
            <solid android:color="#FF0000" /> <!-- RED -->
        </shape>
    </item>

    <!-- Bottom color -->
    <item android:top="16dp">
        <shape android:shape="rectangle">
            <solid android:color="#00FF00" /> <!-- GREEN -->
        </shape>
    </item>
</layer-list>

但我有另一个问题，我试图在每个形状上设置角落。我尝试将android:topLeftRadius和android:topRightRadius放在第一个形状上，android:bottomLeftRadius和android:bottomRightRadius放在第二个形状上，但它没有向我显示角落！因此，解决方案是使用android:radius（所有8个角落变得圆润，该死！）然后再放两个项目来克服额外的角落。最后，XML就是这样：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- Top color with corner -->
    <item android:bottom="16dp">
        <shape android:shape="rectangle">
            <corners android:radius="5dp" /> <!-- It´s obligatory, It didn´t work only with android:topLeftRadius and android:topRightRadius -->
            <solid android:color="#FF0000" /> <!-- RED Color-->
        </shape>
    </item>

    <!-- Takes off the center corner -->
    <item android:top="8dp" android:bottom="8dp">
        <shape android:shape="rectangle">
            <solid android:color="#FF0000" /> <!-- RED Color-->
        </shape>
    </item>

    <!-- Bottom color with corner -->
    <item android:top="16dp">
        <shape android:shape="rectangle">
            <corners android:radius="5dp" /> <!-- It´s obligatory, It didn´t work only with android:bottomLeftRadius and android:bottomRightRadius -->
            <solid android:color="#00FF00" /> <!--  GREEN Color -->
        </shape>
    </item>

    <!-- Takes off the center corner -->
    <item android:top="16dp" android:bottom="8dp">
        <shape android:shape="rectangle">
            <solid android:color="#00FF00" /> <!--  GREEN Color -->
        </shape>
    </item>

</layer-list>

现在正在工作，谢谢大家！

Answer 1

可能重复：banded background with two colors?

使用Java提供的答案：

Bitmap bmResult = Bitmap.createBitmap(buttonWidth, buttonHeight, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bmResult); 
    Paint paint = new Paint();
    paint.setShader(new LinearGradient (0, 0, 0, bmResult.getHeight()/2, 0xFF284560, 0xFF284060, TileMode.MIRROR));
    canvas.drawPaint(paint);
    paint.setShader(new LinearGradient (0, 0, 0, bmResult.getHeight()/2, 0x55FFFFFF, 0x22FFFFFF, TileMode.CLAMP));
    paint.setMaskFilter(new BlurMaskFilter(3, BlurMaskFilter.Blur.NORMAL));
    canvas.drawRect(0, 0, bmResult.getWidth(), bmResult.getHeight()/2, paint)

从同一主题的另一篇SO帖子中解除了：Gradients and shadows on buttons

使用XML drawable接受的解决方案：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:bottom="20dp">
        <shape android:shape="rectangle" >
            <size android:height="20dp" />
            <solid android:color="#ff0000" />
        </shape>
    </item>

    <item android:top="20dp">
        <shape android:shape="rectangle" >
            <size android:height="20dp" />
            <solid android:color="#0000ff" />
        </shape>
    </item>
</layer-list>

正如其他人所说：

您可以创建一个最有资源的9patch image。

Answer 2

我认为最简单的方法是使用绘图软件创建背景。

Answer 3

您可以将此作为<layer-list>两个<shape>项目（以获取图片显示的边界）。

Answer 4

最适合您想要做的是使用nine patch image。这就是系统按钮的所有背景都是如何构建的。例如，请参阅this。

Answer 5

看看Shape和GradientDrawable！

这对我有用：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:bottom="16dp">
        <shape android:shape="rectangle" >
            <corners 
                android:topLeftRadius="5dp"
                android:topRightRadius="5dp"/>
            <size android:height="16dp" />
            <solid android:color="#f00" /> <!-- RED -->
        </shape>
    </item>

    <item android:top="16dp">
        <shape android:shape="rectangle" >
            <corners 
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"/>
            <size android:height="16dp" />
            <solid android:color="#f0f0" /> <!-- GREEN -->
        </shape>
    </item>
</layer-list>

然而，documentation说：

每个角必须（最初）提供大于的角半径 1，否则没有角落是圆的。如果你想要特定的角落四舍五入，解决方法是使用android:radius来设置默认值转角半径大于1，但随后覆盖每个角落使用您真正想要的值，在您所在的位置提供零（“0dp”）不想要圆角。

所以试试这个：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:bottom="16dp">
        <shape android:shape="rectangle" >
            <corners 
                android:radius="5dp"
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"/>
            <size android:height="16dp" />
            <solid android:color="#f00" /> <!-- RED -->
        </shape>
    </item>

    <item android:top="16dp">
        <shape android:shape="rectangle" >
            <corners 
                android:radius="5dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp"/>
            <size android:height="16dp" />
            <solid android:color="#f0f0" /> <!-- GREEN -->
        </shape>
    </item>
</layer-list>

Android：带有两种背景颜色的按钮

5 个答案: