生活随笔
收集整理的這篇文章主要介紹了
【自定义Android带图片和文字的ImageButton】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
現在移動設備的按鈕設計講究大圖標小文字，希望用戶只要一看到圖標便能知道這個按鈕是干嘛的，但又要有必要的文字提示，最常見的就數搜索按鈕了，上面一個大大的放大鏡圖標，下面兩個字——搜索。
Bill最近也在做具有這種效果的按鈕，過程總是曲折的，不過結果總是美好滴~現在Bill把其做法分享給大家，希望對還不會的朋友有所幫助。
先看看bill曲折的過程吧，也許里面就有你的影子：
最開始以為直接利用Android控件ImageButton即可完事，誰知事不如人料，ImageButton只能顯示圖片，并不能對其添加文字，此想法不攻自破。
于是我想到了直接用Button，但是Button的文字卻是顯示在圖片內部，并不能達到我的需求。放棄。
懶人總有懶人的辦法，我可以直接在圖片下方PS需要的文字嘛，然后把P好的圖片放進ImageButton就好了。此法十分簡單好用。但是，一旦我們需要改變文字，或者我要把文字顯示在圖片頂部而不是底部怎么辦？此法雖簡單，卻缺乏可變性。放棄。
這就是所謂的“一鈕三折”了~
那么，有沒有一種方法既能夠擁有Button的效果，又能夠實現Button顯示的自定義呢？
答案是肯定的，接下來，bill將一步一步詳細解釋這個按鈕的制作過程。
?
思路
首先，我們來看一下這個按鈕的實現思路。有一種思維方式叫做“out?of?box”，也就是鼓勵大家跳出固定思維模式以尋求新的突破。但是在“跳出箱子”之前，我們必須首先知道困住我們思維的“箱子”是什么。
在這里，這個箱子就是“按鈕”。我們一直在想，如何去實現這個“按鈕”，怎么才能讓“按鈕”顯示出圖片，然后在圖片下面還顯示一行字。我們就在“按鈕”這個箱子里糾結。
但實際上，當我們發現所謂的“按鈕”其實就是一個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
?
package?com.billhoo.study;??import?android.content.Context;?import?android.widget.ImageView;?import?android.widget.LinearLayout;?import?android.widget.TextView;??//自定義ImageButton，模擬ImageButton，并在其下方顯示文字?//提供Button的部分接口?public?class?MyImageButton?extends?LinearLayout?{????public?MyImageButton(Context?context,?int?imageResId,?int?textResId)?{?????super(context);??????mButtonImage?=?new?ImageView(context);?????mButtonText?=?new?TextView(context);??????setImageResource(imageResId);?????mButtonImage.setPadding(0,?0,?0,?0);??????setText(textResId);?????setTextColor(0xFF000000);?????mButtonText.setPadding(0,?0,?0,?0);??????//設置本布局的屬性?????setClickable(true);??//可點擊?????setFocusable(true);??//可聚焦?????setBackgroundResource(android.R.drawable.btn_default);??//布局才用普通按鈕的背景?????setOrientation(LinearLayout.VERTICAL);??//垂直布局??????????//首先添加Image，然后才添加Text?????//添加順序將會影響布局效果?????addView(mButtonImage);?????addView(mButtonText);???}????//?----------------public?method-----------------------------???/*????*?setImageResource方法????*/???public?void?setImageResource(int?resId)?{?????mButtonImage.setImageResource(resId);???}????/*????*?setText方法????*/???public?void?setText(int?resId)?{?????mButtonText.setText(resId);???}????public?void?setText(CharSequence?buttonText)?{?????mButtonText.setText(buttonText);???}????/*????*?setTextColor方法????*/???public?void?setTextColor(int?color)?{?????mButtonText.setTextColor(color);???}????//?----------------private?attribute-----------------------------???private?ImageView?mButtonImage?=?null;???private?TextView?mButtonText?=?null;?}??
然后在main布局中為我們自定義的Button寫xml布局，注意，我們的“按鈕”實際上是一個線性布局，因此xml中應該寫LinearLayout而不是Button或者ImageButton
?
?
?
<?xml?version="1.0"?encoding="utf-8"?>?<LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"?????android:orientation="vertical"?android:layout_width="fill_parent"?????android:layout_height="fill_parent">??????<!--?這就是我們的“數據管理按鈕”?-->?????<LinearLayout?android:id="@+id/ll_bt_data_config"?????????android:layout_width="wrap_content"?android:layout_height="wrap_content"?/>??</LinearLayout>??
最后，在Activity中為我們自定義的按鈕設置監聽
?
?
?
package?com.billhoo.study;??import?android.app.Activity;?import?android.os.Bundle;?import?android.view.View;?import?android.widget.Button;?import?android.widget.LinearLayout;??public?class?TestActivity?extends?Activity?{???/**?Called?when?the?activity?is?first?created.?*/???@Override???public?void?onCreate(Bundle?savedInstanceState)?{?????super.onCreate(savedInstanceState);?????setContentView(R.layout.main);??????btDataConfig?=?new?MyImageButton(this,?R.drawable.option,?R.string.text);??????????//獲取包裹本按鈕的容器?????llbtDataConfig?=?(LinearLayout)?findViewById(R.id.ll_bt_data_config);??????????//將我們自定義的Button添加進這個容器?????llbtDataConfig.addView(btDataConfig);??????//設置按鈕的監聽?????btDataConfig.setOnClickListener(new?Button.OnClickListener()?{???????@Override???????public?void?onClick(View?v)?{?????????btDataConfig.setText("按鈕被點擊過了");???????}?????});???}????private?LinearLayout?llbtDataConfig?=?null;??//main布局中包裹本按鈕的容器???private?MyImageButton?btDataConfig?=?null;?}??
效果
?
??
擴展
大家還可以自己擴展這個類的功能，比如可以設置文字的環繞位置，大小控制等等
?
本文出自 “Bill_Hoo專欄” 博客，請務必保留此出處http://billhoo.blog.51cto.com/2337751/772442
總結
以上是生活随笔為你收集整理的【自定义Android带图片和文字的ImageButton】的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
