Android笔记--一个图片+文字的自定义按钮

样图：

功能说明，大概意思就是，没按的时候是描边，按下之后是填充，可以自定义设置颜色和文本文字。

代码：

package com.imxiaoyu.common.widget;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.imxiaoyu.common.R;
import com.imxiaoyu.common.utils.ImageUtils;

import java.util.Date;


/**
 * 通用的图片+ 文字按钮
 * Created by 庞光渝 on 2017/2/18.
 */

public class ImgAndTvButton extends RelativeLayout {

    /**
     * UI
     */
    private RelativeLayout rlyIcon;
    private ImageView ivTop;
    private ImageView ivBottom;
    private ImageView ivIcon;
    private TextView tvTitle;

    /**
     * 变量
     */
    private boolean isClick=true;//是否可以点击
    private long touchTime;//按下时间，抬起的时候判定一下，超过300毫秒算点击
    private int roundColor=0xffcccccc;//正常icon描边颜色
    private int canNotClickRoundColor=0xe4cccccc;//不可点击时背景颜色，这个颜色会覆盖在icon上，建议使用90%透明度的正常颜色
    private int normalColorTv =0xffcccccc;//文字正常颜色
    private int pressColorTv =0xff999999;//文字按下之后的颜色

    /**
     * 接口
     */
    private OnClickListener onClickListener;


    public ImgAndTvButton(Context context) {
        super(context);
        initView(context);
    }

    public ImgAndTvButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    public ImgAndTvButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
    }

    private void initView(Context context){
        // 加载布局
        LayoutInflater.from(context).inflate(R.layout.layout_image_and_txt_buttom, this);
        rlyIcon=(RelativeLayout)findViewById(R.id.rly_icon);
        ivTop =(ImageView)findViewById(R.id.iv_top);
        ivBottom =(ImageView)findViewById(R.id.iv_bottom);
        ivIcon=(ImageView)findViewById(R.id.iv_icon);
        tvTitle=(TextView)findViewById(R.id.tv_title);

        rlyIcon.post(new Runnable() {
            @Override
            public void run() {
                //保持rlyIcon是正方形
                LayoutParams para = (LayoutParams) rlyIcon.getLayoutParams();
                para.width=rlyIcon.getHeight();
                rlyIcon.setLayoutParams(para);
                LayoutParams para1 = (LayoutParams) ivBottom.getLayoutParams();
                para.width=rlyIcon.getHeight();
                para.height=rlyIcon.getHeight();
                ivBottom.setLayoutParams(para1);
                LayoutParams para2 = (LayoutParams) ivTop.getLayoutParams();
                para.width=rlyIcon.getHeight();
                para.height=rlyIcon.getHeight();
                ivTop.setLayoutParams(para2);

                setRoundStroke(ivBottom,roundColor);
                setRoundColor(ivTop,canNotClickRoundColor);
                if(isClick){
                    ivBottom.setVisibility(VISIBLE);
                    ivTop.setVisibility(GONE);
                }else{
                    ivBottom.setVisibility(GONE);
                    ivTop.setVisibility(VISIBLE);
                }
                tvTitle.setTextColor(normalColorTv);
            }
        });
    }

    /**
     * 设置图标
     * @param icon
     */
    public void setButtonIcon(int icon){
        ivIcon.setImageResource(icon);
    }

    /**
     * 设置图标
     * @param bitmap
     */
    public void setButtonIcon(Bitmap bitmap){
        ivIcon.setImageBitmap(bitmap);
    }

    /**
     * 设置点击时间
     * @param onButtomClickListener
     */
    public void setOnButtonClickListener(OnClickListener onButtomClickListener){
        onClickListener=onButtomClickListener;
    }

    /**
     * 设置是否可以点击
     * @param bln
     */
    public void setIsClick(boolean bln){
        isClick=bln;
        if(isClick){
            ivBottom.setVisibility(VISIBLE);
            ivTop.setVisibility(GONE);
        }else{
            ivBottom.setVisibility(GONE);
            ivTop.setVisibility(VISIBLE);
        }
    }

    /**
     * 返回TextView对象，需要怎么设置样式自己设置
     * @return
     */
    public TextView getTvTitle(){
        return tvTitle;
    }

    /**
     * 设置文字
     * @param str
     */
    public void setTitle(String str){
        if(str==null){
            str="";
        }
        tvTitle.setText(str);
    }

    /**
     * 设置图标背景颜色样式
     * @param roundColor
     * @param canNotClickRoundColor
     */
    public void setIconColorStyle(int roundColor,int canNotClickRoundColor){
        this.roundColor=roundColor;
        this.canNotClickRoundColor=canNotClickRoundColor;
        setRoundStroke(ivBottom,roundColor);
        setRoundColor(ivTop,canNotClickRoundColor);
    }

    /**
     * 设置文字颜色样式
     * @param normalColorTv
     * @param pressColorTv
     */
    public void setTvColorStyle(int normalColorTv,int pressColorTv){
        this.normalColorTv =normalColorTv;
        this.pressColorTv =pressColorTv;
        tvTitle.setTextColor(normalColorTv);
    }

    /**
     * 给一个控件设置一个纯色的圆形背景图片
     * @param iv
     * @param color
     */
    private void setRoundColor(ImageView iv,int color){
        Bitmap bitmap = Bitmap.createBitmap(iv.getWidth(), iv.getHeight(),
                Bitmap.Config.ARGB_8888);
        bitmap.eraseColor(color);//填充颜色
        bitmap= ImageUtils.bitmap2RoundBitmap(bitmap);
        iv.setImageBitmap(bitmap);
    }

    private void setRoundStroke(final ImageView iv, final int color){
        rlyIcon.post(new Runnable() {
            @Override
            public void run() {
                int number=4;//描边宽度
                Bitmap bitmap = Bitmap.createBitmap(rlyIcon.getHeight(), rlyIcon.getHeight(),
                        Bitmap.Config.ARGB_8888);
                Canvas canvas=new Canvas(bitmap);
                RectF rect1 = new RectF(number,number, rlyIcon.getHeight()-number, rlyIcon.getHeight()-number);
                Paint paint = new Paint();
                paint.setAntiAlias(true);
                paint.setStrokeWidth(number);
                paint.setStyle(Paint.Style.STROKE);
                paint.setColor(color);
                canvas.drawArc(rect1, 0, 360, true, paint);
                iv.setImageBitmap(bitmap);
            }
        });

    }

    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                touchTime=new Date().getTime();
                if(isClick){
                    setRoundColor(ivBottom,roundColor);
                    tvTitle.setTextColor(normalColorTv);
                }
                break;
            case MotionEvent.ACTION_UP:
                if(new Date().getTime()-touchTime<300){
                    //点击回调
                    if(onClickListener!=null){
                        onClickListener.onClick(ImgAndTvButton.this);
                    }
                }

                if(isClick){
                    setRoundStroke(ivBottom,roundColor);
                    tvTitle.setTextColor(pressColorTv);
                }
                break;
        }
        return true;
    }
}

布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rly_bg"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="4">

            <RelativeLayout
                android:id="@+id/rly_icon"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true">

                <ImageView
                    android:id="@+id/iv_bottom"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />

                <ImageView
                    android:layout_centerVertical="true"
                    android:layout_centerHorizontal="true"
                    android:id="@+id/iv_icon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <ImageView
                    android:id="@+id/iv_top"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" />
            </RelativeLayout>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="2">

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:textColor="@color/gray_9999"
                android:textSize="12dp" />
        </RelativeLayout>

    </LinearLayout>
</RelativeLayout>

调用：

        itbPower.setButtonIcon(R.drawable.ic_infrared_power);
        itbPower.setTitle("电源");
        itbPower.setOnButtonClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ToastUtils.showToast(getActivity(), "电源");
            }
        });

http:doutugongchang.com