Android Button

需求：随着按钮的状态去改变它的背景色和背景图片。

这个主要是根据 StateListDrawable 来设置。

介绍：StateListDrawable 是 Drawable 资源的一种，可以根据不同的状态，设置不同的图片效果，关键节点< selector >，我们只需要将 Button 的 background 属性设置为该 drawable 资源即可轻松实现，按下按钮时不同的按钮颜色或背景。
相关属性：

1. drawable：引用的 Drawable 位图
2. state_focused：是否获得焦点
3. state_pressed：控件是否被按下
4. state_enable：控件是否可用
5. state_selected：控件是否被选择，针对有滚轮的情况
6. state_checked：控件是否被勾选
7. state_checkable：控件可否被勾选，eg：checkbox
8. state_window_focused：是否获得窗口焦点
9. state_active：控件是否处于活动状态，eg：slidingTab
10. state_single：控件包含多个子控件时，确定是否只显示第一个子控件
11. state_first：控件包含多个子控件时，确定第一个子控件是否处于显示状态
12. state_middle：控件包含多个子控件时，确定中间一个子控件是否处于显示状态
13. state_last：控件包含多个子控件时，确定最后一个子控件是否处于显示状态

栗子：

1. 随着按钮的状态改变按钮的背景图片。
   操作步骤如下：
   我们新建一个 mybutton 模块，mybutton/src/layout/activity_main.xml 代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:text="我是按钮"
        android:layout_width="200dp"
        android:layout_height="100dp" />
</LinearLayout>

2. 通过新建 Drawable Resource File 文件，创建 btn_selector.xml 文件。如下图所示： image.png

   刚创建的 btn_selector.xml 只有根节点的代码，如下所示：

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

为了实现随着按钮的状态改变按钮的背景图片，我们将 btn_selector.xml 的代码补充如下：

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

我们需要在根节点selector 内添加一个个的 item，这些 item 同样属于 drawable 资源。我们这里创建两个图片，用于区分普通状态下的按钮和被按下状态下的按钮。创建图片的步骤如下所示： image.png

如上面的代码所示，我们创建了 ic_baseline_account_balance_24 作为按钮被按下时显示的图片，ic_baseline_accessibility_24 作为按钮普通状态时显示的图片。补充完这两个 item 之后，这个 drawable resource 文件就能用了。我们回到 mybutton/src/layout/activity_main.xml。
activity_main.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:text="我是按钮"
        android:background="@drawable/btn_selector"
        android:layout_width="200dp"
        android:layout_height="100dp" />
</LinearLayout>

我们将 button 的 background 属性的值赋成我们刚创建的 drawable resource 文件，即"@drawable/btn_selector"。此时我们代码跑起来，当按钮被点击时，就是 balance 图片；普通状态下即是 accessibility 图片。

3. 同样的道理，我们也可以设置按钮的背景色 backgroundTint。新建一个 color 目录，并在 color 目录创建 btn_color_selector.xml Drawable Resource 文件，如下所示： image.png

   btn_color_selector.xml 的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#FFFF0000" android:state_pressed="true"/>
    <item android:color="#FF00FF00" />
</selector>

这样，在 mybutton/src/layout/activity_main.xml Button 的 backgroundTint 属性就可以利用 btn_color_selector.xml 设置背景色了。代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:text="我是按钮"
        android:background="@drawable/btn_selector"
        android:backgroundTint="@color/btn_color_selector"
        android:layout_width="200dp"
        android:layout_height="100dp" />
</LinearLayout>

至此，我们已经掌握随着按钮的状态去改变它的背景色和背景图片。完整的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:text="我是按钮"
        android:background="@drawable/btn_selector"
        android:backgroundTint="@color/btn_color_selector"
        android:layout_width="200dp"
        android:layout_height="100dp" />
</LinearLayout>

以上。感谢阅读！