效果图：
github地址：https://github.com/luofangli/draw_slideunclock
全部代码：
1：
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.constraintlayout 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.my.slideunlock
android:layout_width="200dp"
android:layout_height="200dp"
android:background="@color/design_default_color_primary"
app:layout_constraintbottom_tobottomof="parent"
app:layout_constraintend_toendof="parent"
app:layout_constrainthorizontal_bias="0.445"
app:layout_constraintstart_tostartof="parent"
app:layout_constrainttop_totopof="parent"
app:layout_constraintvertical_bias="0.499" />
</androidx.constraintlayout.widget.constraintlayout>
2：
package com.example.my
import android.graphics.color
import android.graphics.paint
import android.graphics.rect
class dot(x: float, y: float,radius:float,tag:int) {
//点的中心位置
val cx = x
val cy = y
//圆点的半径
val cradius = radius
//标记圆点的tag值
val ctag = tag
//是否已被点亮
var isorheightlight = false
//圆点的画笔
var paint = paint().apply {
style = paint.style.stroke
color = color.black
strokewidth = 5f
}
//圆点的矩形
var rect = rect((cx-cradius).toint(),(cy-cradius).toint(),
(cx+cradius).toint(),(cy+cradius).toint())
//设置圆点的画笔
fun setpaint(color:int){
paint.color = color
}
}
3：
package com.example.my
import android.content.context
import android.graphics.*
import android.util.attributeset
import android.util.log
import android.view.motionevent
import android.view.view
import androidx.core.graphics.contains
class slideunlock: view {
//存放9个点
private val dots = mutablelistof<dot>()
//存放被点亮的点
private val heightlightdots = mutablelistof<dot>()
//圆点的中心点的位置
private var cx = 0f
private var cy = 0f
private var radius = 0f
//记录线条的开始位置
private var startx = 0f
private var starty = 0f
//线条的末端位置
private var endx = 0f
private var endy = 0f
//没有连接两个点的线的路径
private var path = path()
//画线条的画笔
private val paintline:paint by lazy {
paint().apply {
style = paint.style.stroke
color = color.red
strokewidth = 5f
}
}
//画圆点的画笔
private val paint:paint by lazy {
paint().apply {
style = paint.style.stroke
strokewidth = 5f
color = color.black
}
}
//代码创建
constructor(context: context):super(context){}
//xml创建
constructor(context: context,attributeset: attributeset):super(context,attributeset){}
override fun onsizechanged(w: int, h: int, oldw: int, oldh: int) {
super.onsizechanged(w, h, oldw, oldh)
dot()
}
override fun ondraw(canvas: canvas?) {
super.ondraw(canvas)
drawdot(canvas)
canvas?.drawline(startx,starty,endx,endy,paintline)
drawlinein2dot(canvas)
}
override fun ontouchevent(event: motionevent?): boolean {
when(event?.action){
motionevent.action_down->{
//点亮圆点
heighlightdot(point(event.x.toint(), event.y.toint())).also {
if (it!=null){
heithliget(it)
//将其设置为已被点亮
it.isorheightlight = true
}
}
}
motionevent.action_move->{
//点亮圆点
heighlightdot(point(event.x.toint(), event.y.toint())).also {
if (it!=null){
//点亮点
heithliget(it)
//改变点是否已被加入被点亮数组的状态
it.isorheightlight = true
invalidate()
}
movepath(point(event.x.toint(),event.y.toint()))
}
}
motionevent.action_up->{
//恢复原状
originalstate()
}
}
return true
}
//在两个被点亮之间的画一条线
private fun drawlinein2dot(canvas: canvas?){
if (heightlightdots.size>1){
for (i in 0 until heightlightdots.size-1){
canvas?.drawline(heightlightdots[i].cx,heightlightdots[i].cy,
heightlightdots[i+1].cx,heightlightdots[i+1].cy,paintline)
}
}
}
//返回被触摸的点
private fun heighlightdot(point: point):dot?{
for (dot in dots){
if (dot.rect.contains(point)){
return dot
}
}
return null
}
//点亮点
private fun heithliget(dot: dot){
dot.setpaint(color.red)
//将被点亮的点记录
//判断是否已经被点亮了
if (dot.isorheightlight == false){
heightlightdots.add(dot)
}
invalidate()
}
//设置最后一个亮点移动的线的路径
private fun movepath(point: point){
val i =heightlightdots.size
log.v("lfl","最后路线")
startx = heightlightdots[i-1].cx
starty = heightlightdots[i-1].cy
endx = point.x.tofloat()
endy= point.y.tofloat()
invalidate()
}
//恢复原状
private fun originalstate(){
for (dot in heightlightdots){
dot.setpaint(color.black)
dot.isorheightlight = false
invalidate()
}
heightlightdots.clear()
//消去最后一根线
startx = 0f
starty = 0f
endx = 0f
endy = 0f
}
//将9个点准备好
private fun dot(){
radius = if (measuredheight>measuredwidth){
measuredwidth/14f
}else{
measuredheight/14f
}
for (row in 0..2){
for (clum in 0..2){
cx = (clum*4+3)*radius
cy = (row*4+3)*radius
dot(cx,cy,radius,row*10+clum).also {
dots.add(it)
}
}
}
}
//画9个点
private fun drawdot(canvas: canvas?){
for (dot in dots){
canvas?.drawcircle(dot.cx,dot.cy,dot.cradius,dot.paint)
}
}
}
