Android studio——图案解锁

这篇写的是大致思路，如果想深入写一下的朋友可以看这个视频.

这次图案解锁我们用的是图片资源，不是绘制的，也就是说不能出现那种连线跟着手指变化的样子。
这里是这次需要使用的图片资源，提取码：nvg2

界面设计

1. 将图片资源拖进drawable中
   
2. 设置界面布局 可以看看视频，从2:11分开始.
   设置好就是下面这个样子
   

实现控件点亮

1. 实现触碰某个按钮就点亮这个按钮
   这里涉及到对
   屏幕坐标的理解
   我们来分析一下，如何判断到这个按钮该被点亮了：
   当手指的触碰点落到了按钮所在的区域中，这个按钮就应该被点亮，那么如何判断触碰点落在了按钮所在的区域，可以参考这篇文章

到这里就实现了点击按钮后按钮变亮，接下来该实现点亮两个点后其中的线就连起来

2. 点亮按钮的同时点亮连线
   那么我们如何知道此时该点亮连线呐：可以通过判断当前按钮被点亮时 有没有 在这个按钮之前被点亮的按钮，如果有则说明这个线是时候被点亮了，如果没有，则不该点亮。

点亮控件抬手后消失

抬手后 被点亮的按钮和线都消失
当我们按下屏幕并滑动的时候按钮和线都被点亮，那我们抬起手来这些按钮和线就该消失。
我们可以用一个数组记录每个被点亮的控件（按钮和线），当我们抬手时就可以将其设为隐藏。

完整代码

class MainActivity : AppCompatActivity() {
    //被点亮的View
    private var alreadyViews = mutableListOf<View>()
    private var lastDot:View? = null
    private lateinit var binding: ActivityMainBinding
    //记录输入的密码
    private val pwd = StringBuilder()
    //保存点9个
    private val dotsArray:Array<ImageView> by lazy {

        arrayOf(binding.dot1,binding.dot2,binding.dot3,
            binding.dot4,binding.dot5,binding.dot6,
            binding.dot7,binding.dot8,binding.dot9)

    }
    //保存所有的线段的tag值
    private val lineTagsArray = arrayOf(
        12,23,45,56,78,79,//横线
        14,25,36,47,58,69,//竖线
        24,35,57,68,15,26,48,59//斜线
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
    }

    override fun onTouchEvent(event: MotionEvent?): Boolean {
        //判断事件的类型
        when(event?.action){
            MotionEvent.ACTION_DOWN ->{
                val dotView = checkTouchView(event)
                if (dotView != null){
                    //点亮这个点
                    dotView.visibility = View.VISIBLE
                    //记录这个点
                    lastDot = dotView
                    //添加到被点亮的视图
                    alreadyViews.add(dotView)
                    //记录密码
                    pwd.append(dotView.tag)
                }
            }
            MotionEvent.ACTION_MOVE -> {
                val dotView = checkTouchView(event)
                if (dotView != null) {
                    if (dotView.visibility == View.INVISIBLE) {
                        if (lastDot == null) {
                            //点亮这个点
                            dotView.visibility = View.VISIBLE
                            //记录这个点
                            lastDot = dotView
                            //记录密码
                            pwd.append(dotView.tag)
                        } else {
                            //获取上一个点的tag值
                            val perTag = (lastDot?.tag as String).toInt()
                            val currentTag = (dotView?.tag as String).toInt()
                            val lineTag = if (perTag < currentTag) {
                                (perTag * 10 + currentTag).toString()
                            } else {
                                (currentTag*10 + perTag).toString()
                            }
                            //判断
                            val lineTagABS = abs(perTag - currentTag)
                            if (lineTagABS <= 4) {
                                //有路径则获取tag对应的视图
                                val lineView = binding.dotContainer.findViewWithTag<ImageView>(
                                    lineTag
                                )
                                //点亮线
                                lineView.visibility = View.VISIBLE
                                //点亮点
                                dotView.visibility = View.VISIBLE
                                lastDot = dotView
                                //记录密码
                                pwd.append(dotView.tag)
                                //添加到被点亮的视图
                                alreadyViews.add(dotView)
                                alreadyViews.add(lineView)
                            }
                        }
                    }
                }
            }
            MotionEvent.ACTION_UP ->{
                //隐藏
                alreadyViews.forEach {
                    it.visibility = View.INVISIBLE
                }
                alreadyViews.clear()
                //SharedPreference
                lastDot = null
                Log.v("pharaoh","$pwd")
            }
        }
        return true
    }

    //判断触摸点是否在某个dot区域内
    private fun checkTouchView(event: MotionEvent):View?{
        //获取触摸点在容器中的坐标
        val point = getTouchPoint(event)
        //循环遍历保存九个点的数组
        dotsArray.forEach {
            //获取当前视图的Rect
            val dotRect = toRect(it)
            //判断触摸点是否在这个矩形区域内
            val result = dotRect.contains(point)

            if (result){
                return it
            }
        }
        return null
    }

    //将某个视图的坐标转换为Rect
    private fun toRect(dot: ImageView):Rect{
        return Rect(
            dot.x.toInt(),
            dot.y.toInt(),
            (dot.x + dot.width).toInt(),
            (dot.y + dot.height).toInt())
    }

    //计算触摸点相对于父容器的坐标
    private fun getTouchPoint(event: MotionEvent):Point{
        //相对于屏幕的高度 - 顶部bar的高度 - 容器和内容区域顶部的高度
        val y = event.y - getBarHeight() - binding.dotContainer.y

        val touchPoint = Point()
        touchPoint.x = event.x.toInt()
        touchPoint.y = y.toInt()

        return touchPoint
    }

    //获取顶部bar的高度
    private fun getBarHeight():Int{
        super.onRestart()
        //计算屏幕高度
        val metrics = DisplayMetrics()
        windowManager.defaultDisplay.getMetrics(metrics)
        val allHeight = metrics.heightPixels
        //内容的高度
        val rect = Rect()
        val content = window.findViewById<ViewGroup>(Window.ID_ANDROID_CONTENT)
        content.getDrawingRect(rect)
        //底部的高度
        //val resourceId = resources.getIdentifier("navigation_bar_height","dimen","android")
        //val navBarHeight = resources.getDimensionPixelSize(resourceId)

        val barHeight = allHeight - rect.height()

        return barHeight
    }
}