Android 自定义手势九宫格View

import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.util.Log
import android.view.View
import java.util.Timer
import java.util.TimerTask

/**
 * 手势视图，用于显示手势图案
 *
 * @param context 上下文
 * @param attrs 属性集合
 * @param defStyleAttr 默认样式属性
 */
class GestureView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    private val TAG =  "GestureView"
    var circle_nor:Bitmap?=null
    var circle_sel:Bitmap?=null
    var bitmap_R = 0
    var mWith = 0
    var mHeight = 0
    var isInit = false
    private val mPaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG)
    var selList = mutableListOf<Int>()
    val x_num = 3
    val y_num = 3
    val linePaint = Paint().apply {
        color = Color.GREEN
        strokeWidth = 10f
        isAntiAlias = false
    }
    var pointList = arrayOfNulls<Point>(x_num*y_num)
    init {
    	// 初始化手势图案和选中图案的 Bitmap 对象
        circle_nor = BitmapFactory.decodeResource(resources, R.mipmap.circle_nor)
        circle_sel = BitmapFactory.decodeResource(resources, R.mipmap.circle_sel)
        bitmap_R = circle_nor?.width!!/2
    }
	 /**
     * 绘制手势图案和连线
     *
     * @param canvas 画布对象
     */
   override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        mWith = width
        mHeight = height
        initData()
        canvas?.let { drawPoint(it) }
    }
    /**
     * 绘制手势图案和选中状态的小圆点
     *
     * @param canvas 画布对象
     */
 	fun drawPoint(canvas: Canvas){
            for (i in 0 until 9){
                var point  = pointList[i]
                point?.let {
                	// 根据选中状态选择绘制的 Bitmap 对象
                    var circle = if (it.select) circle_sel else circle_nor
                    circle?.let {it1->
                        canvas.drawBitmap(it1, it.x.toFloat(),it.y.toFloat(),mPaint)
                    }
                }
            }
            if (selList.size > 1){
                for (i in 0 until selList.size-1){
                    var start = pointList[selList[i]-1]
                    var end = pointList[selList[i+1]-1]
                    canvas.drawLine(start!!.x.toFloat()+bitmap_R, start!!.y.toFloat()+bitmap_R,
                        end!!.x.toFloat()+bitmap_R, end!!.y.toFloat()+bitmap_R,linePaint)
                }
            }
    }
    var timer:Timer?=null
    var count = 0
    /**
     * 刷新手势图案，绘制选中状态的图案和连线
     *
     * @param data 手势数据，例如 "12345"
     */
  	@Synchronized
    fun refrsh(data:String){
        selList.clear()
        count = 0
        timer = Timer()
        timer?.schedule(object :TimerTask(){
            override fun run() {
                if (count >= data.length){
                    cancel()
                }else{
                    selList.add(data[count].toString().toInt())
                    Log.i(TAG,"SEL = "+selList)
                    count++
                    postInvalidate()
                }
            }
        },0,500)
    }
     /**
     * 初始化手势图案的位置信息
     */
  	fun initData(){
        for (i in 1 .. y_num){
            for (j in 1 .. x_num){
                var p = (i-1)*x_num+j-1;
//                Log.i(TAG,"init = ${p} ${j%x_num} ${i%y_num}"+selList.contains(p+1))
                pointList[p] = Point(mWith/(x_num+1)*(j%(x_num+1)),mHeight/(y_num+1)*(i%(y_num+1)),selList.contains(p+1))
            }
        }
    }
     /**
     * 手势图案点的数据类
     *
     * @param x 横坐标
     * @param y 纵坐标
     * @param select 是否选中
     */
    data class Point @JvmOverloads constructor(
        var x:Int,
        var y:Int,
        var select:Boolean = false
    )
}