Android實現(xiàn)自定義帶文字和圖片Button的方法
本文實例講述了Android實現(xiàn)自定義帶文字和圖片Button的方法。分享給大家供大家參考。具體分析如下:
在Android開發(fā)中經(jīng)常會需要用到帶文字和圖片的button,下面來講解一下常用的實現(xiàn)辦法。
一.用系統(tǒng)自帶的Button實現(xiàn)
最簡單的一種辦法就是利用系統(tǒng)自帶的Button來實現(xiàn),這種方式代碼量最小。在Button的屬性中有一個是drawableLeft,這個屬性可以把圖片設(shè)置在文字的左邊,但是這種方式必須讓icon的背景色是透明的,如果icon的背景色不是透明的話,會導致點擊按鈕時icon部分的背景色不會發(fā)生變化。
主要代碼:
<Button android:id="@+id/bt3" android:layout_marginTop="4dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="火車" android:textSize="16sp" android:textColor="#000000" android:paddingLeft="5dp" android:paddingTop="5dp" android:paddingRight="5dp" android:paddingBottom="5dp" android:drawableLeft="@drawable/line_bus_icon" android:background="@drawable/button_bg"> </Button>
實現(xiàn)效果:
如果要讓文字在圖標下方,改成drawableTop即可。
二.繼承系統(tǒng)的Button然后進行重繪
package com.test; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.util.AttributeSet; import android.widget.Button; public class ImageTextButton2 extends Button { private int resourceId = 0; private Bitmap bitmap; public ImageTextButton2(Context context) { super(context,null); } public ImageTextButton2(Context context,AttributeSet attributeSet) { super(context, attributeSet); this.setClickable(true); resourceId = R.drawable.icon; bitmap = BitmapFactory.decodeResource(getResources(), resourceId); } public void setIcon(int resourceId) { this.bitmap = BitmapFactory.decodeResource(getResources(), resourceId); invalidate(); } @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub // 圖片頂部居中顯示 int x = (this.getMeasuredWidth() - bitmap.getWidth())/2; int y = 0; canvas.drawBitmap(bitmap, x, y, null); // 坐標需要轉(zhuǎn)換,因為默認情況下Button中的文字居中顯示 // 這里需要讓文字在底部顯示 canvas.translate(0,(this.getMeasuredHeight()/2) - (int) this.getTextSize()); super.onDraw(canvas); } }
然后再布局文件中調(diào)用:
<com.test.ImageTextButton2 android:id="@+id/bt2" android:layout_marginTop="10dp" android:text="hello" android:textSize="15dp" android:textColor="#000000" android:layout_width="60dp" android:layout_height="70dp" android:background="@drawable/button_bg" />
注意,在xml文件中調(diào)用時,對于layout_width和layout_height兩個屬性千萬不能用wrap_content,否則會導致按鈕顯示出來的只有文字部分。
三.繼承布局文件
分析發(fā)現(xiàn)一個帶文字和icon的button其實可以看成一個線性布局或相對布局,因此可以繼承布局來實現(xiàn)。
先實現(xiàn)一個button的布局文件img_text_bt.xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:id="@+id/imgview" android:layout_alignParentTop="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/icon"> </ImageView> <TextView android:id="@+id/textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_below="@id/imgview"> </TextView> </RelativeLayout>
然后去繼承RelativeLayout布局:
package com.test; import android.content.Context; import android.util.AttributeSet; import android.view.LayoutInflater; import android.widget.ImageView; import android.widget.RelativeLayout; import android.widget.TextView; public class ImageTextButton1 extends RelativeLayout { private ImageView imgView; private TextView textView; public ImageTextButton1(Context context) { super(context,null); } public ImageTextButton1(Context context,AttributeSet attributeSet) { super(context, attributeSet); LayoutInflater.from(context).inflate(R.layout.img_text_bt, this,true); this.imgView = (ImageView)findViewById(R.id.imgview); this.textView = (TextView)findViewById(R.id.textview); this.setClickable(true); this.setFocusable(true); } public void setImgResource(int resourceID) { this.imgView.setImageResource(resourceID); } public void setText(String text) { this.textView.setText(text); } public void setTextColor(int color) { this.textView.setTextColor(color); } public void setTextSize(float size) { this.textView.setTextSize(size); } }
然后就可以在需要的xml文件中調(diào)用:
<com.test.ImageTextButton1 android:id="@+id/bt1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_bg" />
再在Activity中使用:
bt1 = (ImageTextButton1)findViewById(R.id.bt1); bt1.setText("icon"); bt1.setTextColor(Color.rgb(0, 0, 0)); bt1.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub Toast.makeText(MainActivity.this, "bt1被點擊了", Toast.LENGTH_SHORT).show(); } });
三種不同方法最后的運行效果:
完整實例代碼點擊此處本站下載。
希望本文所述對大家的Android程序設(shè)計有所幫助。
- Android實現(xiàn)ImageView圖片縮放和拖動
- Android通過自定義ImageView控件實現(xiàn)圖片的縮放和拖動的實現(xiàn)代碼
- Android編程實現(xiàn)圖片的瀏覽、縮放、拖動和自動居中效果
- Android中Textview和圖片同行顯示(文字超出用省略號,圖片自動靠右邊)
- Android實現(xiàn)文字滾動效果
- Android實現(xiàn)在TextView文字過長時省略部分或滾動顯示的方法
- Android實現(xiàn)文字翻轉(zhuǎn)動畫的效果
- Android自定義Dialog實現(xiàn)文字動態(tài)加載效果
- Android編程實現(xiàn)自動調(diào)整TextView字體大小以適應(yīng)文字長度的方法
- Android的ImageButton當顯示Drawable圖片時就不顯示文字
- Android代碼實現(xiàn)圖片和文字上下布局
- Android實現(xiàn)文字和圖片混排(文字環(huán)繞圖片)效果
- Android編程實現(xiàn)支持拖動改變位置的圖片中疊加文字功能示例
相關(guān)文章
Android編程實現(xiàn)使用Intent傳輸包含自定義類的ArrayList示例
這篇文章主要介紹了Android編程實現(xiàn)使用Intent傳輸包含自定義類的ArrayList,涉及Android對象序列化、反序列化、Intent數(shù)據(jù)傳輸?shù)认嚓P(guān)操作技巧,需要的朋友可以參考下2017-08-08Android?Flutter實現(xiàn)任意拖動的控件
使用flutter開發(fā)是需要控件能拖動,比如畫板中的元素,或者工具條等,所以本文為大家準備了Flutter實現(xiàn)任意拖動控件的示例代碼,希望對大家有所幫助2023-07-07Android?獲取手機已安裝的應(yīng)用列表實現(xiàn)詳解
這篇文章主要介紹了Android?獲取手機已安裝的應(yīng)用列表的實現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08