Android自定义View实现九宫格图形解锁(Kotlin版)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
package com.example.kotlin_test
 
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
 
/**
 * Created by wanglx on 2021/9/8.
 */
class MyLock : View {
    private var isInit=false
    private var mPoints:Array<Array<Point?>> = Array(3){Array<Point?>(3){null} }
    private var mSelectPoints=ArrayList<Point>()
    private var isTouch=false
    private var code= listOf(0,1,2,5,8)
 
    //画笔
    private lateinit var mNormalPaint:Paint
    private lateinit var mPressedPaint:Paint
    private lateinit var mErrorPaint: Paint
    private lateinit var mLinePaint: Paint
 
    //颜色
    private val mNormalColor=Color.BLACK
    private val mPressedColor=Color.GREEN
    private val mErrorColor=Color.RED
    private val mLineColor=Color.BLACK
 
    //外圆半径
    private var mDotRadius=0
 
    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
    constructor(context: Context, attrs: AttributeSet, defaultStyle: Int):super(context,attrs,defaultStyle)
 
    override fun onDraw(canvas: Canvas?) {
        //初始化
        if (!isInit) {
            initDot()
            initPaint()
            isInit=true
        }
 
        //绘制
        drawShow(canvas)
 
    }
 
    private fun drawShow(canvas: Canvas?) {
        for (i in 0..2) {
            for (j in 0..2) {
                var point = mPoints[i][j]
                when(point!!.status){
                    PointStatus.NORMAL->{
                        //先画外圆，再画内圆
                        canvas!!.drawCircle(point.centerX,point.centerY,
                            mDotRadius.toFloat(),mNormalPaint)
                        canvas!!.drawCircle(point.centerX,point.centerY,
                            mDotRadius.toFloat()/6,mNormalPaint)
                    }
                    PointStatus.PRESSED->{
                        canvas!!.drawCircle(point.centerX,point.centerY,
                            mDotRadius.toFloat(),mPressedPaint)
                        canvas!!.drawCircle(point.centerX,point.centerY,
                            mDotRadius.toFloat()/6,mPressedPaint)
                    }
                    PointStatus.ERROR->{
                        canvas!!.drawCircle(point.centerX,point.centerY,
                            mDotRadius.toFloat(),mErrorPaint)
                        canvas!!.drawCircle(point.centerX,point.centerY,
                            mDotRadius.toFloat()/6,mErrorPaint)
 
                    }
                }
 
            }
        }
 
        //画连线
        drawLine(canvas)
 
    }
 
    private fun drawLine(canvas: Canvas?) {
        if (mSelectPoints.size > 0) {
            var mLastPoint = mSelectPoints[0]
            //两点连线
            if (mSelectPoints.size > 1) {
                for (i in 1..mSelectPoints.size-1) {
                    var point = mSelectPoints[i]
                    realDrawLine(mLastPoint, point, canvas, mLinePaint)
                    mLastPoint=point
                }
            }
 
            //手指和某个点的连线
            var isInner=checkInRound(mLastPoint.centerX,mLastPoint.centerY,movingX,movingY,mDotRadius/6)
            if (!isInner&&isTouch) {
                realDrawLine(mLastPoint,Point(movingX,movingY,-1),canvas,mLinePaint)
            }
        }
 
 
    }
 
    private fun realDrawLine(
        mLastPoint: Point,
        point: Point,
        canvas: Canvas?,
        mLinePaint: Paint
    ) {
        //不是从圆心坐标开始画，而是距离圆心有一定的距离
        var dx=point.centerX-mLastPoint.centerX
        var dy=point.centerY-mLastPoint.centerY
        var pointDistance = Math.sqrt((dx * dx + dy * dy).toDouble())
 
        var offsetX = (dx / pointDistance) * (mDotRadius / 6)
        var offsetY=(dy/pointDistance)*(mDotRadius/6)
 
        canvas!!.drawLine((mLastPoint.centerX+offsetX).toFloat(),
            (mLastPoint.centerY+offsetY).toFloat(),
            (point.centerX-offsetX).toFloat(), (point.centerY-offsetY).toFloat(),mLinePaint)
    }
 
    private var movingX=0f
    private var movingY=0f
    override fun onTouchEvent(event: MotionEvent?): Boolean {
        movingX=event!!.x
        movingY=event.y
        when (event.action) {
            MotionEvent.ACTION_DOWN->{
                for (i in 0..mSelectPoints.size - 1) {
                    mSelectPoints[i].setStatusNormal()
                }
                mSelectPoints.clear()
                invalidate()
                //先判断是不是在圆内
                var dd=point
                if (dd != null) {
                    dd.setStatusPressed()
                    mSelectPoints.add(dd)
                    isTouch=true
                }
            }
            MotionEvent.ACTION_MOVE->{
                //先判断是不是在圆内
                var dd=point
                if (dd != null) {
                    dd.setStatusPressed()
                    if (!mSelectPoints.contains(dd)) {
                        mSelectPoints.add(dd)
                    }
                }
            }
            MotionEvent.ACTION_UP->{
                isTouch=false
                if (mSelectPoints.size == code.size) {
                    for (i in 0..mSelectPoints.size - 1) {
                        if (mSelectPoints[i].index != code[i]) {
                            for (i in 0..mSelectPoints.size - 1) {
                                //密码不对，设置为错误状态
                                mSelectPoints[i].setStatusError()
                            }
                            break
                        }
                    }
                } else {
                    for (i in 0..mSelectPoints.size - 1) {
                        mSelectPoints[i].setStatusError()
                    }
                }
            }
        }
 
        invalidate()
        return true
    }
 
    //扩展属性，遍历九个圆，看手指的按在哪个圆里面
    val point:Point?
    get() {
        for (i in 0..2) {
            for (j in 0..2) {
                var point = mPoints[i][j]
                if (checkInRound(point!!.centerX, point.centerY, movingX, movingY, mDotRadius)) {
                    return point
                }
            }
        }
        return null
    }
    //判断是不是在圆内
    private fun checkInRound(
        centerX: Float,
        centerY: Float,
        movingX: Float,
        movingY: Float,
        mDotRadius: Int
    ): Boolean {
        var isIn=Math.sqrt(((centerX-movingX)*(centerX-movingX)+(centerY-movingY)*(centerY-movingY)).toDouble())<mDotRadius
        return isIn
    }
 
    private fun initPaint() {
        //正常画笔
        mNormalPaint = Paint()
        mNormalPaint!!.color=mNormalColor
        mNormalPaint.style=Paint.Style.STROKE
        mNormalPaint.isAntiAlias=true
        mNormalPaint.strokeWidth=mDotRadius.toFloat()/12
 
        //按下画笔
        mPressedPaint = Paint()
        mPressedPaint!!.color=mPressedColor
        mPressedPaint.style=Paint.Style.STROKE
        mPressedPaint.isAntiAlias=true
        mPressedPaint.strokeWidth=mDotRadius.toFloat()/9
 
        //错误画笔
        mErrorPaint = Paint()
        mErrorPaint!!.color=mErrorColor
        mErrorPaint.style=Paint.Style.STROKE
        mErrorPaint.isAntiAlias=true
        mErrorPaint.strokeWidth=mDotRadius.toFloat()/12
 
        //连线画笔
        mLinePaint = Paint()
        mLinePaint!!.color=mLineColor
        mLinePaint.style=Paint.Style.STROKE
        mLinePaint.isAntiAlias=true
        mLinePaint.strokeWidth=mDotRadius.toFloat()/12
    }
 
    private fun initDot() {
        var width=this.width
        var height=this.height
 
        var offsetX=0f//九个宫格为正方形，距离布局左边的距离
        var offsetY=0f//九宫格为正方形，距离布局顶部的距离
 
        //兼容横竖屏
        if (width > height) {
            offsetX = (width - height).toFloat() / 2
            width = height
        } else {
            offsetY = (height - width).toFloat() / 2
 
        }
 
        //每个方格的大小
        var squareWidth=width/3
 
        mDotRadius=squareWidth/4
 
        //九个宫格，存于数组Point[3][3]
        mPoints[0][0] = Point(squareWidth/2+offsetX,squareWidth/2+offsetY,0)
        mPoints[0][1] = Point(squareWidth*3/2+offsetX,squareWidth/2+offsetY,1)
        mPoints[0][2] = Point(squareWidth*5/2+offsetX,squareWidth/2+offsetY,2)
        mPoints[1][0] = Point(squareWidth/2+offsetX,squareWidth*3/2+offsetY,3)
        mPoints[1][1] = Point(squareWidth*3/2+offsetX,squareWidth*3/2+offsetY,4)
        mPoints[1][2] = Point(squareWidth*5/2+offsetX,squareWidth*3/2+offsetY,5)
        mPoints[2][0] = Point(squareWidth/2+offsetX,squareWidth*5/2+offsetY,6)
        mPoints[2][1] = Point(squareWidth*3/2+offsetX,squareWidth*5/2+offsetY,7)
        mPoints[2][2] = Point(squareWidth*5/2+offsetX,squareWidth*5/2+offsetY,8)
 
    }
 
    //圆的状态
    enum class PointStatus{
        NORMAL,PRESSED,ERROR
    }
 
    class Point(var centerX: Float, var centerY: Float, var index: Int){
        //默认状态
        var status = PointStatus.NORMAL
 
        fun setStatusNormal() {
            status=PointStatus.NORMAL
        }
 
        fun setStatusPressed() {
            status=PointStatus.PRESSED
        }
        fun setStatusError() {
            status=PointStatus.ERROR
        }
    }
 
}

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
 
    <com.example.kotlin_test.MyLock
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>