Android 绘制计时器

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

用小米的手机，发现其实还可以，无意间点开小米的计时器，发现界面非常好看和实用。于是自己仿照着写一个，由于技术不好，代码整体结构上可能有点乱，但主要的实现功能和掌握知识点。

Android中绘制采用canvase绘图类，加上timer计时器和handler来更新UI，核心就这点东西，非常简单。废话不多说，先附上效果图。

和小米自带的还是有差距的，主要是运行的时候指针的转动感觉没小米的那么流畅。这一点还在优化中。直接上代码，所有的注视都写上了，没什么好说的。

主页面xml文件

XMl

辅助类Times，也就是时间类，实例化即可用，然后再tostring上做了格式输出

package com.example.timer;import java.text.Format;public class Times { public int getHour() {
return Hour;
} @Override
public String toString() {
return String.format("%02d",Hour)+":"+String.format("%02d",minute)+":"+String.format("%.1f",second);
} public Times(int hour, int minute, float second) {
super();
Hour = hour;
this.minute = minute;
this.second = second;
} public void setHour(int hour) {
Hour = hour;
} public int getMinute() {
return minute;
} public void setMinute(int minute) {
this.minute = minute;
} public float getSecond() {
return second;
} public void setSecond(float second) {
this.second = second;
} private int Hour;
private int minute;
private float second; public void secondAdd() {
if (second > 59) {
second = 0;
if (minute > 59) {
minute = 0;
Hour++;
} else {
minute++;
}
} else {
second += 0.1;
}
}
}

Times

接下来是最主要的绘图代码，MyCanvases继承View，绘制圆，指针刻度等等。其中绘制指针比较复杂，但是目前没有想到什么好的方法，大家如果有，请给我分享下。指针主要是画出一个封闭的三角形，为了保持转动，使用自己写的arithmetic1一个小的算法，因为要用到圆和三角函数来计算坐标（忘了差不多了，还把数学几何图形复习了一遍......累死了。细心的朋友可能发现，Math.sin方法参数是弧度，而我显示把角度计算出来，再换算成弧度，绕了一大圈。不要喷我，当时为了这些几何图形，手头又没笔，都把我写晕了，这部分代码真心不想动了。）附上代码

package com.example.timer;import java.util.Timer;
import java.util.TimerTask;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathEffect;
import android.os.Handler;
import android.os.Message;
import android.view.View;public class MyCanvases extends View {
private Paint paint, paint2, paint3, paint4, paint5, paint6, paint7;
private Timer timer;
private Handler handler;
private Canvas canvas;
private float X = 50, Y = 20, W = 0, H = 0;
private Times times = new Times(0, 0, 0);
private Path path;
Message message;
MyTimer myTimer; public MyCanvases(Context context, float x, float y) {
super(context);
message = Message.obtain();
handler = new MyHandler(); this.W = x;
this.H = y;
paint = new Paint();
// 去锯齿
paint.setAntiAlias(true);
paint.setColor(Color.BLACK);
// 画笔样式
paint.setStyle(Paint.Style.STROKE);
// 画笔粗细
paint.setStrokeWidth(1); paint3 = new Paint();
paint3.setAntiAlias(true);
paint3.setColor(Color.GRAY);
paint3.setStyle(Paint.Style.STROKE);
paint3.setStrokeWidth(35); paint2 = new Paint();
paint2.setAntiAlias(true);
paint2.setColor(Color.BLACK);
paint2.setStyle(Paint.Style.FILL);
paint2.setTextSize(53); paint4 = new Paint();
paint4.setAntiAlias(true);
paint4.setColor(Color.rgb(224, 238, 238));
paint4.setStyle(Paint.Style.FILL_AND_STROKE);
paint4.setStrokeWidth(10); paint5 = new Paint();
paint5.setAntiAlias(true);
paint5.setColor(Color.YELLOW);
paint5.setStyle(Paint.Style.STROKE);
paint5.setStrokeWidth(30); paint6 = new Paint();
paint6.setAntiAlias(true);
paint6.setColor(Color.GRAY);
PathEffect pathEffect = new DashPathEffect(new float[] { 5, 5 }, 1);
paint6.setPathEffect(pathEffect);
paint6.setStyle(Paint.Style.STROKE);
paint6.setStrokeWidth(12); paint7 = new Paint();
paint7.setAntiAlias(true);
paint7.setColor(Color.GRAY);
paint7.setStyle(Paint.Style.FILL);
paint7.setStrokeWidth(1);
} protected void onDraw(Canvas canvas) {
this.canvas = canvas;
// 内外圆
canvas.drawCircle(W / 2, H / 2 - 50, W / 2 - 100, paint);
canvas.drawCircle(W / 2, H / 2 - 50, W / 2 - 150, paint3);
// 时间
canvas.drawText(times.toString(), W / 2 - 120, H / 2 - 50, paint2);
// 指针
// 这个指针其实是一个三角形，外圆上一点加上内圆上两点，构成一个闭合三脚形。时间变化时3个点一起移动，看起来就是一个指针的效果了
float a[] = arithmetic1(W / 2, H / 2 - 50, W / 2 - 137,
times.getSecond());
float b[] = arithmetic1(W / 2, H / 2 - 50, W / 2 - 180,
times.getSecond() - 2);
float c[] = arithmetic1(W / 2, H / 2 - 50, W / 2 - 180,
times.getSecond() + 2);
path = new Path();
path.moveTo(a[0], a[1]);
path.lineTo(b[0], b[1]);
path.lineTo(c[0], c[1]);
path.close();
canvas.drawPath(path, paint4);
// 小圆
canvas.drawCircle(W - 150, H - 150, 80, paint);
// 刻度
canvas.drawCircle(W - 150, H - 150, 70, paint6);
// 指针 canvas.drawCircle(W - 150, H - 150, 10, paint7); a = arithmetic1(W - 150, H - 150, 60, times.getSecond() * 60);
b = arithmetic1(W - 150, H - 150, 10, times.getSecond() * 60 - 4);
c = arithmetic1(W - 150, H - 150, 10, times.getSecond() * 60 + 4);
path = new Path();
path.moveTo(a[0], a[1]);
path.lineTo(b[0], b[1]);
path.lineTo(c[0], c[1]);
path.close();
canvas.drawPath(path, paint7);
} // 计时器
public class MyTimer extends TimerTask {
public void run() {
handler.sendMessage(new Message().obtain());
}
} public class MyHandler extends Handler {
public void handleMessage(Message msg) {
times.secondAdd();
invalidate(); }
} /**
* 自定义方法，以60秒为圆的一圈，给出圆的参数，获得对应时间在圆周上点的坐标。所以不同时间可以通用，只需要根据秒对比相应的直即可。（
* 例如传入的time为分钟，将time/60就是分钟的坐标变化）
*
* @param x
* 圆心x坐标
* @param y
* 圆心y坐标
* @param r
* 圆的半径
* @param time
* 时间
* @return 返回一个float数组，大小为2。float0为x坐标，float1为y坐标；
*/
public float[] arithmetic1(float x, float y, float r, float time) {
float circle[] = new float[2];
float angle;
angle = 90 - time * 6;
circle[0] = (float) (Math.cos(angle * Math.PI / 180) * r + x);
circle[1] = (float) (y - Math.sin(angle * Math.PI / 180) * r);
return circle;
} /**
* 启动计时器
*/
public void Start() {
timer = new Timer();
myTimer = new MyTimer();
timer.schedule(myTimer, 0, 100); } /**
* 停止计时器
*/
public void Stop() {
timer.cancel();
myTimer.cancel();
} /**
* 获取这一刻的时间
*
* @return
*/
public String getTime() {
return times.toString();
} /**
* 这个方法其实就是重置时间
*
*/
public void setTime() {
times = new Times(0, 0, 0);
invalidate();
}
}

MyCanvases

最后是主页面activity代码，其中在listview上没有写布局，就用最简单的数组资源做适配器，因为这个listview只有一个显示的功能，所以就没用多纠结。大家可以自己改改喜欢的布局加上去。

package com.example.timer;import java.util.ArrayList;
import java.util.List;import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.ListView;public class MainActivity extends Activity {
private ListView listview;
private Button btnStart, btnJici, btnStop;
private LinearLayout lin, linView;
MyCanvases myCanvases;
List<String> list; protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
list = new ArrayList<String>();
intview();
} /**
* 获得控件关联，为按钮设置监听
*/
private void intview() {
linView = (LinearLayout) findViewById(R.id.main_view);
listview = (ListView) findViewById(R.id.main_listview);
btnStart = (Button) findViewById(R.id.main_button_start);
btnStart.setOnClickListener(new MyOnClick());
btnJici = (Button) findViewById(R.id.main_button_jici);
btnJici.setOnClickListener(new MyOnClick());
btnStop = (Button) findViewById(R.id.main_button_zanting);
btnStop.setOnClickListener(new MyOnClick());
lin = (LinearLayout) findViewById(R.id.main_lin);
} /**
* 实现点击事件接口，用控件id来区分不同事件，将所有事件集中到一起处理。（个人比较喜欢这样写）
*
* @author
*
*/
public class MyOnClick implements OnClickListener { public void onClick(View v) {
switch (v.getId()) {
case R.id.main_button_start:
myCanvases.Start();
btnStart.setVisibility(View.GONE);
lin.setVisibility(View.VISIBLE);
break;
case R.id.main_button_zanting:
if (btnStop.getText().toString().equals("暂停")) {
myCanvases.Stop();
btnStop.setText("继续");
btnJici.setText("重置");
} else {
myCanvases.Start();
btnStop.setText("暂停");
btnJici.setText("记次");
}
break;
case R.id.main_button_jici:
if (btnJici.getText().toString().equals("重置")) {
myCanvases.setTime();
btnStart.setVisibility(View.VISIBLE);
lin.setVisibility(View.GONE);
btnStop.setText("暂停");
btnJici.setText("记次");
// 清空数据
list.clear();
// 清空listview
listview.setAdapter(null);
} else {
// 添加数据
list.add(myCanvases.getTime());
String[] text = new String[list.size()];
for (int i = 0; i < list.size(); i++) {
text[i] = "第" + (i + 1) + "次: "
+ list.get(i);
}
// 建立适配器
ArrayAdapter<String> adapter = new ArrayAdapter<String>(
MainActivity.this,
android.R.layout.simple_list_item_1, text);
// 添加适配器
listview.setAdapter(adapter);
// 将listview的焦点始终锁定在最后一行，很有用
listview.setSelection(adapter.getCount());
}
default:
break;
}
}
} // 重写activit的onWindowFocusChanged方法，是为了在布局加载完成之后，
// 才能获得到控件的大小和位置，将参数传递到绘图类
public void onWindowFocusChanged(boolean hasFocus) {
if (hasFocus) {
myCanvases = new MyCanvases(this, linView.getWidth(),
linView.getHeight());
//将绘制的图像加载到对应的布局上显示
linView.addView(myCanvases);
}
}
}

MainActivity

最后说一些细节。在绘制的坐标问题上，我先是在activity布局加载完成之后，将绘制区域的宽度和高度获取到，根据这个数据来绘制，本来是想实现在不同手机屏幕实现自适应效果，后来发现。手机分辨率不一样的时候，还是没能实现，所以大家根据自己的需要改改坐标。至于怎么实现自适应屏幕，由于没有系统的学习过，现在还是没有解决好。我会努力的。还有就是小米自带计时器上有渲染的效果，就是指针转动时颜色会发生变化，这个用android自带的绘图渲染来写很麻烦。所以可能是用第三方包，这里我就不写了（试着写过，但是渲染效果很差，就删除了）。

大家有什么意见，欢迎随时交流。大神勿喷....