Button的DrawableLeft及相关属性

来源：互联网发布：淘宝客服犯错奖罚制度编辑：程序博客网时间：2024/06/06 12:55

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

但是偏偏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文件干净，缺点程序较复杂,不过是一劳永逸,灵活性高

2 0