如何设置2种颜色的边框按钮答案

【问题标题】：how to set border button with 2 colors如何设置2种颜色的边框按钮
【发布时间】：2018-04-13 01:48:31
【问题描述】：

我正在尝试使用两种颜色 white 和 black 为 Button 创建边框。所以我决定创建一个形状。我试图用白色和黑色添加渐变我的代码不起作用

我想要这样的边框：

我的 xml：

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

    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="360"
                android:centerColor="#000000"
                android:endColor="#bfbfbf"
                android:gradientRadius="360"
                android:startColor="#ffffff"
                android:type="sweep" />

            <stroke
                android:width="2dp"
                android:color="#ffffff" />
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp">
        <shape android:shape="rectangle" >
            <solid android:color="#d2d2d2" />
        </shape>
    </item>

</layer-list>

和按钮：

<Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="OK"
            android:background="@drawable/border"
            android:layout_alignBottom="@+id/progress"
            android:layout_centerHorizontal="true"
            android:id="@+id/okbtn" />

【问题讨论】：

标签： android xml button colors border

【解决方案1】：

button_background.xml

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

    <item>
        <shape android:shape="rectangle">
            <stroke
                android:width="@dimen/stroke_width_outer"
                android:color="#000" />
        </shape>
    </item>

    <item
        android:bottom="@dimen/stroke_width_outer"
        android:right="@dimen/stroke_width_outer">
        <shape android:shape="rectangle">
            <stroke
                android:width="@dimen/stroke_width_outer"
                android:color="#FFF" />
        </shape>
    </item>

    <item
        android:bottom="@dimen/stroke_width_outer"
        android:left="@dimen/stroke_width_outer"
        android:right="@dimen/stroke_width_outer"
        android:top="@dimen/stroke_width_outer">
        <shape android:shape="rectangle">
            <stroke
                android:width="@dimen/stroke_width_outer"
                android:color="#7F7F7F" />
        </shape>
    </item>

    <item
        android:bottom="@dimen/stroke_width_inner"
        android:left="@dimen/stroke_width_outer"
        android:right="@dimen/stroke_width_inner"
        android:top="@dimen/stroke_width_outer">
        <shape android:shape="rectangle">
            <stroke
                android:width="@dimen/stroke_width_outer"
                android:color="#DFDFDF" />
        </shape>
    </item>

    <item
        android:bottom="@dimen/stroke_width_inner"
        android:left="@dimen/stroke_width_inner"
        android:right="@dimen/stroke_width_inner"
        android:top="@dimen/stroke_width_inner">
        <shape android:shape="rectangle">
            <solid android:color="#BFBFBF" />
        </shape>
    </item>

</layer-list>

值/dimen.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="stroke_width_outer">3dp</dimen>
    <dimen name="stroke_width_inner">6dp</dimen>
</resources>

stroke_width_inner 应该是 stroke_width_outer 的两倍

为按钮应用背景 -

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"
    android:text="OK"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

在布局编辑器上 -

在设备上 -

在设备上，您不会像在布局编辑器上看到的那样看到灰色的左边框和上边框

【讨论】：

【解决方案2】：

这似乎是使用9-patch image 的好地方。任何基于常规 .png 文件、<shape> 或 <vector> 的解决方案最终都会缩放按钮的白色和黑色边框。

创建button.9.png 文件后，您可以使用android:background="@drawable/button" 将其设置为按钮的背景。

编辑

这是一个基于您链接的.png 文件的 9 补丁：

【讨论】：

【解决方案3】：

请看这里关于创建可绘制形状http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

完成此操作后，在您的按钮集的 XML 中 android:background="@drawable/your_button_border"

【讨论】：