模仿淘寶客戶端倒計時控件
來源：程序員人生 發布時間：2014-10-08 08:00:01 閱讀次數：2892次
在前面的文章中，我們分析了淘寶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。
項目地址
https://github.com/ZhaoKaiQiang/RushBuyCountDownTimerView
歡迎指教。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
