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)

实现秒表开始和停止

//进度变量,全局使用
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).

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值