Kotlin练手笔记-自定义视图-仿雷达扫描

Kotlin学习笔记

之前我有点好奇旋转式的扇形雷达扫描页面是怎么实现的?
分解一下它的组成:渐变扇形,复数的圆形。很简单,用canvas就能绘制出来。

目的:仿雷达扫描

对这个自定义的扫描效果,我们对它有以下功能要求:

  1. 要有开始和停止;
  2. 要有速度增加和减少。

类的继承:

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

绘制雷达

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

废话少说。直接上代码:

import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View
import io.reactivex.Observable
import io.reactivex.disposables.Disposable
import io.reactivex.schedulers.Schedulers
import java.util.concurrent.TimeUnit

class RadarView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {


    private var widthReal: Float = 0f
    private var speed: Float = 1.0f
    var startAngle = 0f
    
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        widthReal = MeasureSpec.getSize(widthMeasureSpec).toFloat()
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas.let {
            //画背景圆圈9个,使用红色
            var paint = Paint()
            paint.color = Color.RED
            paint.strokeWidth = 3f
            paint.style = Paint.Style.STROKE
            it?.save()
            for (i in 0..10) {
                it?.drawCircle(widthReal / 2, widthReal, widthReal / 4 * (0.1f * i), paint)
            }
            it?.restore()

            //绘制扫描扇形,使用渐进背景色,绿色到透明,旋转它使用焦点旋转的方式
            var paintBg = Paint()
            var lg=LinearGradient(widthReal/2,widthReal/2,widthReal/2,widthReal,Color.GREEN,Color.TRANSPARENT,Shader.TileMode.MIRROR)
            paintBg.setShader(lg)

            it?.rotate(startAngle,widthReal / 2, widthReal)
            it?.drawArc(widthReal*0.25f, widthReal*0.75f,widthReal*0.75f,widthReal*1.25f,0f,60f,true,paintBg)

        }
    }


    private var disposable : Disposable? = null
    //动画开始或者停止
    fun startOrStopAnimationScan(isStart:Boolean) {
        if (isStart){
            disposable  = Observable.interval(0, (50/speed).toLong(), TimeUnit.MILLISECONDS)
                .subscribeOn(Schedulers.io()).subscribe {
                    startAngle += 3.6f
                    invalidate()
                }
        }else{
            disposable?.dispose()
            disposable = null
        }
    }
    //旋转速度加倍
    fun setSpeedAdd(){
        this.speed = speed * 2
        startOrStopAnimationScan(false)
        startOrStopAnimationScan(true)
    }
    //旋转速度减倍
    fun setSpeedReduce(){
        this.speed = speed / 2
        startOrStopAnimationScan(false)
        startOrStopAnimationScan(true)
    }
 }

观看运行效果:

Screen_Recording_20230129

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

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值