Kotlin练手笔记-自定义视图-钟表计时器
Kotlin学习笔记
身为Android开发者,这些年对Kotlin是越来越耳熟能详了,Google官方的推荐加持和新语言的完善性,对比传统的Java,在用法上是更显简洁高效。今天我分享一下之前在公司改用Kotlin语言作为新项目开发时,我的练手之作,主要是为了熟悉新的语言的调用方式,本人非大佬,技术上怕给不了你多少启发,适合新手观看,不喜勿喷,欢迎留言,我们一起改进。
目的:做一个秒表,方便计时。
对这个自定义的秒表,我们对它有以下功能要求:
- 要有石英表一样,有秒针和分针;
- 要有对应的数字显示当前的时间;
- 提供对外调用方法(开始或者停止)。
类的继承:
自定义控件绘制单层视图时可以直接继承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)
实现秒表开始和停止
//进度变量,全局使用
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
}
}
观看运行效果:
clock timer
源码链接: [https://github.com/xbzl123/MyMusicPlayer/blob/main/app/src/main/java/com/example/mymusicplayer/customview/Clock.kt).