首页 > 代码库 > Android倒计时电子钟的实现(上篇)
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=http://www.mamicode.com/list.get(num);>
关键代码是在画圆时候中间间隔的一个计算公式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; } }最后运行效果就如最开始的图片显示的。
Android倒计时电子钟的实现(上篇)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。