相信很多人都有像這樣的需求
![](http://files.dotblogs.com.tw/superlm102/1303/201332215137976.jpg)
但是偏偏Button的Drawable Left,Drawable Top,Drawable Right,Drawable Top
這四個屬性放的圖片都是在最旁邊,像是這樣
![](http://files.dotblogs.com.tw/superlm102/1303/2013322151527976.jpg)
整理出三種方法
1.利用版面去配置,按鈕在背後,前面在蓋圖片跟文字然後置中
02 | android:layout_width = "0dp" |
03 | android:layout_height = "wrap_content" |
04 | android:layout_weight = "1" |
05 | android:background = "@drawable/footer_btn4" > |
08 | android:id = "@+id/btnReset" |
09 | android:layout_width = "match_parent" |
10 | android:layout_height = "match_parent" |
11 | android:background = "@drawable/selector_menu_footer_btn" |
12 | android:onClick = "btnConfirmSearch" |
13 | android:textColor = "@color/white" |
14 | android:textSize = "@dimen/tenant_search_condition_condition_btn_txt" /> |
17 | android:layout_width = "wrap_content" |
18 | android:layout_height = "wrap_content" |
19 | android:layout_centerHorizontal = "true" |
20 | android:layout_centerVertical = "true" |
21 | android:gravity = "center" > |
24 | android:layout_width = "wrap_content" |
25 | android:layout_height = "wrap_content" |
26 | android:background = "@drawable/footer_btn3" > |
30 | android:id = "@+id/textView2" |
31 | android:layout_width = "wrap_content" |
32 | android:layout_height = "wrap_content" |
33 | android:clickable = "false" |
34 | android:text = "@string/tenant_search_condition_loc_btn_reset" |
35 | android:textColor = "@color/white" |
36 | android:textSize = "@dimen/tenant_search_condition_condition_btn_txt" /> |
結果是
![](http://files.dotblogs.com.tw/superlm102/1303/2013322152115335.jpg)
優點是靈活性高,缺點就是layout檔會比較複雜
2.透過SpannableString,ImageSpan塞圖片到文字中
1 | SpannableString spanText = new SpannableString( "1重置" ); |
2 | Drawable d = getResources().getDrawable(R.drawable.footer_btn3); |
3 | int a = ( int )btnConfirmSearch.getTextSize(); |
4 | d.setBounds( 0 , 0 , a, a); |
6 | ImageSpan imageSpan = new ImageSpan(d, ImageSpan.ALIGN_BASELINE); |
7 | spanText.setSpan( imageSpan, 0 , 1 , Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); |
8 | btnConfirmSearch.setText(spanText); |
這樣會有個問題,假設圖片高度比文字高度高,文字會往下跑,以下為兩種對齊方式
ImageSpan.ALIGN_BASELINE跟ImageSpan.ALIGN_BOTTOM的結果
![](http://files.dotblogs.com.tw/superlm102/1303/2013322153125195.jpg)
設定成文字高度的結果
![](http://files.dotblogs.com.tw/superlm102/1303/201332215305851.jpg)
優點layout檔乾淨,缺點圖片不能大於文字高度
3.程式動態設置
設置paddingLeft把圖片推到右邊,此時文字也會一起被推到右邊
再設置drawablePadding負的把文字拉回左邊
給定context,按鈕,圖片id,圖片與文字間距
code:
01 | public static void set_button_Drawable_center( final Context context, final Button button, final int imageID, final int spacing) |
03 | handler= new Handler(); |
04 | runnable= new Runnable() { |
09 | if (button.getMeasuredWidth() == 0 ) |
11 | handler.postDelayed(runnable, 0 ); |
13 | Drawable drawable=context.getResources().getDrawable(imageID); |
14 | int width=button.getMeasuredWidth(); |
15 | int height=button.getMeasuredHeight(); |
17 | int txt_width=( int )(button.getTextSize()*button.getText().length()); |
18 | int txt_height=( int )(button.getLineCount()*button.getLineHeight()); |
20 | int img_width=drawable.getIntrinsicWidth(); |
21 | int img_height=drawable.getIntrinsicHeight(); |
22 | int content_height=txt_height+img_height+spacing; |
23 | int content_width=txt_width+img_width+spacing; |
24 | int padding_w=width/ 2 -content_width/ 2 ; |
25 | int padding_h=height/ 2 -content_height/ 2 ; |
27 | button.setCompoundDrawablesWithIntrinsicBounds(drawable, null , null , null ); |
28 | button.setPadding(padding_w, 0 , 0 , 0 ); |
29 | button.setCompoundDrawablePadding(-padding_w); |
33 | handler.postDelayed(runnable, 0 ); |
結果
![](http://files.dotblogs.com.tw/superlm102/1303/201332215554867.jpg)
優點layout檔乾淨,缺點程式較複雜,不過是一勞永逸,靈活性高
這是我想到的三種方法,若還有其他的方法,麻煩給我個建議,謝謝
DotBlogs Tags: Android Java
關連文章
回應
# re: Java Android Button圖片與文字混合置中 by 過客
感謝提供這 3 種方法, 第 3 種方法在計算 text 的文字寬度不正確 , 修正如下