Button自定义样式、水波纹、按压效果详解

默认按钮样式

按钮用Button按钮的时候我们会发现，默认的按钮虽然是灰色的，但是它却有一个体验感不错的按压效果，如下图

Background设置颜色

当我们设置按钮 android:background="#2196F3" 属性填入颜色时，会发现，这时按钮颜色虽然比之前默认的灰色好看了些，但是点击时的按钮和你的交互貌似就没那么好了，只能轻微地感觉到好像有那么一点小阴影出现，所以这也不是我们想要的效果

Background设置Drawable文件

设置颜色、圆角

这里我们先在 res 目录下的 drawable 下新建一个Drawable文件 btn_bg.xml ，那么我们现在里面写点东西

1. 我们在drawable文件自动生成的 selector 根标签内，新建了一个 item 便签（selector中只能新建这个）
2. 然后在 item 标签中新建 shape 标签，也就是形状标签，这里我们先不对 shape 标签内进行任何设置
3. 在 shape 标签内 新建 solid（颜色） 便签 和 corners（圆角） 标签

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item>
        <shape>
            <solid android:color="@color/colorPrimary"/>
            <corners android:radius="8dp"/>
        </shape>
    </item>

</selector>

那我们把这个背景用到Button上

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:background="@drawable/btn_bg"
        android:text="设置Drawable文件" />

效果如图，可以看到这里我们的按钮又变好看了一点（有颜色、有圆角），但是交互感还是不好

设置按压效果

当你需要按压效果或者选中效果的时候，selector标签的作用就体现出来了

• selector 下新建两个 item
• item 设置 android:state_pressed="" 属性，这里面传入 true 或 false，代表一个是按压时的样子，一个是正常显示的样子（所以这里你就可以天马行空了，下文有拓展）
• 你在两个 item 中设置不同的颜色或者样式，应用到 Button 上时，就会有一个按压效果

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

    <item android:state_pressed="false">
        <shape>
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="8dp" />
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/colorAccent" />
            <corners android:radius="8dp" />
        </shape>
    </item>

</selector>

这里可以看到，正常情况下是一个绿色，当我们点击按钮的时候，按钮变成了红色

拓展

水波纹效果

可能有的小伙伴就会说，我就是喜欢那个默认的水波纹效果，那好，满足你的小愿望

只需要在你的Button下加上一条前景色 android:foreground="?selectableItemBackground" 属性即可（问号别丢了），这样你可以设置按钮的背景色，或者按压效果（一起用不明显），再加上这个水波纹效果

Tip：这条属性在View上是有效的，所以说，几乎所有的控件都有这条属性，你甚至可以加在 LinearLayout上。

 <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:background="#2196F3"
        android:foreground="?selectableItemBackground"
        android:text="设置有水波纹效果" />

shape 标签

先看一个效果图，是不是觉得还挺炫酷？

这就是我之前在上文按压效果说的，你可以设置成点击改变形状，话不多说，直接上代码

这里相对于之前的按压变色的那个drawable文件只在第二个item下的shape标签里，加了一条：android:shape=“oval” （圆），然后再了个 size （大小）标签

这里也简单的说一下 shape （形状）属性，具体使用还是需要自己去学习，这里只简单提一下

• oval 圆形
• rectangle 方形
• line 线
• ring 环状

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

    <item android:state_pressed="false">
        <shape>
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="8dp" />
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape android:shape="oval">
            <size android:width="10dp" android:height="10dp" />
            <solid android:color="@color/colorAccent" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    
</selector>

如果觉得文章还不错，点个赞呗！