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

作者:赵凯强 时间:2023-09-18 21:25:09 

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

项目地址

来源:https://blog.csdn.net/zhaokaiqiang1992/article/details/39580603

标签:Android,淘宝,倒计时
0
投稿

猜你喜欢

  • Android自定义View实现圆弧进度效果

    2021-08-20 02:26:21
  • Java8新特性之接口中的默认方法和静态方法详解

    2022-05-10 15:16:19
  • SpringCloud入门实验环境搭建

    2022-11-17 10:21:14
  • IDEA社区版下载安装流程详解(小白篇)

    2021-11-13 12:37:18
  • C# 在PDF中添加墨迹注释Ink Annotation的步骤详解

    2022-01-31 14:23:29
  • Android禁止EditText自动弹出软键盘的方法及遇到问题

    2021-07-18 06:35:55
  • C#中ArrayList的使用方法

    2023-01-26 10:20:47
  • java利用url实现网页内容的抓取

    2023-05-14 11:10:21
  • Android使用ViewFlipper和GestrueDetector共同实现滑屏效果实例

    2023-11-11 10:49:06
  • SpringBoot 使用 FTP 操作文件的过程(删除、上传、下载文件)

    2021-07-26 10:40:05
  • Android实现三角形气泡效果方式汇总

    2021-12-20 06:21:51
  • C#线性渐变画刷LinearGradientBrush用法实例

    2022-01-21 05:29:43
  • C#中public变量不能被unity面板识别的解决方案

    2022-03-26 18:17:18
  • Java Socket编程详解及示例代码

    2022-06-29 07:05:27
  • Java设计模式之模板方法模式Template Method Pattern详解

    2023-09-21 12:28:04
  • 解决fcitx输入法在IDEA中输入法候选框无法跟随光标移动的问题

    2021-09-21 14:48:25
  • 解决logback-classic 使用testCompile的打包问题

    2021-07-01 08:16:50
  • 基于opencv实现车道线检测

    2023-03-11 10:07:52
  • Android ViewPager导航小圆点实现无限循环效果

    2022-07-09 13:10:33
  • android显示TextView文字的倒影效果实现代码

    2022-11-13 00:05:40
  • asp之家 软件编程 m.aspxhome.com