Android自定義view實(shí)現(xiàn)滑動(dòng)解鎖九宮格控件
前言
上一篇文章用貝塞爾曲線畫(huà)了一個(gè)看起來(lái)不錯(cuò)的小紅點(diǎn)功能,技術(shù)上沒(méi)什么難度,主要就是數(shù)學(xué)上的計(jì)算。這篇文章也差不多,模仿了一個(gè)常用的滑動(dòng)解鎖的九宮格控件。
需求
用過(guò)安卓的都知道,用過(guò)蘋(píng)果的也知道,這里就是一個(gè)滑動(dòng)解鎖的控件。核心思想如下:
1、擺放九個(gè)圓,當(dāng)手指經(jīng)過(guò)圓附近的時(shí)候選取該點(diǎn),手指移動(dòng)的時(shí)候?qū)⑦x中點(diǎn)連線
2、預(yù)設(shè)一個(gè)正確的連線,當(dāng)手指抬起時(shí)的連線與預(yù)設(shè)連線一致,驗(yàn)證通過(guò)
3、通過(guò)layout參數(shù)可以設(shè)置圓和線的顏色
效果圖
這里功能勉強(qiáng)可以吧,感覺(jué)選中點(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
// 畫(huà)筆
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 {
// 沒(méi)有連線不觸發(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)
}
// 再繪制線,先畫(huà)固定的線,再畫(huà)移動(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)
}
}
// 再畫(huà)最后一點(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>
主要問(wèn)題
實(shí)際上,這里沒(méi)什么有難度的地方,就是畫(huà)了九個(gè)圓,加上幾段根據(jù)觸發(fā)的點(diǎn)構(gòu)成的連線,就不多寫(xiě)了,可以看代碼注釋。
到此這篇關(guān)于Android自定義view實(shí)現(xiàn)滑動(dòng)解鎖九宮格控件的文章就介紹到這了,更多相關(guān)Android滑動(dòng)解鎖九宮格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android實(shí)現(xiàn)登錄界面的注冊(cè)功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)登錄界面的注冊(cè)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
詳解Android Scroller與computeScroll的調(diào)用機(jī)制關(guān)系
這篇文章主要介紹了詳解Android Scroller與computeScroll的調(diào)用機(jī)制關(guān)系的相關(guān)資料,需要的朋友可以參考下2016-01-01
android Launcher AppWidget添加步驟介紹
大家好,本篇文章主要講的是android Launcher AppWidget添加步驟介紹,感興趣的同學(xué)趕快來(lái)看一看吧,對(duì)你有幫助的話記得收藏一下,方便下次瀏覽2022-01-01
Android 用戶Session管理的設(shè)計(jì)方案
這篇文章主要介紹了Android 用戶Session管理的設(shè)計(jì)方案,需要的朋友可以參考下2017-12-12
Android使用MediaRecorder實(shí)現(xiàn)錄音及播放
這篇文章主要為大家詳細(xì)介紹了Android使用MediaRecorder實(shí)現(xiàn)錄音及播放,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
使用adb?or?fastboot命令進(jìn)入高通的9008(edl)模式的兩種方法
這篇文章主要介紹了使用adb?or?fastboot命令進(jìn)入高通的9008(edl)模式,兩種方式通過(guò)命令給大家寫(xiě)的非常詳細(xì),文中又給大家補(bǔ)充介紹了高通手機(jī)?進(jìn)入?高通9008模式的兩種方法,需要的朋友可以參考下2023-01-01

