前言：本篇文章主要用于介绍实现图案解锁所学到的知识点
环境：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)
网友评论