Kotlin练手笔记-自定义视图-钟表计时器_kotlin秒表

Kotlin学习笔记

身为Android开发者，这些年对Kotlin是越来越耳熟能详了，Google官方的推荐加持和新语言的完善性，对比传统的Java，在用法上是更显简洁高效。今天我分享一下之前在公司改用Kotlin语言作为新项目开发时，我的练手之作，主要是为了熟悉新的语言的调用方式，本人非大佬，技术上怕给不了你多少启发，适合新手观看，不喜勿喷，欢迎留言，我们一起改进。

目的：做一个秒表，方便计时。

对这个自定义的秒表，我们对它有以下功能要求：

1. 要有石英表一样，有秒针和分针；
2. 要有对应的数字显示当前的时间；
3. 提供对外调用方法（开始或者停止）。

类的继承：

自定义控件绘制单层视图时可以直接继承View,调用它的onDraw()来绘制想要的内容。

绘制钟表

我们可以在onDraw方法中使用我们熟悉的canvas来制做：

//采用黑色作为边框（背景），画一个黑色的圆形，里面掏空，变成圆圈

    var paintBg = Paint()
    paintBg.color = Color.BLACK
    paintBg.strokeWidth = (size/400).toFloat()
    paintBg.style = Paint.Style.STROKE
    canvas?.drawCircle((size/2).toFloat(),(size/2).toFloat(),(size/2).toFloat() - padding,paintBg)

    for (i in 0..60){
        //这里保存一下之前的圆圈，开始绘制时间刻度，360度/60
        canvas?.save()
        Log.e("onDraw","rotate  i = "+i)
        canvas?.rotate(6f*i,(size/2).toFloat(),(size/2).toFloat())
        var temp:Float
        //划线：区分数字线和非数字线的长度，数据线上加上阿拉伯数字，绘制好后存储做模板
        if(i > 0 && i%5==0){
            temp = 20f + padding
            paintBg.textSize = (size/25).toFloat()
            canvas?.drawText((i/5).toString(),(size/2 - size/50).toFloat(),	(size/15).toFloat()+padding,paintBg)
        }else{
            temp = 10f + padding
        }
        canvas?.drawLine((size/2).toFloat(),padding, (size/2).toFloat(), temp,paintBg)
        canvas?.restore()
    }
    
    //绘制秒针，蓝色填充，存储
    var paint = Paint()
    paint.color = Color.BLUE
    paint.strokeWidth = 10f
    
    canvas?.save()
    canvas?.rotate(6f*progress,(size/2).toFloat(),(size/2).toFloat())
    canvas?.drawLine((size/2).toFloat(),(size*0.15).toFloat(), (size/2).toFloat(), (size/2).toFloat(),paint)
    canvas?.restore()

    //绘制分针，红色填充，存储
    var paintM = Paint()
    paintM.color = Color.RED
    paintM.strokeWidth = 5f
    canvas?.save()
    canvas?.drawCircle((size/2).toFloat(),(size/2).toFloat(),10f,paintM)
    canvas?.rotate(6f*progress/60,(size/2).toFloat(),(size/2).toFloat())
    canvas?.drawLine((size/2).toFloat(),(size*0.25).toFloat(), (size/2).toFloat(), (size/2).toFloat(),paintM)
    canvas?.restore()

    //绘制数字显示屏
    val min = progress / 60
    val sec = progress % 60
    var minValue = ""
    var secValue = ""

    minValue = if (min < 10){
        "0$min"
    }else {
        min.toString()
    }
    secValue = if (sec < 10){
        "0$sec"
    }else {
        sec.toString()
    }
    val timeValue = "$minValue:$secValue"
    canvas?.drawText(timeValue,(size/2.2).toFloat(),(size + size/15).toFloat(),paintBg)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

实现秒表开始和停止

//进度变量，全局使用
var progress:Int = 0
//使用Rxjava来实现延时发送，刷新视图
fun startOrStopAnimationRatotion(isStart:Boolean) {
    if (isStart){
        disposable  = Observable.interval(0, 1000, TimeUnit.MILLISECONDS)
            .subscribeOn(Schedulers.io()).subscribe {
                progress++
                invalidate()
            }
    }else{
        disposable?.dispose()
        disposable = null
        progress = -1
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

观看运行效果：

源码链接: [https://github.com/xbzl123/MyMusicPlayer/blob/main/app/src/main/java/com/example/mymusicplayer/customview/Clock.kt).