Button的DrawableLeft及相关属性

相信很多人都有像这样的需求

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

这四个属性放的图片都是在最旁边，像是这样

整理出三种方法

1.利用版面去配置,按钮在背后,前面在盖图片跟文字然后置中

<RelativeLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:background="@drawable/footer_btn4" >

    <Button
    android:id="@+id/btnReset"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/selector_menu_footer_btn"
    android:onClick="btnConfirmSearch"
    android:textColor="@color/white"
    android:textSize="@dimen/tenant_search_condition_condition_btn_txt" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:gravity="center" >

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/footer_btn3" >
        </RelativeLayout>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:text="@string/tenant_search_condition_loc_btn_reset"
            android:textColor="@color/white"
            android:textSize="@dimen/tenant_search_condition_condition_btn_txt" />
    </LinearLayout>
</RelativeLayout>

结果是

 

优点是灵活性高，缺点就是layout档会比较复杂

2.透过SpannableString,ImageSpan塞图片到文字中

SpannableString spanText = new SpannableString("dasd");
Drawable d = getResources().getDrawable(R.drawable.footer_btn3);
int a = (int)btnConfirmSearch.getTextSize();
d.setBounds(0, 0, a, a);//设定图片为文字的大小
//d.setBounds(0,0,d.getIntrinsicWidth(),d.getIntrinsicHeight());//原始大小
ImageSpan imageSpan = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
spanText.setSpan( imageSpan,0 ,"dasd".length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
btnConfirmSearch.setText(spanText);

这样会有个问题，假设图片高度比文字高度高，文字会往下跑，以下为两种对齐方式

ImageSpan.ALIGN_BASELINE跟ImageSpan.ALIGN_BOTTOM的结果

 

设定成文字高度的结果

 

优点layout文件干净，缺点图片不能大于文字高度

 

3.程序动态设置

设置paddingLeft把图片推到右边,此时文字也会一起被推到右边

再设置drawablePadding负的把文字拉回左边

给定context,按钮,图片id,图片与文字间距

code:

Drawable drawable=context.getResources().getDrawable(imageID);
int width=button.getMeasuredWidth();       
int height=button.getMeasuredHeight();

int txt_width=(int)(button.getTextSize()*button.getText().length());
int txt_height=(int)(button.getLineCount()*button.getLineHeight());

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=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);

结果

 

优点layout文件干净，缺点程序较复杂,不过是一劳永逸,灵活性高