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源代碼如下。

 

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@drawable/up"
    android:drawableBottom="@drawable/down"
    android:drawableLeft="@drawable/left"
    android:drawableRight="@drawable/right"
        android:text="OK"    >            
</Button>

 

3.2通過SpannableString類對象來實現

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

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

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

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

　　最后，通過使用Button控件的append()方法來加載SpannableString對象即可。

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

 

package com.example.android_buttondemo2;

import android.os.Bundle;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.style.DynamicDrawableSpan;
import android.text.style.ImageSpan;
import android.widget.Button;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

public class MainActivity extends Activity {

    Button mButton;                      //按鈕對象
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        mButton = (Button)this.findViewById(R.id.button);                          //加載按鈕對象
        
        //上箭頭圖片
        //創建SpannableString對象，用於插入用ImageSpan對象封裝的圖像
        SpannableString mSpannableString_up = new SpannableString("up");
        //根據資源ID，獲得資源圖片的Bitmap對象
        Bitmap mBitmap_up = BitmapFactory.decodeResource(getResources(), R.drawable.up);
        //根據Bitmap對象，創建ImageSpan
        ImageSpan mImageSpan_up = new ImageSpan(mBitmap_up, DynamicDrawableSpan.ALIGN_BOTTOM);
        //用ImageSpan對象替換字符串“up”
        mSpannableString_up.setSpan(mImageSpan_up, 0, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        
        //下箭頭圖片
        SpannableString mSpannableString_down = new SpannableString("down");
        Bitmap mBitmap_down = BitmapFactory.decodeResource(getResources(), R.drawable.down);
        ImageSpan mImageSpan_down = new ImageSpan(mBitmap_down, DynamicDrawableSpan.ALIGN_BOTTOM);
        mSpannableString_down.setSpan(mImageSpan_down, 0, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        
        //左箭頭圖片
        SpannableString mSpannableString_left = new SpannableString("left");
        Bitmap mBitmap_left = BitmapFactory.decodeResource(getResources(), R.drawable.left);
        ImageSpan mImageSpan_left = new ImageSpan(mBitmap_left, DynamicDrawableSpan.ALIGN_BOTTOM);
        mSpannableString_left.setSpan(mImageSpan_left, 0, 4, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    
        //右箭頭圖片
        SpannableString mSpannableString_right = new SpannableString("right");
        Bitmap mBitmap_right = BitmapFactory.decodeResource(getResources(), R.drawable.right);
        ImageSpan mImageSpan_right = new ImageSpan(mBitmap_right, DynamicDrawableSpan.ALIGN_BOTTOM);
        mSpannableString_right.setSpan(mImageSpan_right, 0, 5, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        
        //向Button控件中加載SpannableString對象
        mButton.append(mSpannableString_up);   
        mButton.append("\n");      
        mButton.append(mSpannableString_left);
        mButton.append("OK");
        mButton.append(mSpannableString_right); 
        mButton.append("\n");  
        mButton.append(mSpannableString_down); 
    }
}

 

3.3效果圖

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

 

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