程序员人生 网站导航

模仿淘宝客户端倒计时控件

栏目:互联网时间:2014-10-08 08:00:01

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

    欢迎指教。

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐