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

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>

现在它正在运行，谢谢你们！

- Gabriela Vasselai

---

可能是重复的问题：如何使用两种颜色创建带状背景？ - user658042

Answer 1

可能重复：使用两种颜色的带状背景？ 其中提供了一个使用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帖子中提取的：按钮上的渐变和阴影

并且使用XML可绘制对象的已接受解决方案：

<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图像，这将是最具资源效益的。

- TryTryAgain

---

我更喜欢使用XML，你提供的解决方案对我很有帮助。谢谢！ - Gabriela Vasselai

Answer 2

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

- Jeremy D

Answer 3

您可以将其作为两个<shape>项的<layer-list>（以获得图像显示的边界）来完成此操作。

- Ted Hopp

---

它使用<layer-list>项内的形状工作。Android文档中缺少<item>可以包含多个<bitmap>的说明。非常感谢！ - Gabriela Vasselai

Answer 4

最适合你想做的是使用九宫格图片。这就是系统按钮的所有背景图都是如何构建的。例如，可以看看这里。

- dmon

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>

然而，文档中提到：

每个角落必须（最初）提供大于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>

- Francesco Vadicamo