Android學習筆記16：Button控制項圖文混排效果的實現

Button繼承自TextView，所以TextView的一些屬性同樣也適用於Button控制項。

　　Button的直接子類為CompoundButton。Button的間接子類有CheckButton、RadioButton、Switch和ToggleButton。

1.Button常用屬性設定

1.1設定Button的背景顏色

　　要設定Button按鈕的背景顏色，可以通過在xml檔案中設定android:background屬性實現，同樣也可以通過在代碼中使用setBackgroundColor()方法來實現。

<Button

　　android:id="@+id/button1"

　　android:layout_width="match_parent"

　　android:layout_height="wrap_content"

　　android:text="按鈕一：設定按鈕背景顏色為黃色"

　　android:background="#ffff00" />

1.2設定Button的文字顏色

　　要設定Button按鈕的文字顏色，可以通過在xml檔案中設定android:textColor屬性實現，同樣也可以通過在代碼中使用setTextColor()方法來實現。

<Button

　　android:id="@+id/button2"

　　android:layout_width="match_parent"

　　android:layout_height="wrap_content"

　　android:text="按鈕二：設定按鈕文字顏色為紅色"

　　android:textColor="#ff0000" />

1.3設定Button的文字格式

　　要設定Button按鈕的文字格式，可以通過在xml檔案中設定android:textStyle屬性實現。其中，參數italic表示斜體，參數bold表示粗體。

<Button

　　android:id="@+id/button3"

　　android:layout_width="match_parent"

　　android:layout_height="wrap_content"

　　android:text="按鈕三：設定按鈕文字斜體"

　　android:textStyle="italic" />

1.4設定Button的背景圖片

　　要設定Button按鈕的背景圖片，可以通過在xml檔案中設定android:background屬性實現，同樣也可以通過在代碼中使用setBackgroundResource()方法來實現。

<Button

　　android:id="@+id/button4"

　　android:layout_width="wrap_content"

　　android:layout_height="wrap_content"

　　android:text="按鈕四"

　　android:background="@drawable/android_logo" />

1.5

　　上述四種Button常用屬性效果1所示。

 

 圖1 Button常用屬性設定

 

2.Button事件監聽器

　　Button的常用事件監聽器有以下一些：

　　mButton.setOnClickListener();//點擊事件監聽器

　　mButton.setOnTouchListener();//觸摸事件監聽器

　　mButton.setOnFocusChangeListener();//焦點狀態改變事件監聽器

　　mButton.setOnKeyListener();//按鍵事件監聽器

　　mButton.setOnLongClickListener();//常壓事件監聽器

 　　這些事件監聽器可以用來響應對Button按鈕的不同操作，使用方法比較簡單，此處就不多介紹了。

 

3.Button按鈕圖文混排

　　如何在Button按鈕中實現圖文混排效果，以滿足豐富的Button式樣需求呢？這裡簡單介紹兩種方法。

3.1通過設定android:drawableTop等屬性來實現

　　在xml檔案中，想要實現文繞圖文字的效果，可以通過設定以下四個屬性來實現。

　　android:drawableTop設定文字上方顯示的圖片

　　android:drawableBottom設定文字下方顯示的圖片

　　android:drawableLeft顯示文字左邊顯示的圖片

　　android:drawableRight顯示文字右邊顯示的圖片

　　通過設定以上四個屬性，便可以很輕鬆的實現文繞圖文字的效果了，一個簡單的demo原始碼如下。

 

demo code
1 <Button
2     android:layout_width="wrap_content"
3     android:layout_height="wrap_content"
4     android:drawableTop="@drawable/up"
5     android:drawableBottom="@drawable/down"
6     android:drawableLeft="@drawable/left"
7     android:drawableRight="@drawable/right"
8         android:text="OK"    >           
9 </Button>
 

3.2通過SpannableString類對象來實現

　　除上述方法外，我們也可以通過使用SpannableString類來實現Button按鈕的圖文混排效果，具體實現步驟如下：

　　首先，我們需要建立一個SpannableString對象，目的是用來插入用ImageSpan對象封裝好的映像。

　　其次，我們還需要建立一個Bitmap對象，並通過資源Id取得要使用的映像。再將該Bitmap映像用ImageSpan對象封裝起來。

　　然後，通過使用SpannableString類的setSpan()方法載入該ImageSpan對象。

　　最後，通過使用Button控制項的append()方法來載入SpannableString對象即可。

　　通過上述四個步驟也同樣可以實現文繞圖文字的效果，一個簡單的demo原始碼如下。

 

demo code
 1 package com.example.android_buttondemo2;
 2
 3 import android.os.Bundle;
 4 import android.text.SpannableString;
 5 import android.text.Spanned;
 6 import android.text.style.DynamicDrawableSpan;
 7 import android.text.style.ImageSpan;
 8 import android.widget.Button;
 9 import android.app.Activity;
10 import android.graphics.Bitmap;
11 import android.graphics.BitmapFactory;
12
13 public class MainActivity extends Activity {
14
15     Button mButton;                      //按鈕對象
16    
17     @Override
18     public void onCreate(Bundle savedInstanceState) {
19         super.onCreate(savedInstanceState);
20         setContentView(R.layout.activity_main);
21        
22         mButton = (Button)this.findViewById(R.id.button);                          //載入按鈕對象
23        
24         //上箭頭圖片
25         //建立SpannableString對象，用於插入用ImageSpan對象封裝的映像
26         SpannableString mSpannableString_up = new SpannableString("up");
27         //根據資源ID，獲得資源圖片的Bitmap對象
28         Bitmap mBitmap_up = BitmapFactory.decodeResource(getResources(), R.drawable.up);
29         //根據Bitmap對象，建立ImageSpan
30         ImageSpan mImageSpan_up = new ImageSpan(mBitmap_up, DynamicDrawableSpan.ALIGN_BOTTOM);
31         //用ImageSpan對象替換字串“up”
32         mSpannableString_up.setSpan(mImageSpan_up, 0, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
33        
34         //下箭頭圖片
35         SpannableString mSpannableString_down = new SpannableString("down");
36         Bitmap mBitmap_down = BitmapFactory.decodeResource(getResources(), R.drawable.down);
37         ImageSpan mImageSpan_down = new ImageSpan(mBitmap_down, DynamicDrawableSpan.ALIGN_BOTTOM);
38         mSpannableString_down.setSpan(mImageSpan_down, 0, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
39        
40         //左箭頭圖片
41         SpannableString mSpannableString_left = new SpannableString("left");
42         Bitmap mBitmap_left = BitmapFactory.decodeResource(getResources(), R.drawable.left);
43         ImageSpan mImageSpan_left = new ImageSpan(mBitmap_left, DynamicDrawableSpan.ALIGN_BOTTOM);
44         mSpannableString_left.setSpan(mImageSpan_left, 0, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
45    
46         //右箭頭圖片
47         SpannableString mSpannableString_right = new SpannableString("right");
48         Bitmap mBitmap_right = BitmapFactory.decodeResource(getResources(), R.drawable.right);
49         ImageSpan mImageSpan_right = new ImageSpan(mBitmap_right, DynamicDrawableSpan.ALIGN_BOTTOM);
50         mSpannableString_right.setSpan(mImageSpan_right, 0, 5, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
51        
52         //向Button控制項中載入SpannableString對象
53         mButton.append(mSpannableString_up);  
54         mButton.append("\n");     
55         mButton.append(mSpannableString_left);
56         mButton.append("OK");
57         mButton.append(mSpannableString_right);
58         mButton.append("\n"); 
59         mButton.append(mSpannableString_down);
60     }
61 }
 

3.3

　　上述兩個demo的運行結果2所示。由圖可以看出，通過上述兩種方式可以達到相同的Button按鈕圖文混排效果。

 

 

 圖2 Button按鈕的圖文混排效果