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

最后

以上就是谨慎荔枝为你收集整理的Android笔记--一个图片+文字的自定义按钮的全部内容，希望文章能够帮你解决Android笔记--一个图片+文字的自定义按钮所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。