Android自定義view實(shí)現(xiàn)滑動(dòng)解鎖九宮格控件
前言
上一篇文章用貝塞爾曲線畫了一個(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)文章
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-01android Launcher AppWidget添加步驟介紹
大家好,本篇文章主要講的是android Launcher AppWidget添加步驟介紹,感興趣的同學(xué)趕快來看一看吧,對(duì)你有幫助的話記得收藏一下,方便下次瀏覽2022-01-01Android 用戶Session管理的設(shè)計(jì)方案
這篇文章主要介紹了Android 用戶Session管理的設(shè)計(jì)方案,需要的朋友可以參考下2017-12-12Android使用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)模式,兩種方式通過命令給大家寫的非常詳細(xì),文中又給大家補(bǔ)充介紹了高通手機(jī)?進(jìn)入?高通9008模式的兩種方法,需要的朋友可以參考下2023-01-01