Android实现淘宝客户端倒计时界面

在前面的文章中，我们分析了淘宝android客户端的一些界面实现和用户体验，今天这篇文章，主要介绍如何使用自定义控件，实现抢购倒计时的功能。

首先，我们看一下实现的效果。

实现效果很简单哈，就是一个倒计时的自定义控件。

下面简单介绍一下实现的思路。

首先，显示时间使用的是Textview，因为没有很特殊的效果，因此，我们可以自己写一个简单的布局文件，来作为显示的界面。

而关于时间的变更，我们使用timer类就可以实现，用一个1000毫秒的Timer，每过一秒，更新一下界面即可。

但是在更新时间的显示数字的时候，有一个问题需要注意，我的思路是用6个Textview来显示时间，因此，时分秒的十位数字和个位数字需要单独显示，个位上显示的数字是0-9，十位上显示的数字范围是0-5，所以需要分开实现。

当秒的十位个位都是0的时候，在过一秒，分的个位就要减一，这就涉及到借位的问题，因此，每变更一次数字，都需要判断是否需要借位。

具体的实现思路，大家还是看代码吧。

/*
 * Copyright (c) 2014, 青岛司通科技有限公司 All rights reserved.
 * File Name：RushBuyCountDownTimerView.java
 * Version：V1.0
 * Author：zhaokaiqiang
 * Date：2014-9-26
 */
package com.qust.widght; 

import java.util.Timer;
import java.util.TimerTask; 

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast; 

import com.qust.rushbuycountdowntimerview.R; 

@SuppressLint("HandlerLeak")
public class RushBuyCountDownTimerView extends LinearLayout { 

  // 小时，十位
  private TextView tv_hour_decade;
  // 小时，个位
  private TextView tv_hour_unit;
  // 分钟，十位
  private TextView tv_min_decade;
  // 分钟，个位
  private TextView tv_min_unit;
  // 秒，十位
  private TextView tv_sec_decade;
  // 秒，个位
  private TextView tv_sec_unit; 

  private Context context; 

  private int hour_decade;
  private int hour_unit;
  private int min_decade;
  private int min_unit;
  private int sec_decade;
  private int sec_unit;
  // 计时器
  private Timer timer; 

  private Handler handler = new Handler() { 

    public void handleMessage(Message msg) {
      countDown();
    };
  }; 

  public RushBuyCountDownTimerView(Context context, AttributeSet attrs) {
    super(context, attrs); 

    this.context = context;
    LayoutInflater inflater = (LayoutInflater) context
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View view = inflater.inflate(R.layout.view_countdowntimer, this); 

    tv_hour_decade = (TextView) view.findViewById(R.id.tv_hour_decade);
    tv_hour_unit = (TextView) view.findViewById(R.id.tv_hour_unit);
    tv_min_decade = (TextView) view.findViewById(R.id.tv_min_decade);
    tv_min_unit = (TextView) view.findViewById(R.id.tv_min_unit);
    tv_sec_decade = (TextView) view.findViewById(R.id.tv_sec_decade);
    tv_sec_unit = (TextView) view.findViewById(R.id.tv_sec_unit); 

  } 

  /**
   *
   * @Description: 开始计时
   * @param
   * @return void
   * @throws
   */
  public void start() { 

    if (timer == null) {
      timer = new Timer();
      timer.schedule(new TimerTask() { 

        @Override
        public void run() {
          handler.sendEmptyMessage(0);
        }
      }, 0, 1000);
    }
  } 

  /**
   *
   * @Description: 停止计时
   * @param
   * @return void
   * @throws
   */
  public void stop() {
    if (timer != null) {
      timer.cancel();
      timer = null;
    }
  } 

  /**
   * @throws Exception
   *
   * @Description: 设置倒计时的时长
   * @param
   * @return void
   * @throws
   */
  public void setTime(int hour, int min, int sec) { 

    if (hour >= 60 || min >= 60 || sec >= 60 || hour < 0 || min < 0
        || sec < 0) {
      throw new RuntimeException("Time format is error,please check out your code");
    } 

    hour_decade = hour / 10;
    hour_unit = hour - hour_decade * 10; 

    min_decade = min / 10;
    min_unit = min - min_decade * 10; 

    sec_decade = sec / 10;
    sec_unit = sec - sec_decade * 10; 

    tv_hour_decade.setText(hour_decade + "");
    tv_hour_unit.setText(hour_unit + "");
    tv_min_decade.setText(min_decade + "");
    tv_min_unit.setText(min_unit + "");
    tv_sec_decade.setText(sec_decade + "");
    tv_sec_unit.setText(sec_unit + ""); 

  } 

  /**
   *
   * @Description: 倒计时
   * @param
   * @return boolean
   * @throws
   */
  private void countDown() { 

    if (isCarry4Unit(tv_sec_unit)) {
      if (isCarry4Decade(tv_sec_decade)) { 

        if (isCarry4Unit(tv_min_unit)) {
          if (isCarry4Decade(tv_min_decade)) { 

            if (isCarry4Unit(tv_hour_unit)) {
              if (isCarry4Decade(tv_hour_decade)) {
                Toast.makeText(context, "时间到了",
                    Toast.LENGTH_SHORT).show();
                stop();
              }
            }
          }
        }
      }
    }
  } 

  /**
   *
   * @Description: 变化十位，并判断是否需要进位
   * @param
   * @return boolean
   * @throws
   */
  private boolean isCarry4Decade(TextView tv) { 

    int time = Integer.valueOf(tv.getText().toString());
    time = time - 1;
    if (time < 0) {
      time = 5;
      tv.setText(time + "");
      return true;
    } else {
      tv.setText(time + "");
      return false;
    } 

  } 

  /**
   *
   * @Description: 变化个位，并判断是否需要进位
   * @param
   * @return boolean
   * @throws
   */
  private boolean isCarry4Unit(TextView tv) { 

    int time = Integer.valueOf(tv.getText().toString());
    time = time - 1;
    if (time < 0) {
      time = 9;
      tv.setText(time + "");
      return true;
    } else {
      tv.setText(time + "");
      return false;
    } 

  }
}

项目在我的github上，大家可以下载，也可以提交BUG。

项目地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

• Android定时器和倒计时实现淘宝秒杀功能
• Android中使用TextView实现高仿京东淘宝各种倒计时效果
• android自定义倒计时控件示例
• android实现倒计时功能代码
• Android实现计时与倒计时的常用方法小结
• Android实现加载广告图片和倒计时的开屏布局
• Android 实现闪屏页和右上角的倒计时跳转实例代码
• Android账号注册实现点击获取验证码倒计时效果
• Android自定义圆形倒计时进度条