Android学习之带图片的Button

在手机应用中，往往会看到这样子的图片：

Button中有属性是可以带入图片，并设置位置的，但是偏偏Drawable Left,Drawable Top,Drawable Right,Drawable Top这四个属性放的图片都是在最旁边，像是这样：

所以，我整理两种通俗易懂，简单的方式来解决这个问题，
一、利用布局去配置,按钮在背后,前面在盖图片跟文字然后置中

<RelativeLayoutandroid: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"     /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_centerVertical="true"android:gravity="center" ><RelativeLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/footer_btn3" ></RelativeLayout><TextViewandroid: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>

这样的做法，布局可能会有点麻烦，不过能用
二、新建一个布局，用一个类来导入这个布局，可以说是自定义布局吧
先上布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:gravity="center"    >    <ImageView        android:contentDescription="@string/null_button"        android:id="@+id/imgview_comments"        style="@style/activity_toolbar_buttom"        android:src="@drawable/btn_comments"/>    <TextView        android:maxLines="1"        android:id="@+id/textview_comments"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="#ffffff"        android:text="25条评论"        android:textColor="#999999"        android:textStyle="bold"        android:typeface="serif"/></LinearLayout>

布局效果图：

然后新建一个类：

package com.jp.tools;import android.content.Context;import android.util.AttributeSet;import android.view.LayoutInflater;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.TextView;import com.jp.activity.R;/** * Created by Administrator on 2015/8/31. */public class CommentsButton extends RelativeLayout{    private ImageView imgView;    private TextView textView;    private RelativeLayout layout;    public CommentsButton(Context context) {        super(context);    }    public CommentsButton(Context context, AttributeSet attributeSet) {        super(context,attributeSet);        LayoutInflater.from(context).inflate(R.layout.button_comments, this, true);        this.imgView = (ImageView) findViewById(R.id.imgview_collection);        this.textView = (TextView) findViewById(R.id.textview_collection);//设置允许点击事件        this.setClickable(true);        this.setFocusable(true);    }    public void setImgResource(int resourceID) {        this.imgView.setImageResource(resourceID);    }    public void setText(String text) {        this.textView.setText(text);    }    public void setTextColor(int color) {        this.textView.setTextColor(color);    }    public void setTextSize(float size) {        this.textView.setTextSize(size);    }}

再在主布局上做下引用：

<com.jp.tools.CommentsButton                android:layout_width="wrap_content"                android:layout_height="40dp"                android:background="@drawable/item_style_line"                android:gravity="center"/>

就是这样子的效果了

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