馬超老師 ·在前面兩章我們講了 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 靜態(tài)綁定
第一種方式是通過onClick屬性實現(xiàn)，xml 布局代碼如上。我們需要給onClick屬性設置一個函數(shù)“onClick”（函數(shù)名任意），用于接收點擊事件，所以我們要在 Activity 里面添加一個名為onClick的方法，如下：
public void onClick(View v) {
Toast.makeText(MainActivity.this, "button click", Toast.LENGTH_SHORT).show();
}
這里要特別注意函數(shù)簽名，需要指定為public void類型，而入?yún)⑹?code>View類型，傳入的 View 就是被點擊的 Button 對象。這樣我們可以給多個 Button 綁定同一個 click 函數(shù)，然后通過傳入的 View 來區(qū)分點擊是哪個 Button 被點擊從而執(zhí)行相應操作。
運行之后，點擊 Button 效果如下：
點擊之后在屏幕下方打印出的文本就是我們在 xml 中為 Button 設置的 id，從而可以確認兩件事：
- 通過
onClick屬性，我們可以為 Button 指定一個點擊相應函數(shù)，按照指定的方法簽名實現(xiàn)這個響應函數(shù)，即可接收點擊事件； - 點擊 Button 之后，會將被點擊的 Button 通過參數(shù)的形式傳給
onClick函數(shù)。
2.2 動態(tài)綁定
通過xml的onClick屬性靜態(tài)綁定的方式不夠靈活，而且要求綁定的函數(shù)名、參數(shù)等完全一致，出錯率也比較高，所以在實際開發(fā)中用的很少，絕大多數(shù)場景都會通過 Java 代碼動態(tài)綁定一個事件監(jiān)聽器。
動態(tài)綁定監(jiān)聽器的主要代碼如下：
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 還比較生疏也沒關(guān)系，在后面的課程會詳細講解，這里重點看看和 Button 有關(guān)的代碼。
- 首先我們設置布局文件為只含有一個 Button 的 xml 文件；
- 接著通過 ID 獲取到 Button 實例；
- 通過
setOnClickListener函數(shù)設置一個點擊事件監(jiān)聽器； - 在監(jiān)聽器的 onClick 回調(diào)中接收點擊事件并處理。
通過以上代碼可以達到同樣的效果，在onClick(View view)回調(diào)中傳入的 View 同樣是被點擊的Button對象，在回調(diào)中可以由不同的 ID 區(qū)分不同的處理邏輯。這是 Button 最常用的方式，必須掌握。
3. Button 的樣式
不同的系統(tǒng)會有不同的默認 Button 樣式，但是它們都有一個共同點——丑。相比于 TextView 而言，Button 是一個互動感很強的控件，除了設置字體字號，還需要有形狀、背景、顏色、點擊態(tài)等等樣式變化。特別是在游戲及娛樂類 App 中 ，Button 的樣式及變化效果將直接影響用戶體驗，所以這里將重點講解幾種設置樣式的方法。
3.1 設置背景
可以有兩種設置方式：1、設置背景色；2、設置背景圖。兩種方式都可以通過 xml 及 Java 設置，在 xml 中可以通過：
android:background="#E4BB18"
可以直接設置顏色或者背景圖片，也可以在 Java 代碼中通過如下兩個接口實現(xiàn)：
setBackground();
setBackgroundResource();
3.2 設置形狀樣式
和 TextView 類似，我們首先創(chuàng)建 drawable 資源：
依次進入“src” -> “main” -> “res” -> “drawable”目錄，在里面右鍵新建一個“Drawable Resource File”，輸入文件名：button_background。
編寫 button_background.xml 的內(nèi)容如下：
<?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"
效果如下：
3.3 多狀態(tài)變化
Button 的多狀態(tài)變化是很常用也是效果非常棒的一個效果，它的可以最大化的增強互動感。通過 StateListDrawable 設置 Button 在不同狀態(tài)下的樣式效果，比如在按下、抬起、選中、無效等等不同狀態(tài)下可以呈現(xiàn)不同的形狀和顏色，這樣可以給用戶更多的點擊反饋。
StateListDrawable 用來記錄各個狀態(tài)列表，并通過 Drawable 的形式描述各個狀態(tài)下要呈現(xiàn)的樣式。它支持以下設置項：
- drawable： Button 的背景樣式，搭配后面的狀態(tài)使用表示當前狀態(tài)下的樣式。如果沒有設置狀態(tài)，則為默認樣式
- state_pressed： 按下態(tài)
- state_enabled： 可用狀態(tài)
- state_focused： 獲得焦點狀態(tài)
- state_window_focused： 獲得窗口焦點狀態(tài)
- state_checkable： 可選狀態(tài)（針對 checkbox）
- state_checked： 勾選態(tài)
- state_selected： 選擇態(tài)（針對滾輪的場景）
- state_active： 活動狀態(tài)（針對 slidingTab）
- state_single： 包含多個子控件時，只顯示一個子控件的狀態(tài)
- state_first： 包含多個子控件時，第一個子控件處于顯示狀態(tài)
- state_middle： 包含多個子控件時，中間一個子控件處于顯示狀態(tài)
- state_last： 包含多個子控件時，最后一個子控件處于顯示狀態(tài)
其中最常用就是前 3 個狀態(tài)。
我們新增一個 button_pressd_background.xml，內(nèi)容如下：
<?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 文件。我們?nèi)匀辉?drawable 目錄下創(chuàng)建文件：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/>標簽，直譯過來就是“選擇器”，即在不同狀態(tài)下選擇哪種樣式。最后我們將 Button 的android:background屬性指向 button_selector.xml 文件：
android:background="@drawable/button_selector"
大功告成，這時候只需要輕輕點擊 Button，就會發(fā)現(xiàn)神奇的現(xiàn)象：
這樣是不是更有互動感？采用 StateListDrawable 還可以指定很多的狀態(tài)變化，這里就留給大家去發(fā)明創(chuàng)造。
4 小結(jié)
本節(jié)講解了 Button 的基本用法，其中最核心的就是設置點擊事件監(jiān)聽器來接收用戶點擊事件，其實在我們?nèi)粘５膶崙?zhàn)開發(fā)中，不僅僅是 Button 可以綁定監(jiān)聽器，TextView、EditText 都可以，感興趣的小伙伴也可以嘗試修改前幾節(jié)的例子，加上監(jiān)聽器試試，希望大家在學習每一個 View 的時候都能夠融會貫通，舉一反三。
2025 imooc.com All Rights Reserved |