Android UI编程进阶——使用SurfaceViewt和Canvas实现动态时钟
概述:
很多时候我们想要自己写一些类似时钟、罗盘的控件,却又找不到合适的Demo。我想这时你可能索性就直接上图片了。在Android有Canvas和Paint这么好的画师的情况下,还是选择使用图片,的确是有一些尴尬了。下面我就利用一步一步实现自定义时钟来对这个问题做一个讲解。
错误示例:
这里我有一个“错误”的示例。这里的错误其实应该是要打上双引号的,因为它不是真的错误,只是在某些时候,它是不适当的。下面就让我们先来学习一下这个示例,了解一下这个示例中哪些是不适合使用的技术。
效果图展示:
看了上面的两张运行效果图我们可以看到很正常的两张运行图,不过这不是全部。错误信息下面再进行展示和分析。在这里我就来解释一下为什么说这个示例不是全错,只是不恰当的原因。因为如果我们的需求是不用变化的图形,例如一些多边形的展示等,不需要实时去刷新界面,OK,这个示例没有任何问题,而且使用简单。针对这一点,我想也是有必要附上代码来展示一下实现过程。
静态画图代码:
public class CustomCanvasView extends View { private static final String TAG = CustomCanvasView.class.getName(); private Paint paint; private int mRadius; private Canvas mCanvas; private int mHours; private int mMinutes; private int mSeconds; private Thread mThread; public CustomCanvasView(Context context, int radius) { super(context); paint = new Paint(); paint.setColor(Color.RED); paint.setStrokeJoin(Paint.Join.ROUND); paint.setStrokeCap(Paint.Cap.ROUND); paint.setStrokeWidth(5); mRadius = radius; } // 在这里我们将测试canvas提供的绘制图形方法 @Override protected void onDraw(Canvas canvas) { mCanvas = canvas; drawCompass(mCanvas); refreshClock(); } private void refreshClock() { mThread = new Thread() { @Override public void run() { try { while (true) { handler.sendEmptyMessage(0x123); sleep(1000); } } catch (InterruptedException e) { e.printStackTrace(); } } }; mThread.start(); } Handler handler = new Handler() { public void handleMessage(Message msg) { Calendar c = Calendar.getInstance(); mHours = c.getTime().getHours(); mMinutes = c.getTime().getMinutes(); mSeconds = c.getTime().getSeconds(); invalidate(); c = null; }; }; /** * 绘制罗盘 * 2015-2-3 */ private void drawCompass(Canvas canvas) { paint.setAntiAlias(true); paint.setStyle(Style.STROKE); canvas.translate(canvas.getWidth() / 2, mRadius + 300); // 平移罗盘 canvas.drawCircle(0, 0, mRadius, paint); // 画圆圈 // 使用path绘制路径文字 canvas.save(); drawLabel(canvas); canvas.restore(); drawDividing(canvas); drawMinuteHand(canvas, 0); canvas = null; } /** * 绘制罗盘内侧的标签文本 * 2015-2-4 */ private void drawLabel(Canvas canvas) { canvas.translate(-155, -155); Path path = new Path(); path.addArc(new RectF(0, 0, mRadius + 100, mRadius + 100), -180, 180); Paint citePaint = new Paint(paint); citePaint.setTextSize(30); citePaint.setStrokeWidth(1); canvas.drawTextOnPath("http://blog.csdn.net/lemon_tree", path, 35, 0, citePaint); path = null; citePaint = null; canvas = null; } /** * 绘制刻度 * 2015-2-4 */ private void drawDividing(Canvas canvas) { Paint divdPaint = new Paint(paint); // 小刻度画笔对象 divdPaint.setStrokeWidth(1); divdPaint.setTextSize(20); float y = mRadius; int count = 60; // 总刻度数 canvas.rotate(35 * 360 / count, 0f, 0f); for (int i = 0; i < count; i++) { if (i % 5 == 0) { canvas.drawLine(0f, y, 0, y + 20f, paint); canvas.drawText(String.valueOf(i / 5 + 1), -4f, y + 55f, divdPaint); } else { canvas.drawLine(0f, y, 0f, y + 15f, divdPaint); } canvas.rotate(360 / count, 0f, 0f); // 旋转画纸 } divdPaint = null; canvas = null; } /** * 绘制分针 * 2015-2-4 */ private void drawMinuteHand(Canvas canvas, int second) { Paint tmpPaint = new Paint(paint); tmpPaint.setStrokeWidth(2); tmpPaint.setTextSize(30); tmpPaint.setColor(Color.GRAY); tmpPaint.setStrokeWidth(4); canvas.drawCircle(0, 0, 10, tmpPaint); tmpPaint.setStyle(Style.FILL); tmpPaint.setColor(Color.YELLOW); canvas.drawCircle(0, 0, 5, tmpPaint); canvas.rotate(mSeconds * 6, 0f, 0f); canvas.drawLine(0, 20, 0, -135, paint); tmpPaint = null; canvas = null; } }
错误日志展示及原因分析:
说实话上面两张图看上去真的很棒,可是如果你下载了我的源码并运行之后,你可能就会发现,在你的指针走了大概20秒的时候,程序就挂了。查看日志就会发现如下错误信息:
是不是有一种又是该死的OOM问题的感觉,说实话我也是这种感觉。这可能是因为invalidate()的时候没有清理回收资源的问题,而且这里的自定义控件是继承View,没有采用双缓冲技术,致使程序崩溃。而此处的资源回收我也做了一些努力,可是问题依旧存在。于是我就开始找寻另一条路径来解决问题——SurfaceView。
----------------------------------------- Split -------------------------------------------
正确示例:
前导知识学习——脏矩形:
所谓脏矩形刷新,意为仅刷新有新变化的部分所在的矩形区域,而其他没用的部分就不去刷新,以此来减少资源浪费。我们可以通过在获取Canvas画布时,为其指派一个参数来声明我们需要画布哪个局部,这样就可以只获得这个部分的控制权.(参考来自:http://www.linuxidc.com/Linux/2012-02/54367.htm)本例中,使用的是全局刷新。
前导知识学习——双缓冲:
关于双缓冲的概念,这里引用一下百度百科的说明(点击进入)。
如果要按照我的理解来通俗地讲一遍的话,我想应该是这个样子的:有一个暗房,里面有一个功能深厚的画师,他负责绘制图画。暗房对外提供了一个小窗口,这个小窗口是用来展示画师画出来的图画。这个暗房里还有一个画师的助理,他负责把画师画出来的图画以一定速度展示在这个小窗口上(这边的一定速度肯定是比画师绘画的速度要慢一些)。
实例示范:
运行效果图展示:
看到以上的运行效果图是不感觉很炫?(注:上面的GIF看上去有些怪,那是因为本人截图没截好的原因,运行程序的时候会流畅很多)写出来的时候,我也感觉比用图片实现的要好很多。接下来就来慢慢学习一下实现它的过程吧。
首先要做的事
1.extends SurfaceView
2.implements SurfaceHolder.Callback
3.自定义一个Thread
第二步:逻辑功能实现
基于上一个不恰当的版本,这里对上面的逻辑功能进行一些引用。
绘制秒针:
/** * 绘制秒针 * 2015-2-4 */ private void drawSecondHand(Canvas canvas) { Paint handPaint = new Paint(mPaint); handPaint.setStrokeWidth(2); handPaint.setStyle(Style.FILL); int angle = (mSeconds + 25) * 6; // 计算角度 canvas.rotate(angle, 0f, 0f); canvas.drawLine(0, 20, 0, -135, mPaint); }
绘制分针:
/** * 绘制分针 * 2015-2-4 */ private void drawMinuteHand(Canvas canvas) { Paint handPaint = new Paint(mPaint); handPaint.setStrokeWidth(2); handPaint.setStyle(Style.FILL); canvas.save(); int angle = (mMinutes + 25) * 6; // 计算角度 canvas.rotate(angle, 0f, 0f); canvas.drawLine(0, 20, 0, -110, mPaint); canvas.restore(); }从秒针到分针代码明显多了几行,而这多出来的几行代码有什么作用呢?
在绘制分针的时候我们可以看到这样一句:canvas.rotate(angle, 0f, 0f);它的作用是将画布旋转angle度,而如果我们在绘制分针的时候不对画布作一个状态保存,那下次在绘制时针的时候将是旋转之后所做的逻辑,为了避免这些不必要的麻烦,我们需要对其先保存后再复原处理。
绘制时针:
/** * 绘制时针 * 2015-2-4 */ private void drawHourHand(Canvas canvas) { Paint handPaint = new Paint(mPaint); handPaint.setStyle(Style.FILL); handPaint.setStrokeWidth(8); canvas.save(); int angle = (((mHours % 12) * 5 + 25) * 6) + (mMinutes * 6 * 5 / 60); // 计算角度 canvas.rotate(angle, 0f, 0f); canvas.drawLine(0, 20, 0, -90, handPaint); canvas.restore(); }时针的绘制和分针几乎一致,唯一要注意的是绘制时针时角度的计算。如果你这里只按小时数来计算,那它永远都是指向大刻度。永远不会指向两个大刻度之间的部分,为了解决这个问题,我们需要加上分钟数一起计算。即加了n分钟下时针又偏移了多少角度。
自定义Thread
使用SurfaceView需要用到一个锁的机制。也就是说我这边绘图的时候,不允许被打扰,有一个独占的概念。可以通过以下代码实现:
class DrawThread extends Thread { private SurfaceHolder holder; public boolean isRun; public DrawThread(SurfaceHolder holder) { this.holder = holder; isRun = true; } @Override public void run() { while (isRun) { Canvas canvas = null; try { synchronized (holder) { canvas = holder.lockCanvas(null); canvas.drawColor(Color.BLACK); drawClock(canvas); holder.unlockCanvasAndPost(canvas); // 解锁画布,提交画好的图像 Thread.sleep(1000); } } catch (InterruptedException e) { e.printStackTrace(); } } } }大家可以看到在我上完锁之后,对画布有一行canvas.drawColor(Color.BLACK);的代码操作。我想你应该是明白为什么的。对!就是清屏!如果没有这一句代码,上一次绘制的图形没有被清除,这让整个界面感觉起来很凌乱。下面就让我们一起来感受一下在没有清屏且只有一根指针的情况下,Canvas动态绘制出来的图形。
好了,利用SurfaceView和Canvas对自定义时钟的学习就到这里了,如果你还有一些不太明白的地方,欢迎前往我的上一篇博客《Android自定义控件前导基础知识学习(一)——Canvas》进行学习,或以评论的方式与我进行交流。