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

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

2017-03-10 00:00 633 查看
样图:



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

代码:

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 ivBottom;
private ImageView ivIcon;
private TextView tvTitle;

/**
* 变量
*/
private boolean isClick = true;//是否可以点击,不可点击状态的话自动设置透明度为半透明
private long touchTime;//按下时间,抬起的时候判定一下,超过300毫秒算点击
private int colorNormal = 0xffcccccc;//正常icon描边颜色
private int colorPress = 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);
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);
setRoundStroke(ivBottom, colorNormal);
if (isClick) {
ivIcon.setAlpha((float) 1);
ivBottom.setAlpha((float) 1);
tvTitle.setAlpha((float) 1);
} else {
ivIcon.setAlpha((float) 0.5);
ivBottom.setAlpha((float) 0.5);
tvTitle.setAlpha((float) 0.5);
}
tvTitle.setTextColor(colorNormal);
}
});
}

/**
* 设置图标
*
* @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) {
ivIcon.setAlpha((float) 1);
ivBottom.setAlpha((float) 1);
tvTitle.setAlpha((float) 1);
} else {
ivIcon.setAlpha((float) 0.5);
ivBottom.setAlpha((float) 0.5);
tvTitle.setAlpha((float) 0.5);
}
}

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

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

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

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

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

/**
* 画一个描边
*
* @param iv
* @param color
*/
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);
}
});
}

/**
* 监听触摸时间,用于更新状态以及响应点击监听
* @param event
* @return
*/
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
touchTime = new Date().getTime();
if (isClick) {
setRoundColor(ivBottom, colorNormal);
tvTitle.setTextColor(colorPress);
}
break;
case MotionEvent.ACTION_UP:
if (new Date().getTime() - touchTime < 300) {
//点击回调
if (onClickListener != null) {
onClickListener.onClick(ImgAndTvButton.this);
}
}

if (isClick) {
setRoundStroke(ivBottom, colorNormal);
tvTitle.setTextColor(colorNormal);
}
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 自定义控件