Android應用開發入門（十九）UI控件Button的使用

前言

　　最近一直在講androidUI控件的使用方式，這篇講解一下基本上屬於用處最廣泛的控件之一的Button控件。如果有過其他平台開發經驗的程序員，對按鈕是不會陌生的。本篇首先講解一下Android的Button控件的常用事件以及事件綁定和觸發，再在Button控件中通過設定屬性值來實現圖文混排，這個功能是在項目中常用到的。

Button控件

　　Button繼承了TextView。它的功能就是提供一個按鈕，這個按鈕可以供用戶點擊，當用戶對按鈕進行操作的時候，觸發相應事件，如點擊，觸摸。

　　還有一個ImageButton，它繼承自Button，可以在ImageButton中顯示一個圖片展示給用戶看，並且對其Text屬性設置值的時候是無效的，其它功能與Button一樣。

常用事件

　　一般對於一個按鈕而言，用的最多的就是點擊事件，Button間接繼承自View，而AndroidUI中的所有事件，都是定義在View中的。在本篇博客中，示例講解的點擊事件、觸摸事件，其他事件的使用方式與此類似，只是觸發的時機不同而已。此處分別需要實現View.OnClickListener、View.OnTouchListener接口的方法。

• View.OnClickListener，需要實現onClick(View v)方法，其中v為當前觸發事件的控件。
• View.OnTouchListener，需要實現onTouch(View v , MotionEvent event)，其中v為當前觸發事件的控件，event包括了觸摸時的具體內容，如移動、按下等。

　　下面使用一個示例講解一下事件的綁定及觸發，在示例中顯示兩個按鈕控件，一個為普通按鈕，一個為填充圖片的按鈕，為它們綁定click事件，當點擊事件觸發的時候，對其尺寸進行修改，為圖片按鈕綁定觸摸事件，當觸摸的時候觸發，切換圖片顯示。

　　布局代碼：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" > 
      
    <Button 
        android:id="@+id/btnChangeSize" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="點擊修改尺寸" 
        /> 
    <Button 
        android:id="@+id/btnChangeImg" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:background="@drawable/image1" 
        /> 
</LinearLayout> 

　　實現代碼： 

package com.bgxt.buttondemo;  
 
import android.app.Activity;  
import android.os.Bundle;  
import android.view.MotionEvent;  
import android.view.View;  
import android.view.View.OnClickListener;  
import android.view.View.OnTouchListener;  
import android.widget.Button;  
 
//通過實現接口，對其進行click、touch事件的支持  
public class ButtonListener extends Activity implements OnClickListener,  
        OnTouchListener {  
 
    private Button btnChangeSize;  
    private Button btnChangeImg;  
    private int flag = 1;  
 
    @Override 
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.btn_listener);  
 
        btnChangeSize = (Button) findViewById(R.id.btnChangeSize);  
        btnChangeImg = (Button) findViewById(R.id.btnChangeImg);  
 
        // 對兩個按鈕進行事件綁定  
        btnChangeSize.setOnClickListener(this);  
        btnChangeImg.setOnClickListener(this);  
        btnChangeImg.setOnTouchListener(this);  
    }  
 
    @Override 
    public boolean onTouch(View v, MotionEvent event) {  
        // 獲取觸發事件的Button控件  
        Button btn = (Button) v;  
        if (event.getAction() == MotionEvent.ACTION_UP) {  
            // 當觸摸時按下，則替換展示圖片為image1  
            btn.setBackgroundResource(R.drawable.image1);  
        } else {  
            btn.setBackgroundResource(R.drawable.image2);  
        }  
        return false;  
    }  
 
    @Override 
    public void onClick(View v) {  
        Button btn = (Button) v;  
        if (flag == 1 
                && btn.getWidth() == getWindowManager().getDefaultDisplay()  
                        .getWidth()) {  
            // 如果等於屏幕的寬度，則修改標識flag為-1  
            flag = -1;  
        } else if (flag == -1 && btn.getWidth() < 100) {  
            flag = 1;  
        }  
        // 設置button控件尺寸  
        btn.setWidth(btn.getWidth() + (int) (btn.getWidth() * 0.1) * flag);  
        btn.setHeight(btn.getHeight() + (int) (btn.getHeight() * 0.1) * flag);  
    }  
} 

　展示效果圖：

　　當點擊按鈕的時候，按鈕被放大，當放大到屏幕寬度時，開始縮小。

　　當觸摸圖標按鈕的時候，圖像改變。

圖文混排

　　對於在實際項目中，經常會需要設置按鈕展示為圖文混排的效果，這樣可以通過圖表更直觀的把按鈕的功能展示給用戶，又可以有簡短的文字說明。雖然ImageButton也可以實現圖片按鈕的效果，但是對於ImageButton而言，設置Text屬性是沒有作用的，所以這裡不講解ImageButton的使用。對於Button控件，圖文混排需要用到一個android:drawableXxx屬性（Xxx為圖片所在按鈕的方向），這個屬性配合android:text，就可以實現圖文混排的效果。

　　下面一個示例，分別展示了上下左右四個方位的圖標按鈕，並且生成一個通過Java代碼動態生成圖文混排按鈕的。因為Button是繼承自TextView的，所以通過代碼設置圖文混排的方式與TextView類似，都需要用到SpannableString類，關於SpannableString的詳細講解可以參見我的另外一篇，http://www.fengfly.com/plus/view-213377-1.html，這裡就不再詳細講解了。

　　布局代碼：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" > 
 
    <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="150dp" 
        android:orientation="horizontal" > 
        <!-- 圖片在上，項目中常用這樣的設置 --> 
        <Button 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:drawableTop="@drawable/image2" 
            android:text="b1" /> 
        <!-- 圖片在下 --> 
        <Button 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:drawableBottom="@drawable/image2" 
            android:drawablePadding="10dp" 
            android:text="b2" /> 
        <!-- 圖片在左 --> 
        <Button 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:drawableLeft="@drawable/image2" 
            android:text="b3" /> 
        <!-- 圖片在右 --> 
        <Button 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:drawablePadding="10dp" 
            android:drawableRight="@drawable/image2" 
            android:text="b4" /> 
    </LinearLayout> 
    <!-- 聲明一個空的按鈕，用於進行代碼設置 --> 
    <Button android:layout_width="200dp" android:layout_height="200dp" android:id="@+id/btnSty" android:layout_marginTop="10dp"/> 
</LinearLayout> 

　　Java實現代碼：　

package com.bgxt.buttondemo;  
 
import android.app.Activity;  
import android.graphics.Bitmap;  
import android.graphics.BitmapFactory;  
import android.os.Bundle;  
import android.text.SpannableString;  
import android.text.Spanned;  
import android.text.style.ImageSpan;  
import android.widget.Button;  
 
public class ButtonStyle extends Activity {  
 
    private Button btnSty;  
    @Override 
    protected void onCreate(Bundle savedInstanceState) {  
        // TODO Auto-generated method stub  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.btn_style);  
        //獲取按鈕控件  
        btnSty=(Button)findViewById(R.id.btnSty);  
        //生成SpannableString，用於圖片的載體  
        SpannableString spannebleLeft=new SpannableString("left");  
        Bitmap bitmapleft=BitmapFactory.decodeResource(getResources(), R.drawable.image1);  
        ImageSpan imageSpanLeft=new ImageSpan(ButtonStyle.this,bitmapleft);  
        spannebleLeft.setSpan(imageSpanLeft,0,4,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);  
          
        SpannableString spannebleRight=new SpannableString("right");  
        Bitmap bitmapRight=BitmapFactory.decodeResource(getResources(), R.drawable.image2);  
        ImageSpan imageSpanRight=new ImageSpan(ButtonStyle.this,bitmapRight);  
        spannebleRight.setSpan(imageSpanRight,0,5,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);  
          
        //把生成的SpannableString追加到按鈕上  
        btnSty.append(spannebleLeft);  
        btnSty.append("aLi");  
        btnSty.append(spannebleRight);  
    }  
} 

　　效果展示：

　　實例源碼下載

總結

　　對於實際項目而言，一般按鈕的樣式都會通過額外的XML樣式文件包裝一下，這個之後再介紹，這裡只是介紹一下Button的簡單使用。按鈕的最多用處就是供用戶點擊從而觸發相應時間，沒有什麼難點。