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下载