15. 【Android教程】按钮 Button/ImageButton

简介: 15. 【Android教程】按钮 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 效果如下:


点击之后在屏幕下方打印出的文本就是我们在 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函数设置一个点击事件监听器;

在监听器的 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 代码中通过如下两个接口实现:

1. setBackground();
2. 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"

效果如下:

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,就会发现神奇的现象:

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

4 小结

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


相关文章
|
6月前
|
网络协议 Android开发 数据安全/隐私保护
Android手机上使用Socks5全局代理-教程+软件
Android手机上使用Socks5全局代理-教程+软件
5086 2
|
1月前
|
Android开发 数据安全/隐私保护 虚拟化
安卓手机远程连接登录Windows服务器教程
安卓手机远程连接登录Windows服务器教程
82 4
|
1月前
|
Android开发
布谷语音软件开发:android端语音软件搭建开发教程
语音软件搭建android端语音软件开发教程!
|
6月前
|
XML 存储 JSON
51. 【Android教程】JSON 数据解析
51. 【Android教程】JSON 数据解析
162 2
|
6月前
|
XML IDE 开发工具
【Android UI】自定义带按钮的标题栏
【Android UI】自定义带按钮的标题栏
68 7
【Android UI】自定义带按钮的标题栏
|
6月前
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
|
6月前
|
存储 Android开发
安卓app,MediaPlayer播放本地音频 | 按钮控制播放和停止
在Jetpack Compose中,不直接操作原生Android组件如`Button`和`MediaPlayer`,而是使用Compose UI构建器定义界面并结合ViewModel管理音频播放逻辑。以下示例展示如何播放本地音频并用按钮控制播放/停止:创建一个`AudioPlayerViewModel`管理`MediaPlayer`实例和播放状态,然后在Compose UI中使用`Button`根据`isPlaying`状态控制播放。记得在`MainActivity`设置Compose UI,并处理相关依赖和权限。
|
6月前
|
存储 编解码 Android开发
58. 【Android教程】音频录制:MediaRecord
58. 【Android教程】音频录制:MediaRecord
69 2
|
6月前
|
Web App开发 移动开发 前端开发
52. 【Android教程】网页视图:WebView
52. 【Android教程】网页视图:WebView
103 1
|
6月前
|
XML 存储 JavaScript
50. 【Android教程】xml 数据解析
50. 【Android教程】xml 数据解析
74 1