anroid內置了Button和ImageButton,但是沒有提供既能顯示圖片又能顯示文字的button。
這里我自定義了一個ImageTextButton
其中了XML文件中使用了自定義屬性custom:icon="@drawable/icon"
下面是ImageTextButton源碼:
另一種實現:
說說Android 兩種為自定義組件添加屬性的使用方法和區別
http://terryblog.blog.51cto.com/1764499/414884
Android高手進階教程(四)之----Android 中自定義屬性(attr.xml,TypedArray)的使用!
http://blog.csdn.net/Android_Tutor/archive/2010/04/20/5508615.aspx
linearlayout繼承擴展篇
http://wang-peng1.iteye.com/blog/576151
另一篇:編寫Android自定義按鈕
http://marshal.easymorse.com/archives/3059
實現按鈕,這里沒有通過Button類或者子類去做派生,而是通過TextView派生出來的。在這里三個按鈕是三個TextView派生類實例,中間的白線,是1px寬的白色矩形,這樣就可以做出類似上面的效果。
看布局文件:
這里需要注意的幾點:
對于布局的像素設置,一般要用dip,這樣在更大或者更小的屏幕下展示可以自動適配,如果是px,是物理像素,這樣在小的屏幕里面可能會顯得大,在大的屏幕中顯得小
在按鈕布局中要使用android:focusable="true" android:clickable="true",這樣才能比如通過軌跡球聚焦到按鈕上,才能用手觸摸按鈕的時候觸發事件
點擊按鈕變色,主要在android:background="@drawable/button"配置,button配置了點擊事件發生后的背景色改變,而不需要編寫代碼
下面來看看drawable/button.xml文件:
這個文件中定義了當條目(也就是按鈕)enable和(或)pressed的情況下的背景漸近色的配置情況。
實際上,上面介紹的部分,在不使用自定義按鈕(也就是不是<com.easymorse.textbutton.TextButton而直接寫<TextView…)的情況下,已經可以出現除了點擊后Toast消息。
說一下TextView的派生類,其實只是在touche按鈕的時候顯示提示信息:
在這里主要是寫了設置OnTouchListener的代碼。
這里只針對3種情況才顯示提示:
當手指從按鈕抬起,ACTION_UP
取消,ACTION_CANCEL
手指移出按鈕,ACTION_OUTSIDE
另外,要返回false,因為返回true,系統將不會調用drawable/button.xml的效果,因為true表示自己已經處理了onTouche事件,不需要別的邏輯再處理了。
源代碼見: http://easymorse.googlecode.com/svn/tags/textButton-0.1.0/
用自定義Button實現ToggleButton
http://marshal.easymorse.com/archives/3045
附送:自定義的豎著的seekbar(轉)
這里我自定義了一個ImageTextButton
其中了XML文件中使用了自定義屬性custom:icon="@drawable/icon"
下面是ImageTextButton源碼:
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 ImageTextButton extends Button { private final String namespace = "http://www.iteye.com/custom"; private int resourceId =0; private Bitmap bitmap; public ImageTextButton(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub setClickable(true); //默認使用R.drawable.icon這張圖片 resourceId = attrs.getAttributeResourceValue(namespace, "icon", R.drawable.icon); bitmap = BitmapFactory.decodeResource(getResources(), resourceId); } @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub //圖片頂部居中顯示 int x=(this.getMeasuredWidth()-bitmap.getWidth())>>1; int y=0; canvas.drawBitmap(bitmap, x, y, null); //坐標需要轉換,因為默認情況下Button中的文字居中顯示 //這里需要讓文字在底部顯示 canvas.translate(0, (this.getMeasuredHeight()>>1)-(int)this.getTextSize()); super.onDraw(canvas); } public void setIcon(Bitmap bitmap){ this.bitmap=bitmap; invalidate(); } public void setIcon(int resourceId){ this.bitmap=BitmapFactory.decodeResource(getResources(), resourceId); invalidate(); } }
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://www.iteye.com/custom" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <com.wt.app.ImageTextButton android:text="OK" custom:icon="@drawable/icon" android:id="@+id/button_0" android:layout_width="80dip" android:layout_height="80dip" /> <com.wt.app.ImageTextButton android:text="OK" custom:icon="@drawable/icon" android:id="@+id/button_1" android:layout_width="80dip" android:layout_height="100dip" android:textSize="30dip" android:textColor="#ff0000" /> <com.wt.app.ImageTextButton android:text="OK" custom:icon="@drawable/icon" android:id="@+id/button_2" android:layout_width="200dip" android:layout_height="200dip" android:textSize="30dip" /> </LinearLayout>

另一種實現:
import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Rect; import android.view.MotionEvent; import android.view.View; public class ImageTextButton extends View{ private final static int WIDTH_PADDING = 8; private final static int HEIGHT_PADDING = 10; private final static int SPACE = 10; private final String label; private final int imageResId; private final Bitmap image; private int fontWidth; private int fontHeight; public ImageTextButton(final Context c,int rid,String text){ super(c); this.label = text; this.imageResId = rid; this.image = BitmapFactory.decodeResource(c.getResources(),imageResId); setFocusable(true); setClickable(true); getFontWidthAndHeight(); } private void getFontWidthAndHeight(){ Paint pFont = new Paint(); Rect rect = new Rect(); pFont.getTextBounds("信 ", 0, 1, rect); this.fontHeight = rect.height(); this.fontWidth = rect.width(); } private int getTextWidth(String text){ return text.length()*this.fontWidth; } @Override protected void onFocusChanged(boolean gainFocus, int direction, Rect previouslyFocusedRect) { if (gainFocus == true){ this.setBackgroundColor(Color.rgb(255, 165, 0)); } else{ this.setBackgroundColor(Color.alpha(0)); } } @Override protected void onDraw(Canvas canvas) { Paint textPaint = new Paint(); textPaint.setColor(Color.WHITE); canvas.drawBitmap(image, WIDTH_PADDING / 2, HEIGHT_PADDING / 2, null); canvas.drawText(label, (image.getWidth()-getTextWidth(label)/2)/ 2, (HEIGHT_PADDING / 2) + image.getHeight() + 8+SPACE, textPaint); } @Override public boolean onTouchEvent(MotionEvent event) { int action = event.getAction(); switch(action){ case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_MOVE: this.setBackgroundColor(Color.rgb(255, 165, 0)); break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: this.setBackgroundColor(Color.alpha(0)); break; } return super.onTouchEvent(event); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension(measureWidth(widthMeasureSpec),measureHeight(heightMeasureSpec)); } private int measureWidth(int measureSpec){ int preferred = image.getWidth() * 2; return getMeasurement(measureSpec, preferred); } private int measureHeight(int measureSpec){ int preferred = image.getHeight()+this.fontHeight+SPACE*2; return getMeasurement(measureSpec, preferred); } private int getMeasurement(int measureSpec, int preferred){ int specSize = MeasureSpec.getSize(measureSpec); int measurement = 0; switch(MeasureSpec.getMode(measureSpec)){ case MeasureSpec.EXACTLY: measurement = specSize; break; case MeasureSpec.AT_MOST: measurement = Math.min(preferred, specSize); break; default: measurement = preferred; break; } return measurement; } public String getLabel(){ return label; } public int getImageResId(){ return imageResId; } }
說說Android 兩種為自定義組件添加屬性的使用方法和區別
http://terryblog.blog.51cto.com/1764499/414884
Android高手進階教程(四)之----Android 中自定義屬性(attr.xml,TypedArray)的使用!
http://blog.csdn.net/Android_Tutor/archive/2010/04/20/5508615.aspx
linearlayout繼承擴展篇
http://wang-peng1.iteye.com/blog/576151
另一篇:編寫Android自定義按鈕
http://marshal.easymorse.com/archives/3059

實現按鈕,這里沒有通過Button類或者子類去做派生,而是通過TextView派生出來的。在這里三個按鈕是三個TextView派生類實例,中間的白線,是1px寬的白色矩形,這樣就可以做出類似上面的效果。
看布局文件:
<?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" android:background="@drawable/background_color"> <LinearLayout android:layout_width="fill_parent" android:layout_height="10dip" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="40dip"> <com.easymorse.textbutton.TextButton android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:text="電影" android:gravity="center_vertical|center_horizontal" android:background="@drawable/button" android:focusable="true" android:clickable="true"/> <View android:layout_width="2px" android:layout_height="fill_parent" android:background="#ffffffff" /> <com.easymorse.textbutton.TextButton android:layout_width="fill_parent" android:layout_height="fill_parent" android:clickable="true" android:layout_weight="1" android:text="電視" android:gravity="center_vertical|center_horizontal" android:background="@drawable/button" android:focusable="true" /> <View android:layout_width="2px" android:layout_height="fill_parent" android:background="#ffffffff" /> <com.easymorse.textbutton.TextButton android:layout_width="fill_parent" android:layout_height="fill_parent" android:clickable="true" android:layout_weight="1" android:text="明星" android:gravity="center_vertical|center_horizontal" android:background="@drawable/button" android:focusable="true" /> </LinearLayout> </LinearLayout>
這里需要注意的幾點:
對于布局的像素設置,一般要用dip,這樣在更大或者更小的屏幕下展示可以自動適配,如果是px,是物理像素,這樣在小的屏幕里面可能會顯得大,在大的屏幕中顯得小
在按鈕布局中要使用android:focusable="true" android:clickable="true",這樣才能比如通過軌跡球聚焦到按鈕上,才能用手觸摸按鈕的時候觸發事件
點擊按鈕變色,主要在android:background="@drawable/button"配置,button配置了點擊事件發生后的背景色改變,而不需要編寫代碼
下面來看看drawable/button.xml文件:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize="true"> <item android:state_focused="true"> <shape> <gradient android:startColor="#FFE5CF33" android:endColor="#FFF1E7A2" android:angle="90.0"> </gradient> </shape> </item> <item android:state_enabled="true" android:state_pressed="false"> <shape> <gradient android:startColor="#FF1B1B1B" android:endColor="#FF969696" android:angle="90.0"> </gradient> </shape> </item> <item android:state_enabled="true" android:state_pressed="true"> <shape> <gradient android:startColor="#FF000000" android:endColor="#FF474747" android:angle="90.0"> </gradient> </shape> </item> <item android:state_enabled="false" android:state_pressed="true"> <shape> <gradient android:startColor="#FF000000" android:endColor="#FF474747" android:angle="90.0"> </gradient> </shape> </item> <item> <shape> <gradient android:startColor="#FF000000" android:endColor="#FF474747" android:angle="90.0"> </gradient> </shape> </item> </selector>
這個文件中定義了當條目(也就是按鈕)enable和(或)pressed的情況下的背景漸近色的配置情況。
實際上,上面介紹的部分,在不使用自定義按鈕(也就是不是<com.easymorse.textbutton.TextButton而直接寫<TextView…)的情況下,已經可以出現除了點擊后Toast消息。
說一下TextView的派生類,其實只是在touche按鈕的時候顯示提示信息:
import android.content.Context; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.widget.TextView; import android.widget.Toast; public class TextButton extends TextView { public TextButton(Context context) { super(context); } public TextButton(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public TextButton(final Context context, AttributeSet attrs) { this(context, attrs, 0); this.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { if (event.getAction() == MotionEvent.ACTION_CANCEL || event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_OUTSIDE) { Toast.makeText(context, "touched", Toast.LENGTH_SHORT).show(); } return false; } }); } }
在這里主要是寫了設置OnTouchListener的代碼。
這里只針對3種情況才顯示提示:
當手指從按鈕抬起,ACTION_UP
取消,ACTION_CANCEL
手指移出按鈕,ACTION_OUTSIDE
另外,要返回false,因為返回true,系統將不會調用drawable/button.xml的效果,因為true表示自己已經處理了onTouche事件,不需要別的邏輯再處理了。
源代碼見: http://easymorse.googlecode.com/svn/tags/textButton-0.1.0/
用自定義Button實現ToggleButton
http://marshal.easymorse.com/archives/3045
附送:自定義的豎著的seekbar(轉)
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
