亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Android自定義view實(shí)現(xiàn)滑動(dòng)解鎖九宮格控件

 更新時(shí)間:2023年02月09日 11:09:08   作者:撿一晌貪歡  
這篇文章主要介紹了Android自定義view實(shí)現(xiàn)滑動(dòng)解鎖九宮格控件,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

前言

上一篇文章用貝塞爾曲線畫了一個(gè)看起來不錯(cuò)的小紅點(diǎn)功能,技術(shù)上沒什么難度,主要就是數(shù)學(xué)上的計(jì)算。這篇文章也差不多,模仿了一個(gè)常用的滑動(dòng)解鎖的九宮格控件。

需求

用過安卓的都知道,用過蘋果的也知道,這里就是一個(gè)滑動(dòng)解鎖的控件。核心思想如下:

1、擺放九個(gè)圓,當(dāng)手指經(jīng)過圓附近的時(shí)候選取該點(diǎn),手指移動(dòng)的時(shí)候?qū)⑦x中點(diǎn)連線

2、預(yù)設(shè)一個(gè)正確的連線,當(dāng)手指抬起時(shí)的連線與預(yù)設(shè)連線一致,驗(yàn)證通過

3、通過layout參數(shù)可以設(shè)置圓和線的顏色

效果圖

這里功能勉強(qiáng)可以吧,感覺選中點(diǎn)的時(shí)候不是很流暢。

代碼

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){
    /**
     * 預(yù)設(shè)值
     */
    var preData = LinkedList<Int>()
    /**
     * 回調(diào)接口
     */
    var listener: OnMoveUpListener? = null
    // 當(dāng)前值
    private var curData = LinkedList<Int>()
    // 圓的顏色
    private val mCircleColor: Int
    // 線的顏色
    private val mLineColor: Int
    // 圓半徑占最短寬高的比例
    private val mRadiusPercent: Float
    // 兩點(diǎn)之間的距離
    private var mBetweenLength = 0f
    // 第一個(gè)圓所在位置
    private var mStartX = 0f
    private var mStartY = 0f
    // 圓半徑
    private var mRadius = 0f
    // 當(dāng)前手指所在的位置
    private var mCurPosX = 0f
    private var mCurPosY = 0f
    // 是否在移動(dòng)的狀態(tài)
    private var isMoving = false
    // 路徑
    private var mPath = Path()
    // 校驗(yàn)結(jié)果, -1失敗,0未驗(yàn)證,1驗(yàn)證成功,根據(jù)驗(yàn)證結(jié)果修改線條顏色
    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
        // 落筆和結(jié)束時(shí)那點(diǎn)(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è)置參數(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 -> {
                // 判斷是否進(jìn)入哪個(gè)點(diǎn)的范圍
                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
                // 判斷是否符合設(shè)置的值
                if (curData == preData) {
                    mCheckResult = 1
                    listener?.onMoveUp(true)
                }else {
                    // 沒有連線不觸發(fā)判斷
                    if (curData.size > 1) {
                        mCheckResult = -1
                        listener?.onMoveUp(false)
                    }
                }
                // 最后更新下,把移動(dòng)的那部分線條去掉
                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)
        // 先繪制九個(gè)點(diǎn)
        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)
        }
        // 再繪制線,先畫固定的線,再畫移動(dòng)中的線
        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) {
            // 當(dāng)前點(diǎn)坐標(biāo)
            curX = mStartX + mBetweenLength * (i % 3)
            curY = mStartY + mBetweenLength * (i / 3)
            if (curData.indexOf(i) == 0) {
                mPath.moveTo(curX, curY)
            }else {
                mPath.lineTo(curX, curY)
            }
        }
        // 再畫最后一點(diǎn)
        if (curData.size > 0 && isMoving) {
            mPath.lineTo(mCurPosX, mCurPosY)
        }
        canvas.drawPath(mPath, mPaint)
    }
    interface OnMoveUpListener{
        fun onMoveUp(success: Boolean)
    }
}

對(duì)應(yīng)的style文件: pattern_lock_view_style.xml

<?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>

主要問題

實(shí)際上,這里沒什么有難度的地方,就是畫了九個(gè)圓,加上幾段根據(jù)觸發(fā)的點(diǎn)構(gòu)成的連線,就不多寫了,可以看代碼注釋。

到此這篇關(guān)于Android自定義view實(shí)現(xiàn)滑動(dòng)解鎖九宮格控件的文章就介紹到這了,更多相關(guān)Android滑動(dòng)解鎖九宮格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論