Android学习之带图片的Button

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

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

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

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

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

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