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)