android验证验证码界面ui实现倒计时实现

因为某些原因（你懂得），要求app里面加入绑定手机号功能，因为是阅读类app，不能因为不绑定手机号就不让人阅读，所以，决定在评论的地方加入验证功能，没有绑定手机的不能发表评论。

本文采取弹出PopupWindow的方式，提醒用户进行绑定。

先看图看图

画验证码：

public class Code {

private static final char[] CHARS = {
'2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'm',
'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
};

private static Code bmpCode;

public static Code getInstance() {
if(bmpCode == null)
bmpCode = new Code();
return bmpCode;
}

//default settings
private static final int DEFAULT_CODE_LENGTH = 4;
private static final int DEFAULT_FONT_SIZE = 25;
private static final int DEFAULT_LINE_NUMBER = 2;
private static final int BASE_PADDING_LEFT = 10, RANGE_PADDING_LEFT = 15, BASE_PADDING_TOP = 15, RANGE_PADDING_TOP = 20;
private static final int DEFAULT_WIDTH = 100, DEFAULT_HEIGHT = 40;

//settings decided by the layout xml
//canvas width and height
private int width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT;

//random word space and pading_top
private int base_padding_left = BASE_PADDING_LEFT, range_padding_left = RANGE_PADDING_LEFT,
base_padding_top = BASE_PADDING_TOP, range_padding_top = RANGE_PADDING_TOP;

//number of chars, lines; font size
private int codeLength = DEFAULT_CODE_LENGTH, line_number = DEFAULT_LINE_NUMBER, font_size = DEFAULT_FONT_SIZE;

//variables
private String code;
private int padding_left, padding_top;
private Random random = new Random();

public Bitmap createBitmap() {
padding_left = 0;

Bitmap bp = Bitmap.createBitmap(width, height, Config.ARGB_8888);
Canvas c = new Canvas(bp);

code = createCode();

c.drawColor(Color.WHITE);
Paint paint = new Paint();
paint.setTextSize(font_size);

for (int i = 0; i < code.length(); i++) {
randomTextStyle(paint);
randomPadding();
c.drawText(code.charAt(i) + "", padding_left, padding_top, paint);
}

for (int i = 0; i < line_number; i++) {
drawLine(c, paint);
}

c.save( Canvas.ALL_SAVE_FLAG );
c.restore();//
return bp;
}

public String getCode() {
return code;
}

private String createCode() {
StringBuilder buffer = new StringBuilder();
for (int i = 0; i < codeLength; i++) {
buffer.append(CHARS[random.nextInt(CHARS.length)]);
}
return buffer.toString();
}

private void drawLine(Canvas canvas, Paint paint) {
int color = randomColor();
int startX = random.nextInt(width);
int startY = random.nextInt(height);
int stopX = random.nextInt(width);
int stopY = random.nextInt(height);
paint.setStrokeWidth(1);
paint.setColor(color);
canvas.drawLine(startX, startY, stopX, stopY, paint);
}

private int randomColor() {
return randomColor(1);
}

private int randomColor(int rate) {
int red = random.nextInt(256) / rate;
int green = random.nextInt(256) / rate;
int blue = random.nextInt(256) / rate;
return Color.rgb(red, green, blue);
}

private void randomTextStyle(Paint paint) {
int color = randomColor();
paint.setColor(color);
paint.setFakeBoldText(random.nextBoolean());
float skewX = random.nextInt(11) / 10;
skewX = random.nextBoolean() ? skewX : -skewX;
paint.setTextSkewX(skewX);
}

private void randomPadding() {
padding_left += base_padding_left + random.nextInt(range_padding_left);
padding_top = base_padding_top + random.nextInt(range_padding_top);
}
}

内部提供方法初始化和获取验证码内容

image_code.setImageBitmap(Code.getInstance().createBitmap()); //初始化验证码

Code.getInstance().getCode(); //获取验证码

计时器

public abstract class CountDownTimer {

/**
* Millis since epoch when alarm should stop.
执行的总时间
*/
private final long mMillisInFuture;

/**
* The interval in millis that the user receives callbacks
时间间隔
*/
private final long mCountdownInterval;

// 停止时间
private long mStopTimeInFuture;

/**
* @param millisInFuture The number of millis in the future from the call
*   to {@link #start()} until the countdown is done and {@link #onFinish()}
*   is called.
* @param countDownInterval The interval along the way to receive
*   {@link #onTick(long)} callbacks.
两参数构造函数，总时间，时间间隔
*/
public CountDownTimer(long millisInFuture, long countDownInterval) {
mMillisInFuture = millisInFuture;
mCountdownInterval = countDownInterval;
}

/**
* Cancel the countdown.
取消到timer
*/
public final void cancel() {
mHandler.removeMessages(MSG);
}

/**
* Start the countdown.
开始
*/
public synchronized final CountDownTimer start() {
if (mMillisInFuture <= 0) {
onFinish();
return this;
}
// 停止时间 = 系统启动时间 + 总计时间
mStopTimeInFuture = SystemClock.elapsedRealtime() + mMillisInFuture;
mHandler.sendMessage(mHandler.obtainMessage(MSG));
return this;
}

/**
* Callback fired on regular interval.
* @param millisUntilFinished The amount of time until finished.
*/
public abstract void onTick(long millisUntilFinished);

/**
* Callback fired when the time is up.
*/
public abstract void onFinish();

private static final int MSG = 1;

// handles counting down
private Handler mHandler = new Handler() {

@Override
public void handleMessage(Message msg) {

synchronized (CountDownTimer.this) {
// 计算剩余总时间
final long millisLeft = mStopTimeInFuture - SystemClock.elapsedRealtime();
// 小于等于 0 ，回调 onFinish
if (millisLeft <= 0) {
onFinish();
} else if (millisLeft < mCountdownInterval) { // 小于计时间隔 ，delayed 一个消息
// no tick, just delay until done
sendMessageDelayed(obtainMessage(MSG), millisLeft);
} else {
long lastTickStart = SystemClock.elapsedRealtime();
onTick(millisLeft);

// take into account user's onTick taking time to execute
long delay = lastTickStart + mCountdownInterval - SystemClock.elapsedRealtime();

// special case: user's onTick took more than interval to
// complete, skip to next interval
while (delay < 0) delay += mCountdownInterval;

sendMessageDelayed(obtainMessage(MSG), delay);
}
}
}
};

使用：倒计时

final CountDownTimer timer = new CountDownTimer(60000, 1000) {

@Override
public void onTick(long millisUntilFinished) {
get_verfiy_code.setText(millisUntilFinished/1000 + "秒");
}

@Override
public void onFinish() {
get_verfiy_code.setEnabled(true);
get_verfiy_code.setText("获取验证码");
}
};

点击按钮的时候：

get_verfiy_code.setEnabled(false);
timer.start();

popupwinow全部如下：

/**
* Created by
* xiaomi on 2017/9/8.
*/
public class VerifyPopupWindow {
/**
* 手机验证popupwindow
*/
private EditText phone_number;
private EditText input_image_code;
private ImageView image_code;
private EditText input_code;
private Button sure;
private String inputcode;
private String realCode;
private Button no_verify;
private CustomPopWindow mPopWindow;
private Button get_verfiy_code;
private Context mContext;

public VerifyPopupWindow(Context context){

this.mContext=context;
}

public  void showPopupWindow(){

View contentView = LayoutInflater.from(mContext).inflate(R.layout.user_phone_number, null);
phone_number = (EditText) contentView.findViewById(R.id.phone_number);    //填入手机号
input_image_code=(EditText)contentView.findViewById(R.id.input_image_code);//填入图片验证码
image_code=(ImageView)contentView.findViewById(R.id.image_code);       //图片验证码
input_code=(EditText) contentView.findViewById(R.id.input_code);       //填入手机验证码
sure=(Button)contentView.findViewById(R.id.user_verfiy_submit);        //确定绑定
no_verify=(Button)contentView.findViewById(R.id.ignore_verfiy_submit); //暂不验证
get_verfiy_code=(Button)contentView.findViewById(R.id.get_verfiy_code);//获取手机验证码

final CountDownTimer timer = new CountDownTimer(60000, 1000) {

@Override
public void onTick(long millisUntilFinished) {
get_verfiy_code.setText(millisUntilFinished/1000 + "秒");
}

@Override
public void onFinish() {
get_verfiy_code.setEnabled(true);
get_verfiy_code.setText("获取验证码");
}
};

image_code.setImageBitmap(Code.getInstance().createBitmap());     //初始化验证码
View.OnClickListener listener = new View.OnClickListener() {
@Override
public void onClick(View v) {

switch (v.getId()){
case R.id.image_code:
image_code.setImageBitmap(Code.getInstance().createBitmap());
break;

case R.id.user_verfiy_submit:

if (TextUtils.isEmpty(phone_number.getText().toString())){
Toast.makeText(mContext,"请您输入手机号码", Toast.LENGTH_SHORT).show();
return;
}
if (TextUtils.isEmpty(input_code.getText().toString())){
Toast.makeText(mContext,"请您输入手机验证码", Toast.LENGTH_SHORT).show();
return;
}

PostFormBuilder builder= OkHttpUtils.post();
builder

.addParams("tel",phone_number.getText().toString())
.addParams("telyzm",input_code.getText().toString());

builder.build()
.execute(new StringCallback() {
@Override
public void onError(Call call, Exception e, int id) {

}
@Override
public void onResponse(String response, int id) {

try{
JSONObject jsonObject=new JSONObject(response);
int staus=jsonObject.getInt("staus");
if (staus==1){
mPopWindow.dissmiss();
Toast.makeText(mContext,"恭喜您，账号绑定成功！", Toast.LENGTH_SHORT).show();
}else {
String message=jsonObject.getString("msg");
if (message!=null){
Toast.makeText(mContext,message, Toast.LENGTH_SHORT).show();
}
}
}catch (Exception e){
e.printStackTrace();
}
}
});
break;

case R.id.ignore_verfiy_submit:

mPopWindow.dissmiss();

break;
case R.id.get_verfiy_code:
//  MyCountDownTimer.start();

inputcode=input_image_code.getText().toString();
realCode = Code.getInstance().getCode();

if (TextUtils.isEmpty(phone_number.getText().toString())){

Toast.makeText(mContext,"请您输入手机号码", Toast.LENGTH_SHORT).show();
return;
}
if (realCode.equalsIgnoreCase(inputcode)){
//发送手机信息到服务器，通知服务端发验证码，并获取验证码。
getVerifyCode(phone_number.getText().toString());
}else{
Toast.makeText(mContext,"您输入的验证码有误，请重新输入", Toast.LENGTH_SHORT).show();
}
get_verfiy_code.setEnabled(false);
timer.start();
break;
}
}
};
image_code.setOnClickListener(listener);
sure.setOnClickListener(listener);
no_verify.setOnClickListener(listener);
get_verfiy_code.setOnClickListener(listener);

mPopWindow = new CustomPopWindow.PopupWindowBuilder(mContext)
.setView(contentView)
.enableOutsideTouchableDissmiss(false)// 设置点击PopupWindow之外的地方，popWindow不关闭，如果不设置这个属性或者为true，则关闭
.enableBackgroundDark(true) //弹出popWindow时，背景是否变暗
.setBgDarkAlpha(0.7f) // 控制亮度
.setOnDissmissListener(new PopupWindow.OnDismissListener() {
@Override
public void onDismiss() {
Log.e("TAG","onDismiss");
}
})
.create();

mPopWindow.showAtLocation(contentView, Gravity.CENTER, 0, 0);
}
//把手机后台获取手机验证码
public void getVerifyCode(String phoneNumber){

try {
PostFormBuilder builder=OkHttpUtils.post().url("");
builder

.addParams("tel",phoneNumber);
builder
.build()
.execute(new StringCallback() {
@Override
public void onError(Call call, Exception e, int id) {

}

@Override
public void onResponse(String response, int id) {

try {

JSONObject jsonObject=new JSONObject(response);
int staus=jsonObject.getInt("staus");
String message=jsonObject.getString("msg");
if (staus==1){

Toast.makeText(mContext,message, Toast.LENGTH_SHORT).show();

}else {

if (message!=null){
Toast.makeText(mContext,message, Toast.LENGTH_SHORT).show();
}
}
}catch (Exception e){

e.printStackTrace();
}
}
});
}catch (Exception e){

e.printStackTrace();

}
}

}

简单也挺麻烦的。。。

demo下载