Android之实现图案解锁

前言：本篇文章主要用于介绍实现图案解锁所学到的知识点
环境：Android studio 4.0 开发语言：Kotlin
效果展示：

image.png

主要知识点：

• 界面布局，包括添加各种图片和约束
• 使用Sharedpreference存储数据(进行简单封装，提供必要的功能，并且使用单例模式)
• 实现触摸滑动过程中图案的展示
• 实现图案密码的设置和颜色，这里主要通过设tag值来实现

界面UI的实现关键的是合理选择容器，这里我们优先使用约束布局，代码量少，且易于实现我们想要的效果
这里主要分为3部分，中间的虚线是我们设置的guideline,这里设置了俩条，分为3个部分，主要目的是便于实现控件的大小和约束，第一部分是圆角图片，不管是自定义还是实现第三方库都可以实现圆角的效果，第二部分是中间的显示文本，第三部分就是图案解锁部分，如果我们在第三部分设置一个ConstraintLayout的约束布局，那么我们想要实现的效果就可以用拖拽的方式添加到容器中，再设置合理的约束，便能很快实现想要的效果

那么如何使用Sharedpreference存储数据呢？
具体步骤：

• 1.获取SharedPreference的对象，通过getSharedPreference(String,int)方法。第一个参数用于指定该存储文件的名称，不用加后缀，第二个参数指定文件的操作模式。一般用MODE_PRIVATE 私有方式存储，其他应用无法访问。
• 2.设置参数，必须通过一个SharedPreference.Editor对象。存储键值对。只能存放Boolean，Float，Int，Long，String 五种类型。editor.putXxx("key","value")。
• 3.通过editor.commit()提交数据。也可以通过clean(),remove()清除。
• 4.数据存储在Android系统的 /data/data/"app package name"/shared_prefs 目录下的一个.xml文件。

这里我们还进行了简单的封装，加上单例模式，更好的实现我们想要功能的访问

import android.annotation.SuppressLint
import android.content.Context

class SharedPreferenceUtil private constructor() {

    private val key = "PASSWORD"

    /**
    * 单例模式
    * */
    companion object {

        private var mContext: Context? = null

        private var instance: SharedPreferenceUtil? = null


        fun getInstance(context: Context): SharedPreferenceUtil {
            mContext = context
            if (instance == null) {
                instance = SharedPreferenceUtil()
            }
            return instance!!
        }
    }

    /**
     * 保存图案密码
     * */
    @SuppressLint("CommitPrefEdits")
    fun savePassword(pwd: String) {
        //获取SharedPreferences对象
        mContext?.getSharedPreferences("config", Context.MODE_PRIVATE).also {
            val edit = it?.edit()
            //写入数据
            edit?.putString(key, pwd)
            edit?.apply()
        }
    }

    /**
     * 获取保存的数据（这里就是图案密码）
     * */
    fun getPassword(): String? {
        mContext?.getSharedPreferences("config", Context.MODE_PRIVATE).also {
            return it?.getString(key,null)
        }
    }
}

接下来就是实现图案解锁功能了,那么如何实现呢？
这里主要是通过将触摸点坐标转换为相对于根容器，也就是上面我们提到的约束布局容器的坐标，然后判断触摸点是否在某一个圆内，是的话就显示选中状态的效果（默认不可见）

获取状态栏高度，使用懒加载，只加载一次

/**
     * 获取状态栏高度，使用懒加载，只加载一次
     * */
    private val barHeight:Int by lazy{
        //获取屏幕尺寸
        val display = DisplayMetrics()
        windowManager.defaultDisplay.getMetrics(display)
        //获取空白区域尺寸
        val rect = Rect()
        window.findViewById<ViewGroup>(Window.ID_ANDROID_CONTENT).getDrawingRect(rect)
        display.heightPixels - rect.height()
    }

将触摸点的坐标转化为相对容器的坐标

 /**
     * 将触摸点的坐标转化为相对容器的坐标
     * */
    private fun convertPointAsContainer(event: MotionEvent):Point{
        return Point().apply {
            x = (event.x.minus(mContainer.x)).toInt()
            y = (event.y - barHeight - mContainer.y).toInt()
        }
    }

获取当前触摸点所在的圆

 /**
     * 获取当前触摸点所在的圆
     * */

    private fun getCurrPointOfCircle(point: Point):ImageView?{
        for (dot in dots){
            //遍历判断是否包含当前触摸点
            getRect(dot).also {
                if (it.contains(point.x,point.y)){
                    return dot
                }
            }
        }
        return null
    }

    /**
     * 获取当前控件对应的Rect
     * */
    private fun getRect(v:ImageView) = Rect(v.left,v.top,v.right,v.bottom)

点亮圆

 /**
     * 点亮圆
     * */
    private fun setSmallCircleVisible(v: ImageView) {
        v.visibility = View.VISIBLE
        selectedViews.add(v)
        password.append(v.tag)
        lastSelectView = v
        scaleAnimation(v, true)
    }

点亮线

  //记录点亮的上一个圆
  private var lastSelectView: ImageView? = null

这里首先记录上一个触摸点所在圆，然后根据当前触摸点所在圆的tag值和上一个圆的tag拼接找到对应的线的tag值，再根据tag值找到线，然后点亮这条线

 /**
     * 点亮线
     * */
    private fun setLineVisible(v: ImageView) {
        //连线
        val lTag = (lastSelectView?.tag as String).toInt()
        val cTag = (v.tag as String).toInt()
        val lineTag = if (lTag > cTag) cTag * 10 + lTag else lTag * 10 + cTag
        //判断是否有这条线，如果有，点亮
        if (tags.contains(lineTag)) {
            //先点亮这个点
            if (v.visibility != View.VISIBLE) {
                setSmallCircleVisible(v)
            }
            //再点亮连线
            mContainer.findViewWithTag<ImageView>(lineTag.toString()).apply {
                visibility = View.VISIBLE
                selectedViews.add(this)
            }
        }
    }

然后点亮圆和线在一个方法里使用

 /**
     * 点亮点和线
     * */
    private fun setCircleAndLineVisible(v: ImageView?) {
        if (v != null && v.visibility == View.INVISIBLE) {
            //判断是否是第一个点亮的点
            if (lastSelectView == null) {
                setSmallCircleVisible(v)
            } else {
                setLineVisible(v)
            }
        } else {
            if (lastSelectView != null && v != null) {
                if (isLineExit(lastSelectView!!, v)) {
                    setLineVisible(v)
                }
            }
        }
    }

这里的isLineExit方法，传入两个参数，分别是上一个圆和当前圆，目的是为了使两个已经点亮的圆之间的线点亮

 /**
     * 判断是否存在点亮的两个小圆之间的连线未点亮
     * */
    private fun isLineExit(last: ImageView, curr: ImageView): Boolean {
        if (last.visibility == View.VISIBLE && curr.visibility == View.VISIBLE) {
            return true
        }
        return false
    }

接下来是密码设置和保存，主要使用Sharedpreference来记录用户设置的密码

  /**
     * 判断两次密码是否一致
     * */
    private fun isPasswordSetSucceed(first: String, second: String) {
        if (first == second) {
            mTextView.text = "设置密码成功"
            //保存密码
            SharedPreferenceUtil.getInstance(this).savePassword(first)
            orgPassWord = SharedPreferenceUtil.getInstance(this).getPassword()
        } else {
            mTextView.text = "两次密码不一致，请重新设置密码"
            firstPassWord = null
        }
    }

最后如果想在触摸小圆上加一点动画，可以在触摸时放大或缩小圆点以增强用户使用感

 /**
     * 缩放动画
     * */
    private fun scaleAnimation(v: ImageView, flag: Boolean) {
        AnimationUtils.loadAnimation(this, R.anim.scale_anim_set).apply {
            duration = 200
            fillAfter = true
            if (flag) {
                v.startAnimation(this)
            } else {
                v.clearAnimation()
            }
        }
    }

这里的flag参数的目的是，便于控制动画的开启和取消，当我们触摸时，flag传入参数为true,当我们松手时，应该取消动画,这时flag传入参数便为false
开启动画

scaleAnimation(v, true)

取消动画（松手时使用）

scaleAnimation(v, false)