在前面两章我们讲了 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 效果如下:
点击之后在屏幕下方打印出的文本就是我们在 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 {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);Button button = findViewById(R.id.btn_click);button.setOnClickListener(new View.OnClickListener() {@Overridepublic 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" /><cornersandroid:bottomLeftRadius="30dp"android:bottomRightRadius="30dp"android:topLeftRadius="30dp"android:topRightRadius="30dp" /><strokeandroid:width="3dp"android:color="#99CCFF" />
</shape>
在 shape 标签中,我们设置了
- 填充的背景色
- 拐角的弧度
- 描边的颜色和宽度
然后在xml中通过android:background
设置 button 的 background 样式:
android:background="@drawable/button_background"
效果如下:
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" /><cornersandroid:bottomLeftRadius="50dp"android:bottomRightRadius="50dp"android:topLeftRadius="50dp"android:topRightRadius="50dp" /><strokeandroid: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,就会发现神奇的现象:
这样是不是更有互动感?采用 StateListDrawable 还可以指定很多的状态变化,这里就留给大家去发明创造。
4 小结
本节讲解了 Button 的基本用法,其中最核心的就是设置点击事件监听器来接收用户点击事件,其实在我们日常的实战开发中,不仅仅是 Button 可以绑定监听器,TextView、EditText 都可以,感兴趣的小伙伴也可以尝试修改前几节的例子,加上监听器试试,希望大家在学习每一个 View 的时候都能够融会贯通,举一反三。