按钮 Button/ImageButton

优质

小牛编辑

126浏览

2023-12-01

在前面两章我们讲了 TextView，它是一个纯输出的控件；而 EditText 在 TextView 基础之上加入了简单的输入功能；今天要讲的 Button 是一个和用户互动感很强的控件，从今往后不再是单纯的文本展示，我们可以通过 TextView、EditText 再加上 Button 做出非常多有很意思的功能。ImageButton 可以理解为是 Button 的升级版，它在后者的基础之上加上了图片背景，使用方式和 Button 类似。

1. Button 的基本用法

Button，顾名思义，就是一个提供给用户点击的控件。同 EditText 一样，它也是继承自 TextView，拥有 TextView 的全部属性，这里重点讲讲 Button 特有的及常用的属性的用法。

下面我们通过 XML 定义了一个 Button：

<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/btn_click"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="点我"
    android:onClick="onClick"
    android:textColor="@android:color/holo_blue_dark" />

基本用法和 TextView 类似，这里多了一个android:onClick属性，从名字上看应该是设置一个点击事件。那么我们首先看看 Button 最重要的功能，如何给 Button 绑定点击事件接收器，从而完成 Button 点击事件的接收及处理。

2. 点击事件的绑定

2.1 静态绑定

第一种方式是通过onClick属性实现，xml 布局代码如上。我们需要给onClick属性设置一个函数“onClick”（函数名任意），用于接收点击事件，所以我们要在 Activity 里面添加一个名为onClick的方法，如下：

 public void onClick(View v) {
        Toast.makeText(MainActivity.this, "button click", Toast.LENGTH_SHORT).show();
    }

这里要特别注意函数签名，需要指定为public void类型，而入参是View类型，传入的 View 就是被点击的 Button 对象。这样我们可以给多个 Button 绑定同一个 click 函数，然后通过传入的 View 来区分点击是哪个 Button 被点击从而执行相应操作。

运行之后，点击 Button 效果如下：

onClick属性示例

点击之后在屏幕下方打印出的文本就是我们在 xml 中为 Button 设置的 id，从而可以确认两件事：

通过onClick属性，我们可以为 Button 指定一个点击相应函数，按照指定的方法签名实现这个响应函数，即可接收点击事件；
点击 Button 之后，会将被点击的 Button 通过参数的形式传给onClick函数。

2.2 动态绑定

通过xml的onClick属性静态绑定的方式不够灵活，而且要求绑定的函数名、参数等完全一致，出错率也比较高，所以在实际开发中用的很少，绝大多数场景都会通过 Java 代码动态绑定一个事件监听器。

动态绑定监听器的主要代码如下：

package com.emercy.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = findViewById(R.id.btn_click);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "button click", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

如果你对 Activity 还比较生疏也没关系，在后面的课程会详细讲解，这里重点看看和 Button 有关的代码。

首先我们设置布局文件为只含有一个 Button 的 xml 文件；
接着通过 ID 获取到 Button 实例；
通过setOnClickListener函数设置一个点击事件监听器；
在监听器的 onClick 回调中接收点击事件并处理。

通过以上代码可以达到同样的效果，在onClick(View view)回调中传入的 View 同样是被点击的Button对象，在回调中可以由不同的 ID 区分不同的处理逻辑。这是 Button 最常用的方式，必须掌握。

3. Button 的样式

不同的系统会有不同的默认 Button 样式，但是它们都有一个共同点——丑。相比于 TextView 而言，Button 是一个互动感很强的控件，除了设置字体字号，还需要有形状、背景、颜色、点击态等等样式变化。特别是在游戏及娱乐类 App 中，Button 的样式及变化效果将直接影响用户体验，所以这里将重点讲解几种设置样式的方法。

3.1 设置背景

可以有两种设置方式：1、设置背景色；2、设置背景图。两种方式都可以通过 xml 及 Java 设置，在 xml 中可以通过：

android:background="#E4BB18"

可以直接设置颜色或者背景图片，也可以在 Java 代码中通过如下两个接口实现：

setBackground();
setBackgroundResource();

3.2 设置形状样式

和 TextView 类似，我们首先创建 drawable 资源：

依次进入“src” -> “main” -> “res” -> “drawable”目录，在里面右键新建一个“Drawable Resource File”，输入文件名：button_background。

编写 button_background.xml 的内容如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#B9B911" />
    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="30dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="30dp" />
    <stroke
        android:width="3dp"
        android:color="#99CCFF" />
</shape>

在 shape 标签中，我们设置了

填充的背景色
拐角的弧度
描边的颜色和宽度

然后在xml中通过android:background设置 button 的 background 样式：

android:background="@drawable/button_background"

效果如下：

Button样式示例

3.3 多状态变化

Button 的多状态变化是很常用也是效果非常棒的一个效果，它的可以最大化的增强互动感。通过 StateListDrawable 设置 Button 在不同状态下的样式效果，比如在按下、抬起、选中、无效等等不同状态下可以呈现不同的形状和颜色，这样可以给用户更多的点击反馈。

StateListDrawable 用来记录各个状态列表，并通过 Drawable 的形式描述各个状态下要呈现的样式。它支持以下设置项：

drawable： Button 的背景样式，搭配后面的状态使用表示当前状态下的样式。如果没有设置状态，则为默认样式
state_pressed： 按下态
state_enabled： 可用状态
state_focused： 获得焦点状态
state_window_focused： 获得窗口焦点状态
state_checkable： 可选状态（针对 checkbox）
state_checked： 勾选态
state_selected： 选择态（针对滚轮的场景）
state_active： 活动状态（针对 slidingTab）
state_single： 包含多个子控件时，只显示一个子控件的状态
state_first： 包含多个子控件时，第一个子控件处于显示状态
state_middle： 包含多个子控件时，中间一个子控件处于显示状态
state_last： 包含多个子控件时，最后一个子控件处于显示状态

其中最常用就是前 3 个状态。

我们新增一个 button_pressd_background.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#DF866B" />
    <corners
        android:bottomLeftRadius="50dp"
        android:bottomRightRadius="50dp"
        android:topLeftRadius="50dp"
        android:topRightRadius="50dp" />
    <stroke
        android:width="3dp"
        android:color="#99CCFF" />
</shape>

我们在之前的样式上修改了定点的弧度及背景颜色，希望他在点击的时候能够变成新的样式，接下来还需要一个 StateListDrawable 文件。我们仍然在 drawable 目录下创建文件：button_selector.xml，代码如下：

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

这里采用<selector/>标签，直译过来就是“选择器”，即在不同状态下选择哪种样式。最后我们将 Button 的android:background属性指向 button_selector.xml 文件：

    android:background="@drawable/button_selector"

大功告成，这时候只需要轻轻点击 Button，就会发现神奇的现象：

Button点击态

这样是不是更有互动感？采用 StateListDrawable 还可以指定很多的状态变化，这里就留给大家去发明创造。

4 小结

本节讲解了 Button 的基本用法，其中最核心的就是设置点击事件监听器来接收用户点击事件，其实在我们日常的实战开发中，不仅仅是 Button 可以绑定监听器，TextView、EditText 都可以，感兴趣的小伙伴也可以尝试修改前几节的例子，加上监听器试试，希望大家在学习每一个 View 的时候都能够融会贯通，举一反三。