android 双边框按钮

bvhaajcl  于 2023-06-20  发布在  Android
关注(0)|答案(3)|浏览(113)

是否可以使用AppCompat或Material Design库创建这样的按钮?这样的按钮有什么样式吗?如果没有,那么实施的最佳方式是什么?

cnwbcb6i

cnwbcb6i1#

你可以使用图层列表

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

     // outer rectangle
        <item>
            <shape android:shape="rectangle">

                <corners android:radius="10dp" />

                <solid android:color="@color/colorWhite" />

                <stroke
                    android:width="1dp"
                    android:color="@color/colorBlack" />

            </shape>
        </item>

    // inside rectangle

        <item
            android:bottom="10dp"
            android:left="10dp"
            android:right="10dp"
            android:top="10dp">

            <shape android:shape="rectangle">

                <corners android:radius="10dp" />

                <solid android:color="@color/colorWhite" />

                <stroke
                    android:width="1dp"
                    android:color="@color/colorAccent" />

            </shape>

        </item>

    </layer-list>
sqyvllje

sqyvllje2#

使用**layer-list**尝试这种方法

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--  the first <item> is used to set border to this drawable  -->
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
            <solid android:color="#E91E63" />
            <corners android:radius="10dp"/>
        </shape>
    </item>
    <!--  the second <item> is used to add some space between border and inner
      rectangle object -->
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="3dp"
                android:top="3dp" />
            <solid android:color="@android:color/black" />
            <corners android:radius="10dp"/>
        </shape>
    </item>
    <!--  the third <item> inner
          rectangle object in drawable-->
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp" />
            <solid android:color="#03A9F4" />
            <corners android:radius="10dp"/>
        </shape>
    </item>

</layer-list>

输出

0lvr5msh

0lvr5msh3#

下面是您可以用来创建此背景的button_bg.xml文件:

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

            <padding android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp"/>

            <solid android:color="#000000"/>

        </shape>
    </item>
    <item >
        <shape android:shape="rectangle">

            <padding android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp"/>

            <solid android:color="#3895d3"/>

            <corners android:bottomRightRadius="7dp"
                android:bottomLeftRadius="7dp"
                android:topLeftRadius="7dp"
                android:topRightRadius="7dp" />

        </shape>
    </item>
    <item >
        <shape android:shape="rectangle">

            <padding android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp"/>

            <solid android:color="#000000"/>

            <corners android:bottomRightRadius="7dp"
                android:bottomLeftRadius="7dp"
                android:topLeftRadius="7dp"
                android:topRightRadius="7dp" />

        </shape>
    </item>
    <item >
        <shape android:shape="rectangle">
            <solid android:color="#3895d3"/>

            <corners android:bottomRightRadius="7dp"
                android:bottomLeftRadius="7dp"
                android:topLeftRadius="7dp"
                android:topRightRadius="7dp" />

        </shape>
    </item>
</layer-list>

以下是预览图像:

相关问题