實體 -自定義繪制滑動解鎖

效果圖：

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)
        }
    }
}

標籤：Android

上一篇：Android Bitmap的使用及優化

下一篇：轉Andriod之路第一個功能