该项目的效果即为下图所示,在页面的下部有九个点,通过连接九个点的图案来解锁密码
该项目用到以下几个知识点:自定义view(自定义九个点以及九个点之间的连线),绘制path(当两个点被选中时,绘制两个点之间的连线,绘制的功能是由画布canvos和画笔paint实现)
自定义view,绘制九个点
创建一个新的class继承于view,并重写view的构造方法
封装每个点的模型(用于记录密码的序号、点的半径、状态、左间距、右间距)
九个点的绘制是通过canvas和paint实现的,所以需要定义绘制这九个点的paint(绘制的效样式为填充及绘制的颜色)
定义完了paint以后,就可以在画布canvas上绘制,在绘制前需要计算九个点的位置(左边距以及右边距),距离的计算一般是在onsizedchanged里进行
计算完距离之后就可以在canvas上进行绘制,首先重写onDraw方法,通过两个for循环,及canvas的绘制圆的功能(drawCircle)对这九个点进行绘制drawCircle的四个属性为左间距、右间距、圆的半径、画笔
绘制点之间的连线
在绘制连线之前需要进行设计,在一个点移向另一个点的过程中需要绘制该点与当前触摸点之间的连线,移至下一个点所在的区域后,绘制这两个点之间的连线,所以就需要两个path路径对其进行绘制,定义绘制路径的画笔paint
定义path,drawPath和moveblePath,moveblePath的绘制是通过其是否为null来实现,若不为null则绘制
实现图案连线
重写onTouchEvent方法监听触摸事件,当手指触摸屏幕的时候(ACTION_DOWN),判断是处于九个点的区域,若处于则定义一个变量model记录该点,该点即为连线的起点,该路径的起点坐标即为该点所在的中心区域,并将该点的序号记录在一个变量里(passwordBulider),用于判断密码是否正确
第一个点选中之后触摸点继续移动,同样需要判断是否移动到下一个点的所在区域,若移动到,则用model记录该点,并将该点与上一个点(currentDot)进行连线,连线的实现是通过lineto,并将该点记为currentDot,将该点的序号连接在passwordBulider中;若未移动到下一个点的所在区域,则从上一个点到当前触摸点绘制一条线(moveblePath)
当手指离开屏幕的时候,判断密码是否正确
到此,该项目的功能已经得到了实现