Android Button圖片與文字混合置中

来源：互联网发布：激活python2.7 知乎编辑：程序博客网时间：2024/05/25 08:13

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

但是偏偏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塞圖片到文字中

1SpannableString spanText = new SpannableString("1重置");
2Drawable d = getResources().getDrawable(R.drawable.footer_btn3);
3int a = (int)btnConfirmSearch.getTextSize();
4d.setBounds(0, 0, a, a);//設定圖片為文字的大小
5//d.setBounds(0,0,d.getIntrinsicWidth(),d.getIntrinsicHeight());//原始大小
6ImageSpan imageSpan = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
7spanText.setSpan( imageSpan,0 , 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
8btnConfirmSearch.setText(spanText);

這樣會有個問題，假設圖片高度比文字高度高，文字會往下跑，以下為兩種對齊方式

ImageSpan.ALIGN_BASELINE跟ImageSpan.ALIGN_BOTTOM的結果

設定成文字高度的結果

優點layout檔乾淨，缺點圖片不能大於文字高度

3.程式動態設置

設置paddingLeft把圖片推到右邊,此時文字也會一起被推到右邊

再設置drawablePadding負的把文字拉回左邊

給定context,按鈕,圖片id,圖片與文字間距

code:

01public 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);
}