Android倒计时电子钟的实现(上篇)

习惯了Android的默认倒计时字体，这里采用Canvas画图的方式实现倒计时时钟效果，首先先看一下静态效果

不难发现，每个数字都是一个小圆形，也可以改成一个小正方形等等，这些都是可以实现的。

这里使用圆形。

仔细观察数字发现其是由一个二维数组组成，类似如下所示：根据下面数组可以画出0的，效果

 {0,0,1,1,1,0,0},
		         {0,1,1,0,1,1,0},
		         {1,1,0,0,0,1,1},
		         {1,1,0,0,0,1,1},
		         {1,1,0,0,0,1,1},
		         {1,1,0,0,0,1,1},
		         {1,1,0,0,0,1,1},
		         {1,1,0,0,0,1,1},
		         {0,1,1,0,1,1,0},
		         {0,0,1,1,1,0,0}

具体如何实现，可以先定义一个常量类，这里也可以使用json格式，然后进行读取。

/**
 * Constants.java
 * Copyright(C) 2014
 * creator:cuiran 2014-12-19 下午2:28:34
 */
package com.cayden.countdown;

/**
 * TODO
 * @author cuiran
 * @version 1.0.0
 */
public interface Constants {

	int[][] data0={
				 {0,0,1,1,1,0,0},
		         {0,1,1,0,1,1,0},
		         {1,1,0,0,0,1,1},
		         {1,1,0,0,0,1,1},
		         {1,1,0,0,0,1,1},
		         {1,1,0,0,0,1,1},
		         {1,1,0,0,0,1,1},
		         {1,1,0,0,0,1,1},
		         {0,1,1,0,1,1,0},
		         {0,0,1,1,1,0,0}
    			};
	int[][] data1={
			    {0,0,0,1,1,0,0},
	            {0,1,1,1,1,0,0},
	            {0,0,0,1,1,0,0},
	            {0,0,0,1,1,0,0},
	            {0,0,0,1,1,0,0},
	            {0,0,0,1,1,0,0},
	            {0,0,0,1,1,0,0},
	            {0,0,0,1,1,0,0},
	            {0,0,0,1,1,0,0},
	            {1,1,1,1,1,1,1}
			};

	int[][] data2={
			    {0,1,1,1,1,1,0},
	            {1,1,0,0,0,1,1},
	            {0,0,0,0,0,1,1},
	            {0,0,0,0,1,1,0},
	            {0,0,0,1,1,0,0},
	            {0,0,1,1,0,0,0},
	            {0,1,1,0,0,0,0},
	            {1,1,0,0,0,0,0},
	            {1,1,0,0,0,1,1},
	            {1,1,1,1,1,1,1}
			};
	int[][] data3={
			    {1,1,1,1,1,1,1},
	            {0,0,0,0,0,1,1},
	            {0,0,0,0,1,1,0},
	            {0,0,0,1,1,0,0},
	            {0,0,1,1,1,0,0},
	            {0,0,0,0,1,1,0},
	            {0,0,0,0,0,1,1},
	            {0,0,0,0,0,1,1},
	            {1,1,0,0,0,1,1},
	            {0,1,1,1,1,1,0}
		};
	int[][] data4={
			 	{0,0,0,0,1,1,0},
	            {0,0,0,1,1,1,0},
	            {0,0,1,1,1,1,0},
	            {0,1,1,0,1,1,0},
	            {1,1,0,0,1,1,0},
	            {1,1,1,1,1,1,1},
	            {0,0,0,0,1,1,0},
	            {0,0,0,0,1,1,0},
	            {0,0,0,0,1,1,0},
	            {0,0,0,1,1,1,1}
		};
	int[][] data5={
				{1,1,1,1,1,1,1},
	            {1,1,0,0,0,0,0},
	            {1,1,0,0,0,0,0},
	            {1,1,1,1,1,1,0},
	            {0,0,0,0,0,1,1},
	            {0,0,0,0,0,1,1},
	            {0,0,0,0,0,1,1},
	            {0,0,0,0,0,1,1},
	            {1,1,0,0,0,1,1},
	            {0,1,1,1,1,1,0}
		};
	int[][] data6={
				{0,0,0,0,1,1,0},
	            {0,0,1,1,0,0,0},
	            {0,1,1,0,0,0,0},
	            {1,1,0,0,0,0,0},
	            {1,1,0,1,1,1,0},
	            {1,1,0,0,0,1,1},
	            {1,1,0,0,0,1,1},
	            {1,1,0,0,0,1,1},
	            {1,1,0,0,0,1,1},
	            {0,1,1,1,1,1,0}
		};
	int[][] data7={
				{1,1,1,1,1,1,1},
	            {1,1,0,0,0,1,1},
	            {0,0,0,0,1,1,0},
	            {0,0,0,0,1,1,0},
	            {0,0,0,1,1,0,0},
	            {0,0,0,1,1,0,0},
	            {0,0,1,1,0,0,0},
	            {0,0,1,1,0,0,0},
	            {0,0,1,1,0,0,0},
	            {0,0,1,1,0,0,0}
		};
	int[][] data8={
			  	{0,1,1,1,1,1,0},
	            {1,1,0,0,0,1,1},
	            {1,1,0,0,0,1,1},
	            {1,1,0,0,0,1,1},
	            {0,1,1,1,1,1,0},
	            {1,1,0,0,0,1,1},
	            {1,1,0,0,0,1,1},
	            {1,1,0,0,0,1,1},
	            {1,1,0,0,0,1,1},
	            {0,1,1,1,1,1,0}
		};
	int[][] data9={
			    {0,1,1,1,1,1,0},
	            {1,1,0,0,0,1,1},
	            {1,1,0,0,0,1,1},
	            {1,1,0,0,0,1,1},
	            {0,1,1,1,0,1,1},
	            {0,0,0,0,0,1,1},
	            {0,0,0,0,0,1,1},
	            {0,0,0,0,1,1,0},
	            {0,0,0,1,1,0,0},
	            {0,1,1,0,0,0,0}
		};
	int[][] data10={
				{0,0,0,0},
	            {0,0,0,0},
	            {0,1,1,0},
	            {0,1,1,0},
	            {0,0,0,0},
	            {0,0,0,0},
	            {0,1,1,0},
	            {0,1,1,0},
	            {0,0,0,0},
	            {0,0,0,0}
		};

}

然后自定义一个CountDownView继承SurfaceView，实现Runnable, Callback,Constants 这三个接口，之所以实现线程接口是为了后续动态改变时候使用。

具体代码如下：

/**
 * CountDownView.java
 * Copyright(C) 2014
 * creator:cuiran 2014-12-19 下午2:18:59
 */
package com.cayden.countdown.view;

import java.util.ArrayList;

import com.cayden.countdown.Constants;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;
import android.view.SurfaceHolder;
import android.view.SurfaceHolder.Callback;
import android.view.SurfaceView;

/**
 * 倒计时View
 * @author cuiran
 * @version 1.0.0
 */
public class CountDownView extends SurfaceView implements Runnable, Callback,Constants {
	private static final String TAG="CountDownView";
	private SurfaceHolder mHolder;    //用于控制SurfaceView
	private Canvas mCanvas;    //声明画布
	private Paint mPaint;    //声明画笔

    private Thread mThread;    //声明一个线程

    private static final int RADIUS=10;	//声明小球半径
    private static final int MARGIN_TOP = 60;
    private static final int MARGIN_LEFT = 30;
    private ArrayList<int[][]> list=new ArrayList<int[][]>();

	public CountDownView(Context context) {
		super(context);
		  mHolder = this.getHolder();    	//获得SurfaceHolder对象
	      mHolder.addCallback(this);    	//添加状态监听
	      mPaint = new Paint();    			//创建一个画笔对象
	      mPaint.setColor(Color.BLUE);   	//设置画笔的颜色

	      list.add(data0);
	      list.add(data1);
	      list.add(data2);
	      list.add(data3);
	      list.add(data4);
	      list.add(data5);
	      list.add(data6);
	      list.add(data7);
	      list.add(data8);
	      list.add(data9);
	      list.add(data10);
	}

	@Override
	public void surfaceChanged(SurfaceHolder arg0, int arg1, int arg2, int arg3) {

	}

	@Override
	public void surfaceCreated(SurfaceHolder arg0) {
		  mThread = new Thread(this);    //创建线程对象

		  mThread.start();
	}

	@Override
	public void surfaceDestroyed(SurfaceHolder arg0) {

	}

	@Override
	public void run() {
		try{
			mDraw();
		}catch(Exception e){
			Log.e(TAG,"run error",e);
		}

	}

	/**
	 * 自定义绘图方法
	 * 2014-12-19 下午2:22:45
	 *
	 */
	public void mDraw() {
		 mCanvas = mHolder.lockCanvas();   			 //获得画布对象,开始对画布画画
		 mCanvas.drawColor(Color.BLACK);    		 //设置画布颜色为黑色
		 canvas(mCanvas);
		 mHolder.unlockCanvasAndPost(mCanvas);       //把画布显示在屏幕上
	}

	public void canvas(Canvas mCanvas) {
		//画圆,(x轴,y轴,半径,画笔)

        int hours=12;
        int minutes=36;
        int seconds=24;
        canvasDigit( MARGIN_LEFT , MARGIN_TOP , 	hours/10 , mCanvas );
        canvasDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , hours%10 , mCanvas );
        canvasDigit( MARGIN_LEFT + 30*(RADIUS + 1) , MARGIN_TOP , 10 , mCanvas );
        canvasDigit( MARGIN_LEFT + 39*(RADIUS+1) , MARGIN_TOP , minutes/10 , mCanvas);
        canvasDigit( MARGIN_LEFT + 54*(RADIUS+1) , MARGIN_TOP , minutes%10 , mCanvas);
        canvasDigit( MARGIN_LEFT + 69*(RADIUS+1) , MARGIN_TOP , 10 , mCanvas);
        canvasDigit( MARGIN_LEFT + 78*(RADIUS+1) , MARGIN_TOP , seconds/10 , mCanvas);
        canvasDigit( MARGIN_LEFT + 93*(RADIUS+1) , MARGIN_TOP , seconds%10 , mCanvas);
	}

	public void canvasDigit(int x,int y,int num,Canvas mCanvas) {
		int [][] data=list.get(num);
		for(int i=0;i<data.length;i++){

			for(int j=0;j<data[i].length;j++){

				if(data[i][j]==1){

					mCanvas.drawCircle(x + j*2*(RADIUS+1)+(RADIUS+1), y + i*2*(RADIUS+1)+(RADIUS+1), RADIUS, mPaint);

				}

			}

		}
	}

}

关键代码是在画圆时候中间间隔的一个计算公式

mCanvas.drawCircle(x + j*2*(RADIUS+1)+(RADIUS+1), y + i*2*(RADIUS+1)+(RADIUS+1), RADIUS, mPaint);

这里引用了一个图片：

图片就是表示计算下一个圆的位置

然后在写一个Activity 来显示我们刚写的View

package com.cayden.countdown;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.Window;
import android.view.WindowManager;

import com.cayden.countdown.view.CountDownView;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		 // 隐藏状态栏
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);

        // 把Activity的标题去掉
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        // 设置布局
        setContentView(new CountDownView(this));
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

最后运行效果就如最开始的图片显示的。

时间： 2024-04-07 23:08:01

Android倒计时电子钟的实现(上篇)的相关文章

Android倒计时电子钟的实现(下篇)

本篇继续上篇未完成的部分,这篇文章会实现动态效果如图所示在程序中先给定一个截止时间: 2014-12-20 00:00:00 然后计算当期时间和截止时间相差的时间 private long getCurrentShowTimeSeconds() { Date curTime = new Date(); long ret = endDate.getTime() - curTime.getTime(); ret =Math.round( ret/1000 ); return ret >= 0 ?

Android倒计时功能的实现(CountDownTimer）

以前编程的时候,遇到倒计时的功能时,经常自己去写,但其实Android已经帮封装好了一个倒计时类CountDownTimer,其实是将后台线程的创建和Handler队列封装成为了一个方便的类调用. 说明: CountDownTimer timer = new CountDownTimer(30000, 1000)中,第一个参数表示总时间,第二个参数表示间隔时间. 意思就是每隔一秒会回调一次方法onTick,然后30秒之后会回调onFinish方法. package com.androidcoun

Android -- 倒计时的实现

CountDownTimer CountDownTimer这个类,实现了倒计时的功能.将后台线程的创建和Handler队列封装成一个方便的类调用. 这个类比较简单,只有四个方法:onTick,onFinsh.cancel和start.其中前面两个是抽象方法,所以要重写一下. 下面是官方给的一个小例子: new CountdownTimer(30000, 100

android倒计时(整理)

android倒计时用到CountDownTimer Android中文API(143) —— CountDownTimer 前言本章内容android.os.CountDownTime章节,版本为Android 4.0 r1,翻译来自:"liliang1222",再次感谢他 !期待你一起参与翻译Android的相关资料,联系我[email protected]. 声明欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com/ Android中文翻

Android 倒计时动画

今天给大家分享一个可以用来做倒计时的动画....下期开始准备写几篇动画的详细解释,毕竟授人以鱼不如授人以渔接下来还是先上效果图熟悉动画的人相信心中已经有了想法..其实这个动画就是Alpha动画和Scale动画结合在一起 <set xmlns:android="http://schemas.android.com/apk/res/android" > <alpha android:duration="1000" android:fromAlpha

android 倒计时实现

新的商品详情,对特卖要增加倒计时的功能: 采用了android系统的CountDownTimer这个类关于这个类的用法: * Schedule a countdown until a time in the future, with * regular notifications on intervals along the way. * * Example of showing a 30 second countdown in a text field: * * <pre class="

Android倒计时效果

借用聚美优品的广告词来开始今天的文章之旅: 从未年轻过的人,一定无法体会这个世界的偏见.我们被世俗拆散,也要为爱情勇往直前:我们被房价羞辱,也要让简陋的现实变的温暖:我们被权威漠视,也要为自己的天分保持骄傲:我们被平庸折磨, 也要开始说走就走的冒险.所谓的光辉岁月,并不是后来闪耀的日子,而是无人问津时,你对梦想的偏执,你是否有勇气, 对自己忠诚到底,我是Bruce常,我为自己加油. 平常开发中,在做倒计时效果的时候,经常需要用到定时器,今天看到一篇文章,专门写定时器的,我就仔细阅读

Android 倒计时工具类

在平时我们编程的时候,经常会用到倒计时这个功能,很多人不知道Android已经帮封装好了一个类,往往都自己写.现在发现了这个类,大家共享一下: 在一个TextView不断显示剩下的时间,代码如下: [java] view plaincopy private TextView vertifyView; private CountDownTimer timer = new CountDownTimer(10000, 1000) { @Override public void onTick(long

Android倒计时CountDownTimer小记

Android 超简便的倒计时实现: CountDownTimer CountDownTimer由系统提供查资料的时候发现了CountDownTimer这个类之后果断抛弃了以前的倒计时做法功能: 30秒倒计时每次间隔1秒参数: mc.start();方法开始 mc.cancel();方法结束 new MyCountDownTimer(30000, 1000); 第一个参数表示总的时间为30000毫秒,间隔1000毫秒直接上代码: package com.example.daoj