Java / 按钮 Button/ImageButton

在前面两章我们讲了 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 有关的代码。

  1. 首先我们设置布局文件为只含有一个 Button 的 xml 文件;
  2. 接着通过 ID 获取到 Button 实例;
  3. 通过setOnClickListener函数设置一个点击事件监听器;
  4. 在监听器的 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 标签中,我们设置了

  1. 填充的背景色
  2. 拐角的弧度
  3. 描边的颜色和宽度

然后在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 的时候都能够融会贯通,举一反三。