import android.annotation.SuppressLint
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import com.silencefly96.module_common.R
import java.util.*
import kotlin.math.sqrt
/**
 * 九宮格控件
 *
 * @author silence
 * @date 2022-11-09
 */
class PatternLockView @JvmOverloads constructor(
    context: Context,
    attributeSet: AttributeSet? = null,
    defStyleAttr: Int = 0
): View(context, attributeSet, defStyleAttr){
    /**
     * 預設值
     */
    var preData = LinkedList<Int>()
    /**
     * 回調接口
     */
    var listener: OnMoveUpListener? = null
    // 當前值
    private var curData = LinkedList<Int>()
    // 圓的顏色
    private val mCircleColor: Int
    // 線的顏色
    private val mLineColor: Int
    // 圓半徑占最短寬高的比例
    private val mRadiusPercent: Float
    // 兩點之間的距離
    private var mBetweenLength = 0f
    // 第一個圓所在位置
    private var mStartX = 0f
    private var mStartY = 0f
    // 圓半徑
    private var mRadius = 0f
    // 當前手指所在的位置
    private var mCurPosX = 0f
    private var mCurPosY = 0f
    // 是否在移動的狀態(tài)
    private var isMoving = false
    // 路徑
    private var mPath = Path()
    // 校驗結果， -1失敗，0未驗證，1驗證成功，根據(jù)驗證結果修改線條顏色
    private var mCheckResult = 0
    // 畫筆
    private val mPaint = Paint().apply {
        strokeWidth = 5f
        style = Paint.Style.STROKE
        flags = Paint.ANTI_ALIAS_FLAG
        // 連接處樣式: 平斜接
        strokeJoin = Paint.Join.MITER
        strokeMiter = 4f
        // 落筆和結束時那點(point)的樣式: 添加半圓
        strokeCap = Paint.Cap.ROUND
    }
    init {
        // 獲取布局參數(shù)
        val typedArray =
            context.obtainStyledAttributes(attributeSet, R.styleable.PatternLockView)
        mCircleColor = typedArray.getColor(R.styleable.PatternLockView_circleColor,
            Color.LTGRAY)
        mLineColor = typedArray.getColor(R.styleable.PatternLockView_lineColor, Color.YELLOW)
        mRadiusPercent = typedArray.getFraction(R.styleable.PatternLockView_circleRadiusPercent,
            1, 1, 0.05f)
        typedArray.recycle()
    }
    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        val width = getDefaultSize(100, widthMeasureSpec)
        val height = getDefaultSize(100, heightMeasureSpec)
        // 設置參數(shù)
        mBetweenLength = (if (width < height) width else height) * 0.25f
        mRadius = (if (width < height) width else height) * mRadiusPercent
        mStartX = width / 2f - mBetweenLength
        mStartY = height / 2f - mBetweenLength
        setMeasuredDimension(width, height)
    }
    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(event: MotionEvent): Boolean {
        when(event.action) {
            MotionEvent.ACTION_DOWN -> {
                // 清除舊數(shù)據(jù)
                isMoving = true
                curData.clear()
                mCheckResult = 0
                invalidate()
            }
            MotionEvent.ACTION_MOVE -> {
                // 判斷是否進入哪個點的范圍
                val index = getEventCircleIndex(event.x, event.y)
                if (index != -1 && !curData.contains(index)) {
                    curData.add(index)
                }
                mCurPosX = event.x
                mCurPosY = event.y
                // 觸發(fā)繪制
                invalidate()
            }
            MotionEvent.ACTION_UP -> {
                isMoving = false
                // 判斷是否符合設置的值
                if (curData == preData) {
                    mCheckResult = 1
                    listener?.onMoveUp(true)
                }else {
                    // 沒有連線不觸發(fā)判斷
                    if (curData.size > 1) {
                        mCheckResult = -1
                        listener?.onMoveUp(false)
                    }
                }
                // 最后更新下，把移動的那部分線條去掉
                invalidate()
            }
        }
        return true
    }
    private fun getEventCircleIndex(x: Float, y: Float): Int {
        var curX: Float
        var curY: Float
        for (i in 0 until 9) {
            curX = mStartX + mBetweenLength * (i % 3)
            curY = mStartY + mBetweenLength * (i / 3)
            if (getDistance(curX, curY, x, y) <= mRadius) {
                return i
            }
        }
        return -1
    }
    private fun getDistance(x1: Float, y1: Float, x2: Float, y2: Float): Float {
        // 平方和公式
        @Suppress("ReplaceJavaStaticMethodWithKotlinAnalog")
        return sqrt((Math.pow((x1 - x2).toDouble(), 2.0)
                + Math.pow((y1 - y2).toDouble(), 2.0)).toFloat())
    }
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // 先繪制九個點
        var curX: Float
        var curY: Float
        mPaint.color = mCircleColor
        mPaint.style = Paint.Style.FILL
        mPaint.strokeWidth = 5f
        for (i in 0 until 9) {
            curX = mStartX + mBetweenLength * (i % 3)
            curY = mStartY + mBetweenLength * (i / 3)
            canvas.drawCircle(curX, curY, mRadius, mPaint)
        }
        // 再繪制線，先畫固定的線，再畫移動中的線
        mPaint.color = when(mCheckResult) {
            -1 -> Color.RED
            1 -> Color.GREEN
            else -> mLineColor
        }
        mPaint.style = Paint.Style.STROKE
        mPaint.strokeWidth = mRadius / 3f
        mPath.reset()
        for (i in curData) {
            // 當前點坐標
            curX = mStartX + mBetweenLength * (i % 3)
            curY = mStartY + mBetweenLength * (i / 3)
            if (curData.indexOf(i) == 0) {
                mPath.moveTo(curX, curY)
            }else {
                mPath.lineTo(curX, curY)
            }
        }
        // 再畫最后一點
        if (curData.size > 0 && isMoving) {
            mPath.lineTo(mCurPosX, mCurPosY)
        }
        canvas.drawPath(mPath, mPaint)
    }
    interface OnMoveUpListener{
        fun onMoveUp(success: Boolean)
    }
}

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PatternLockView">
        <attr name="circleColor" format="color"/>
        <attr name="lineColor" format="color"/>
        <attr name="circleRadiusPercent" format="fraction"/>
    </declare-styleable>
</resources>