自訂Android帶圖片和文字的ImageButton

自訂Android帶圖片的按鈕前言

現在行動裝置的按鈕設計講究大表徵圖小文字，希望使用者只要一看到表徵圖便能知道這個按鈕是幹嘛的，但又要有必要的文字提示，最常見的就數搜尋按鈕了，上面一個大大的放大鏡表徵圖，下面兩個字——搜尋。

Bill最近也在做具有這種效果的按鈕，過程總是曲折的，不過結果總是美好滴~現在Bill把其做法分享給大家，希望對還不會的朋友有所協助。

先看看bill曲折的過程吧，也許裡面就有你的影子：

最開始以為直接利用Android控制項ImageButton即可完事，誰知事不如人料，ImageButton只能顯示圖片，並不能對其添加文字，此想法不攻自破。

於是我想到了直接用Button，但是Button的文字卻是顯示在圖片內部，並不能達到我的需求。放棄。

懶人總有懶人的辦法，我可以直接在圖片下方PS需要的文字嘛，然後把P好的圖片放進ImageButton就好了。此法十分簡單好用。但是，一旦我們需要改變文字，或者我要把文字顯示在圖片頂部而不是底部怎麼辦？此法雖簡單，卻缺乏可變性。放棄。

這就是所謂的“一鈕三折”了~

那麼，有沒有一種方法既能夠擁有Button的效果，又能夠實現Button顯示的自訂呢？

答案是肯定的，接下來，bill將一步一步詳細解釋這個按鈕的製作過程。

 

思路

首先，我們來看一下這個按鈕的實現思路。有一種思維方式叫做“out of box”，也就是鼓勵大家跳出固定思維模式以尋求新的突破。但是在“跳出箱子”之前，我們必須首Crowdsourced Security Testing道困住我們思維的“箱子”是什麼。

在這裡，這個箱子就是“按鈕”。我們一直在想，如何去實現這個“按鈕”，怎麼才能讓“按鈕”顯示出圖片，然後在圖片下面還顯示一行字。我們就在“按鈕”這個箱子裡糾結。

但實際上，當我們發現所謂的“按鈕”其實就是一個View的時候，一切就變得簡單了。

它只不過是一個可點擊、可設定監聽、可顯示文字或者圖片的View而已。那麼我們就跳出Android給我們設定的這個箱子，自己重新造一個具有我們需要的功能和外觀的View不就OK了？

經過分析，上述按鈕效果實際上就是一個布局，一個最簡單不過的垂直線性布局，上部分是一個ImageView，下部分是一個TextView，這個布局可點擊、可設定監聽。

我們首先要編寫自己的ImageButton類，然後在主布局檔案中為我們自訂的Button編寫布局，最後在Activity中調用我們自訂ImageButton即可。

那麼接下來我們就一起來實現這個簡單的LinearLayout。

 

編碼實現自己的ImageButton

在編寫我們自己的ImageButton之前，如果讀者並不清楚如何在一個靜態xml布局檔案中動態地載入子布局，請先閱讀下面的博文（此文言簡意賅，已經寫得很清楚了，bill就不再贅述）

 

http://blog.csdn.net/lzx_bupt/article/details/5600187

 

首先，我們編寫一個MyImageButton類，繼承自LinearLayout

1. package com.billhoo.study;
3. import android.content.Context;
4. import android.widget.ImageView;
5. import android.widget.LinearLayout;
6. import android.widget.TextView;
8. //自訂ImageButton，類比ImageButton，並在其下方顯示文字
9. //提供Button的部分介面
10. public class MyImageButton extends LinearLayout {
12. public MyImageButton(Context context, int imageResId, int textResId) {
13. super(context);
15. mButtonImage = new ImageView(context);
16. mButtonText = new TextView(context);
18. setImageResource(imageResId);
19. mButtonImage.setPadding(0, 0, 0, 0);
21. setText(textResId);
22. setTextColor(0xFF000000);
23. mButtonText.setPadding(0, 0, 0, 0);
25. //設定本布局的屬性
26. setClickable(true); //可點擊
27. setFocusable(true); //可聚焦
28. setBackgroundResource(android.R.drawable.btn_default); //布局才用普通按鈕的背景
29. setOrientation(LinearLayout.VERTICAL); //垂直布局
31. //首先添加Image，然後才添加Text
32. //添加順序將會影響布局效果
33. addView(mButtonImage);
34. addView(mButtonText);
35. }
37. // ----------------public method-----------------------------
38. /*
39. * setImageResource方法
40. */
41. public void setImageResource(int resId) {
42. mButtonImage.setImageResource(resId);
43. }
45. /*
46. * setText方法
47. */
48. public void setText(int resId) {
49. mButtonText.setText(resId);
50. }
52. public void setText(CharSequence buttonText) {
53. mButtonText.setText(buttonText);
54. }
56. /*
57. * setTextColor方法
58. */
59. public void setTextColor(int color) {
60. mButtonText.setTextColor(color);
61. }
63. // ----------------private attribute-----------------------------
64. private ImageView mButtonImage = null;
65. private TextView mButtonText = null;
66. }

然後在main布局中為我們自訂的Button寫xml布局，注意，我們的“按鈕”實際上是一個線性布局，因此xml中應該寫LinearLayout而不是Button或者ImageButton

 

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical" android:layout_width="fill_parent"
4. android:layout_height="fill_parent">
6. <!-- 這就是我們的“資料管理按鈕” -->
7. <LinearLayout android:id="@+id/ll_bt_data_config"
8. android:layout_width="wrap_content" android:layout_height="wrap_content" />
10. </LinearLayout>

最後，在Activity中為我們自訂的按鈕設定監聽

 

1. package com.billhoo.study;
3. import android.app.Activity;
4. import android.os.Bundle;
5. import android.view.View;
6. import android.widget.Button;
7. import android.widget.LinearLayout;
9. public class TestActivity extends Activity {
10. /** Called when the activity is first created. */
11. @Override
12. public void onCreate(Bundle savedInstanceState) {
13. super.onCreate(savedInstanceState);
14. setContentView(R.layout.main);
16. btDataConfig = new MyImageButton(this, R.drawable.option, R.string.text);
18. //擷取包裹本按鈕的容器
19. llbtDataConfig = (LinearLayout) findViewById(R.id.ll_bt_data_config);
21. //將我們自訂的Button添加進這個容器
22. llbtDataConfig.addView(btDataConfig);
24. //設定按鈕的監聽
25. btDataConfig.setOnClickListener(new Button.OnClickListener() {
26. @Override
27. public void onClick(View v) {
28. btDataConfig.setText("按鈕被點擊過了");
29. }
30. });
31. }
33. private LinearLayout llbtDataConfig = null; //main布局中包裹本按鈕的容器
34. private MyImageButton btDataConfig = null;
35. }

效果 

擴充

大家還可以自己擴充這個類的功能，比如可以設定文字的環繞位置，大小控制等等

本文出自 “Bill_Hoo專欄” 部落格，請務必保留此出處http://billhoo.blog.51cto.com/2337751/772442