Android 绘制计时器
用小米的手机，发现其实还可以，无意间点开小米的计时器，发现界面非常好看和实用。于是自己仿照着写一个，由于技术不好，代码整体结构上可能有点乱，但主要的实现功能和掌握知识点。
Android中绘制采用canvase绘图类，加上timer计时器和handler来更新UI，核心就这点东西，非常简单。废话不多说，先附上效果图。
和小米自带的还是有差距的，主要是运行的时候指针的转动感觉没小米的那么流畅。这一点还在优化中。直接上代码，所有的注视都写上了，没什么好说的。
主页面xml文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#E0EEEE" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <LinearLayout android:id="@+id/main_view" android:layout_width="match_parent" android:layout_height="100dp" android:layout_weight="5" android:orientation="horizontal" > </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="#FFFFFF" /> <ListView android:id="@+id/main_listview" android:layout_width="match_parent" android:layout_height="30dp" android:layout_weight="2" > </ListView> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="#FFFFFF" /> <Button android:id="@+id/main_button_start" android:layout_width="match_parent" android:layout_height="10dp" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:layout_weight="1" android:text="开始" /> <LinearLayout android:id="@+id/main_lin" android:layout_width="match_parent" android:layout_height="10dp" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:layout_weight="1" android:orientation="horizontal" android:visibility="gone" > <Button android:id="@+id/main_button_zanting" android:layout_width="50dp" android:layout_height="match_parent" android:layout_weight="1" android:text="暂停" /> <Button android:id="@+id/main_button_jici" android:layout_width="50dp" android:layout_height="match_parent" android:layout_weight="1" android:text="记次" /> </LinearLayout> </LinearLayout>
辅助类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; } } }
接下来是最主要的绘图代码，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(); } }
最后是主页面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); } } }
最后说一些细节。在绘制的坐标问题上，我先是在activity布局加载完成之后，将绘制区域的宽度和高度获取到，根据这个数据来绘制，本来是想实现在不同手机屏幕实现自适应效果，后来发现。手机分辨率不一样的时候，还是没能实现，所以大家根据自己的需要改改坐标。至于怎么实现自适应屏幕，由于没有系统的学习过，现在还是没有解决好。我会努力的。还有就是小米自带计时器上有渲染的效果，就是指针转动时颜色会发生变化，这个用android自带的绘图渲染来写很麻烦。所以可能是用第三方包，这里我就不写了（试着写过，但是渲染效果很差，就删除了）。
大家有什么意见，欢迎随时交流。大神勿喷....
