Android Button圖片與文字混合置中

相信很多人都有像這樣的需求

但是偏偏Button的Drawable Left,Drawable Top,Drawable Right,Drawable Top

這四個屬性放的圖片都是在最旁邊，像是這樣

整理出三種方法

 

1.利用版面去配置,按鈕在背後,前面在蓋圖片跟文字然後置中

01	<RelativeLayout

02	android:layout_width="0dp"

03	android:layout_height="wrap_content"

04	android:layout_weight="1"

05	android:background="@drawable/footer_btn4" >

06

07

<Button

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" />

15

16	<LinearLayout

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" >

22

23	<RelativeLayout

24	android:layout_width="wrap_content"

25	android:layout_height="wrap_content"

26	android:background="@drawable/footer_btn3" >

27	</RelativeLayout>

28

29

<TextView

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" />

37	</LinearLayout>

38	</RelativeLayout>

結果是

優點是靈活性高，缺點就是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);//設定圖片為文字的大小

5	//d.setBounds(0,0,d.getIntrinsicWidth(),d.getIntrinsicHeight());//原始大小

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的結果

設定成文字高度的結果

優點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)

02

{

03	handler=new Handler();

04	runnable=new Runnable() {

05

06

@Override

07	public void run() {

08	// TODO Auto-generated method stub

09	if(button.getMeasuredWidth() == 0)

10

{

11	handler.postDelayed(runnable, 0);

12

}else{

13	Drawable drawable=context.getResources().getDrawable(imageID);

14	int width=button.getMeasuredWidth();

15	int height=button.getMeasuredHeight();

16

17	int txt_width=(int)(button.getTextSize()*button.getText().length());

18	int txt_height=(int)(button.getLineCount()*button.getLineHeight());

19

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;

26

27	button.setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null);

28	button.setPadding(padding_w,0,0,0);

29	button.setCompoundDrawablePadding(-padding_w);

30

}

31

}

32

};

33	handler.postDelayed(runnable, 0);

34

}

結果

優點layout檔乾淨，缺點程式較複雜,不過是一勞永逸,靈活性高

 

這是我想到的三種方法，若還有其他的方法，麻煩給我個建議，謝謝

DotBlogs Tags: Android Java

關連文章

回應

• # re: Java Android Button圖片與文字混合置中 by 過客

  感謝提供這 3 種方法, 第 3 種方法在計算 text 的文字寬度不正確 , 修正如下

   

  public void set_button_Drawable_center(final Context context,final Button button,final int imageID,final int spacing)

  {

  final Handler handler = new Handler();

  runnable = new Runnable() {

  @Override

  public void run() {

  if(button.getMeasuredWidth() == 0)

  {

  handler.postDelayed(runnable, 0);

  }else{

  Drawable drawable=context.getResources().getDrawable(imageID);

  int width=button.getMeasuredWidth();

  int height=button.getMeasuredHeight();

   

  Rect bounds = new Rect();

  Paint textPaint = button.getPaint();

  textPaint.getTextBounds(button.getText().toString(),0,button.getText().length(),bounds);

  int txt_height = bounds.height();

  int txt_width = bounds.width();    

   

  int img_width = drawable.getIntrinsicWidth();

  int img_height = drawable.getIntrinsicHeight();

  int content_height = txt_height + img_height + spacing;

  int content_width = txt_width + img_width + spacing;

   

  int padding_w = 0;

  if (width >= content_width)

  padding_w = width/2 - content_width/2;

  int padding_h = height/2 - content_height/2;

   

  button.setCompoundDrawablesWithIntrinsicBounds(drawable,null,null,null);

  button.setPadding(padding_w,0,0,0);

  button.setCompoundDrawablePadding(-padding_w);

  }

  }

  };

  handler.postDelayed(runnable, 0);

  }