制作一个不那么僵硬的Button经验总结

制作一个不那么僵硬的Button经验总结

一、背景

众所周知，安卓控件原本的Button虽然可以用，但是非常的不美观，在绝大多数情况下，我们见到的app都会去自定义一个符合整体设计的Button样式。

二、可行的方案

在网上寻找以后以及自己摸索以后，我得到了以下几个方案。

1.使用Button控件+foregound/background：背景图（jpg/png)

这是我初学时使用的方式，这个方案是最简单的，但也是最简陋的，实际效果不是很好。在按下按键后没有任何反馈或按下的效果（非常僵硬）。所以这当然不是我们最佳的Button实现方式。

<Button
        android:text="确定"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:id="@+id/button_ok_location"
        android:background="@drawable/button_custom"/>

这里对foreground、src、background属性补充一下：

foreground 也就是前景色，它与background相对应，顾名思义，它指定的drawable是在view视图的上方绘制的，background与之相反，在view视图的下方绘制。

而src和background区别在于background设置的是真正的背景，src设置的是图片内容，即前景，例如在ImageView控件中，如果同时对ImageView设置这两个属性，src会遮盖住background。

2.使用Button控件+background：背景文件（xml）

这个方案比上一个好一些，可以解决大多数界面中的Button的按下效果，如界面中主要按键、FragmentHost按键等，但不适合于无背景的按钮，如ToolBar上的按键。

首先,先在drawable文件夹下建立一个button_press.xml文件

button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/button_press" android:state_enabled="true"
                android:state_pressed="true"/>
        <item android:drawable="@drawable/button_nopress" android:state_enabled="true"
                android:state_pressed="false"/>
        <item android:drawable="@drawable/button_false" android:state_enabled="false"/>
</selector>

这个布局文件设置在未按下、按下、未启用情况下时按键的对应背景文件。

button_nopress.xml

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

这个布局文件中设置未按下button时的样式，按下、未启用情况同理，不再贴出。 最后我们只需要在button布局文件中添加一行

        android:background="@drawable/button_custom"

3.使用ImageView控件+background:点击效果+src:背景图(jpg/png)

这种方案针对Toolbar上的按钮。

首先，之所以会使用ImageView而不是Button,是因为在button中无论怎样设置都不能做到实现点击效果。所以，我们在代码中这样实现:

<ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:id="@+id/add_button"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:src="@drawable/add"/>

通过src设置按钮图片,然后background设置点击效果,有两种可选

?android:attr/selectableItemBackground 指定有界的波纹

或

?android:attr/selectableItemBackgroundBorderless 指定越界的波纹

这里我们的button为Toolbar上的按钮,设置无边框波纹会更加好看。

三、总结

使用最后的第三种方法的效果最好，基本上能比较优雅地实现项目中的需求。