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