实例 -自定义绘制滑动解锁

效果图:

        

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)
}
}
}
posted @ 2021-05-15 10:19  哎睡的懒洋洋  阅读(206)  评论(0编辑  收藏  举报