Button的几种常用的xml背景，扁平化，下划线，边框包裹，以及按压效果

Button的几种常用的xml背景，扁平化，下划线，边框包裹，以及按压效果

分享下我项目中用到的几种Button的效果，说实话，还真挺好看的

一.标准圆角

效果是这样的

他的实现很简单，我们只需要两个参数，一个圆角的大小，一个颜色

standard_button_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--圆角-->
    <corners android:radius="30dp"/>
    <!--颜色-->
    <solid android:color="@color/colorPrimary"/>
</shape>

二.下划线

下划线出现的地方就事一些任务选中上，比如TabLayout就有，效果如下

这个实现使用图层来做的

underline_button_bg

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 边框颜色值 -->
    <item>
        <shape>
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
    <!-- 主体背景颜色值 -->
    <item android:bottom="2dp">
        <shape>
            <solid android:color="#ffffff"/>
            <padding
                android:bottom="10dp"
                android:left="10dp"
                android:right="10dp"
                android:top="10dp"/>
        </shape>
    </item>
</layer-list>

两个图层，一个就一根线，一个是全背景就形成了

三.边框包裹

这个效果个人觉得用的很多，因为很好看，如下

他的实现非常简单，和我们标准的圆角有点类似

parcel_button_bg

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--圆角-->
    <corners android:radius="30dp"/>
    <!--中间颜色-->
    <solid android:color="@android:color/white"/>
    <!--边框/颜色-->
    <stroke
        android:width="2dp"
        android:color="@color/colorAccent"/>
</shape>

只要注意下width的值就好了

四.点击效果

点击效果算是百搭了，这里注意他的思想，你只有了解了他的原理，你就可以把他运用在任何一个button上了，看效果

onclick_button_bg

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

    <!--点击后-->
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@android:color/darker_gray"/>
            <corners android:radius="30dp"/>
        </shape>
    </item>

    <!--默认-->
    <item android:state_pressed="false">
        <shape>
            <solid android:color="@color/colorAccent"/>
            <corners android:radius="30dp"/>
        </shape>
    </item>

</selector>

他的实现很好理解，两个item的选中值相反，其他的，就是标准的shape圆角了

这里只是简单的概括，实际上你掌握了这四个，其他按钮的效果多多少少是能实现出来的，别担心，直接干

有兴趣的可以加入我的骚包群：555974449