在前面的文章中,我们分析了淘宝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。
项目地址