您的位置:首页 > 移动开发 > Android开发

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

2017-03-10 17:57 555 查看
样图:



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

代码:

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 canNotCl
4000
ickRoundColor=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.bitmap2Round
dee3
Bitmap(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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: