Welcome

首页 / 移动开发 / Android / Android 简易手势密码开源库详解

简介
本文介绍一个Android手势密码开源库的使用及实现的详细过程，该开源库主要实现以下几个功能：
  1. 支持手势密码的绘制，并支持密码保存功能，解锁时自动比对密码给出结果
  2. 封装了绘制密码的方法，比对两次密码是否一致，可以快捷地进行手势密码的设置
  3. 可以设置密码输入错误后的重试次数上限
  4. 可以自定义不同状态下手势密码图案的颜色
  5. 可以自定义手势密码的触摸点数量（n*n）
最近需要用到手势密码解锁功能，找了一些demo感觉用起来都有点麻烦，于是参考一些文章自己造了下轮子，封装了相关的一些方法，使用起来比较便捷。
github链接如下，觉得还可以请帮忙star支持下~
github链接    个人博客
使用效果
首先看下使用效果：

使用方法
XML布局文件中使用该控件

<com.syd.oden.gesturelock.view.GestureLockViewGroupandroid:id="@+id/gesturelock"android:layout_width="match_parent"android:layout_height="match_parent"app:preference_id="1"android:layout_marginTop="30dp"app:count="3" />
可以设置的一些参数，说明如下:
  1. color_no_finger:未触摸时圆形的颜色
  2. color_finger_on:触摸时圆形的颜色
  3. color_finger_up_correct:输入正确时圆形的颜色
  4. color_finger_up_error:出错时圆形的颜色
  5. count：收拾密码的圆形数量，n*n
  6. preference_id：手势密码保存的id号，不输入或输入-1则使用默认的id
初始化

private void initGesture（） {mGestureLockViewGroup = （GestureLockViewGroup） findViewById（R.id.gesturelock）;gestureEventListener（）;gesturePasswordSettingListener（）;gestureRetryLimitListener（）; }
设置手势密码监听事件
private void gestureEventListener（） {mGestureLockViewGroup.setGestureEventListener（new GestureEventListener（） { @Override public void onGestureEvent（boolean matched） {mylog.d（"onGestureEvent matched: " + matched）;if （！matched） { tv_state.setTextColor（Color.RED）; tv_state.setText（"手势密码错误"）;} else { if （isReset） {isReset = false;Toast.makeText（MainActivity.this, "清除成功！", Toast.LENGTH_SHORT）.show（）;resetGesturePattern（）; } else {tv_state.setTextColor（Color.WHITE）;tv_state.setText（"手势密码正确"）; }} }}）; }
若已经设置有密码则会进入该回调，在这里对结果进行处理，上面的例子中加入了一个重设密码的处理。
手势密码设置

private void gesturePasswordSettingListener（） {mGestureLockViewGroup.setGesturePasswordSettingListener（new GesturePasswordSettingListener（） { @Override public boolean onFirstInputComplete（int len） {if （len > 3） { tv_state.setTextColor（Color.WHITE）; tv_state.setText（"再次绘制手势密码"）; return true;} else { tv_state.setTextColor（Color.RED）; tv_state.setText（"最少连接4个点，请重新输入！"）; return false;} } @Override public void onSuccess（） {tv_state.setTextColor（Color.WHITE）;Toast.makeText（MainActivity.this, "密码设置成功！", Toast.LENGTH_SHORT）.show（）;tv_state.setText（"请输入手势密码解锁！"）; } @Override public void onFail（） {tv_state.setTextColor（Color.RED）;tv_state.setText（"与上一次绘制不一致，请重新绘制"）; }}）; }
若还未设置密码，绘制手势的时候会进入该回调，返回值为绘制的触摸点的数量，onFirstInputComplete中返回true则进入第二手势密码的绘制，两次输入一致后自动保存密码。
重试次数超过限制监听
private void gestureRetryLimitListener（） {mGestureLockViewGroup.setGestureUnmatchedExceedListener（3, new GestureUnmatchedExceedListener（） { @Override public void onUnmatchedExceedBoundary（） {tv_state.setTextColor（Color.RED）;tv_state.setText（"错误次数过多，请稍后再试！"）; }}）; }
若设置了该监听事件，则输入错误有次数限制，超过上限后进入回调，在该回调中进行处理。
清除密码的逻辑自己加个判断处理下即可，具体可以看下github上的demo
其他的一些API
public void removePassword（） ：清除密码public void savePassword（） : 保存密码，设置手势密码成功后会自动保存，也可以调用该接口另外设置密码public void getPassword（）： 获取密码public void setRetryTimes（int retryTimes） ： 设置重试次数上限public boolean isSetPassword（） ： 返回现在是否已经设置有密码public void resetView（） ： 将视图Reset
在项目中导入该库
仅需加入两行代码：
在工程的 build.gradle中加入：
allprojects {repositories { ... maven { url "https://jitpack.io" }} }
module的build.gradle中加入依赖：
dependencies { compile "com.github.autume:GestureLock:1.0.0" }
总的使用就是这样，是不是很简单！
具体实现过程
下面讲下实现的过程，如果只是直接拿来用的话也可以略过这部分。
自定义手势密码的圆形view
这部分主要参考Hongyang大大的博客，稍微修改了一下
初始化传入参数
public GestureLockView（Context context, int colorNoFingerr, int colorFingerOn, int colorCorrect, int colorError） {super（context）;this.mColorNoFinger = colorNoFingerr;this.mColorFingerOn = colorFingerOn;this.mColorFingerUpCorrect = colorCorrect;this.mColorFingerUpError = colorError;mPaint = new Paint（Paint.ANTI_ALIAS_FLAG）;mArrowPath = new Path（）; }
根据不同的触摸状态绘制不同颜色的圆
@Override protected void onDraw（Canvas canvas） {switch （mCurrentStatus） { case STATUS_FINGER_ON:// 绘制外圆mPaint.setStyle（Style.STROKE）;mPaint.setColor（mColorFingerOn）;mPaint.setStrokeWidth（2）;canvas.drawCircle（mCenterX, mCenterY, mRadius, mPaint）;// 绘制内圆mPaint.setStyle（Style.FILL）;canvas.drawCircle（mCenterX, mCenterY, mRadius * mInnerCircleRadiusRate, mPaint）;break; case STATUS_FINGER_UP:// 绘制外圆if （GestureLockViewGroup.isCorrect） mPaint.setColor（mColorFingerUpCorrect）;else mPaint.setColor（mColorFingerUpError）;mPaint.setStyle（Style.STROKE）;mPaint.setStrokeWidth（2）;canvas.drawCircle（mCenterX, mCenterY, mRadius, mPaint）;// 绘制内圆mPaint.setStyle（Style.FILL）;canvas.drawCircle（mCenterX, mCenterY, mRadius * mInnerCircleRadiusRate, mPaint）;drawArrow（canvas）;break; case STATUS_NO_FINGER:// 绘制外圆mPaint.setStyle（Style.STROKE）;mPaint.setColor（mColorNoFinger）;canvas.drawCircle（mCenterX, mCenterY, mRadius, mPaint）;// 绘制内圆mPaint.setStyle（Style.FILL）;mPaint.setColor（mColorNoFinger）;canvas.drawCircle（mCenterX, mCenterY, mRadius * mInnerCircleRadiusRate, mPaint）;break;} }
绘制箭头
@Override protected void onMeasure（int widthMeasureSpec, int heightMeasureSpec） {super.onMeasure（widthMeasureSpec, heightMeasureSpec）;mWidth = MeasureSpec.getSize（widthMeasureSpec）;mHeight = MeasureSpec.getSize（heightMeasureSpec）;// 取长和宽中的小值mWidth = mWidth < mHeight ? mWidth : mHeight;mRadius = mCenterX = mCenterY = mWidth / 2;mRadius -= mStrokeWidth / 2;// 绘制三角形，初始时是个默认箭头朝上的一个等腰三角形，用户绘制结束后，根据由两个GestureLockView决定需要旋转多少度float mArrowLength = mWidth / 2 * mArrowRate;mArrowPath.moveTo（mWidth / 2, mStrokeWidth + 2）;mArrowPath.lineTo（mWidth / 2 - mArrowLength, mStrokeWidth + 2 + mArrowLength）;mArrowPath.lineTo（mWidth / 2 + mArrowLength, mStrokeWidth + 2 + mArrowLength）;mArrowPath.close（）;mArrowPath.setFillType（Path.FillType.WINDING）; } private void drawArrow（Canvas canvas） {if （mArrowDegree ！= -1） { mPaint.setStyle（Paint.Style.FILL）; canvas.save（）; canvas.rotate（mArrowDegree, mCenterX, mCenterY）; canvas.drawPath（mArrowPath, mPaint）; canvas.restore（）;} }
自定义手势密码的ViewGroup
加入自定义view的属性
<?xml version="1.0" encoding="utf-8"?><resources> <attr name="color_no_finger" format="color" /> <attr name="color_finger_on" format="color" /> <attr name="color_finger_up_correct" format="color" /> <attr name="color_finger_up_error" format="color" /> <attr name="count" format="integer" /> <attr name="preference_id" format="integer" /> <declare-styleable name="GestureLockViewGroup"><attr name="color_no_finger" /><attr name="color_finger_on" /><attr name="color_finger_up_correct" /><attr name="color_finger_up_error" /><attr name="count" /><attr name="preference_id" /> </declare-styleable></resources>
获取参数及初始化
public GestureLockViewGroup（Context context, AttributeSet attrs,int defStyle） {super（context, attrs, defStyle）;/** * 获得所有自定义的参数的值 */TypedArray a = context.obtainStyledAttributes（attrs,R.styleable.GestureLockViewGroup, defStyle, 0）;mNoFingerColor = a.getColor（R.styleable.GestureLockViewGroup_color_no_finger, mNoFingerColor）;mFingerOnColor = a.getColor（R.styleable.GestureLockViewGroup_color_finger_on, mFingerOnColor）;mFingerUpColorCorrect = a.getColor（R.styleable.GestureLockViewGroup_color_finger_up_correct, mFingerUpColorCorrect）;mFingerUpColorError = a.getColor（R.styleable.GestureLockViewGroup_color_finger_up_error, mFingerUpColorError）;mCount = a.getInt（R.styleable.GestureLockViewGroup_count, mCount）;mPrferenceId = a.getInt（R.styleable.GestureLockViewGroup_preference_id, mPrferenceId）;a.recycle（）;/** * 获取密码状态 */gesturePreference = new GesturePreference（context, mPrferenceId）;password = gesturePreference.ReadStringPreference（）;Log.d（TAG, "password now is : " + password）;isSetPassword = ！password.equals（"null"）; //判断是否已经保存有密码isInPasswordSettingMode = ！isSetPassword;//当未设置密码，进入密码设置模式// 初始化画笔mPaint = new Paint（Paint.ANTI_ALIAS_FLAG）;mPaint.setStyle（Paint.Style.STROKE）;mPaint.setStrokeCap（Paint.Cap.ROUND）;mPaint.setStrokeJoin（Paint.Join.ROUND）;mPath = new Path（）; }
根据参数绘制出圆

在onMeasure后调用该方法，绘制圆形矩阵

private GestureLockView[] mGestureLockViews; //保存所有的GestureLockViewprivate void initViews（） {// 初始化mGestureLockViewsif （mGestureLockViews == null） { mGestureLockViews = new GestureLockView[mCount * mCount]; // 计算每个GestureLockView的宽度 mGestureLockViewWidth = （int） （4 * mWidth * 1.0f / （5 * mCount + 1））; //计算每个GestureLockView的间距 mMarginBetweenLockView = （int） （mGestureLockViewWidth * 0.25）; // 设置画笔的宽度为GestureLockView的内圆直径稍微小点 mPaint.setStrokeWidth（mGestureLockViewWidth * 0.29f）; for （int i = 0; i < mGestureLockViews.length; i++） {//初始化每个GestureLockViewmGestureLockViews[i] = new GestureLockView（getContext（）, mNoFingerColor, mFingerOnColor, mFingerUpColorCorrect, mFingerUpColorError）;mGestureLockViews[i].setId（i + 1）;//设置参数，主要是定位GestureLockView间的位置RelativeLayout.LayoutParams lockerParams = new RelativeLayout.LayoutParams（mGestureLockViewWidth, mGestureLockViewWidth）;// 不是每行的第一个，则设置位置为前一个的右边if （i % mCount ！= 0） { lockerParams.addRule（RelativeLayout.RIGHT_OF, mGestureLockViews[i - 1].getId（））;}// 从第二行开始，设置为上一行同一位置View的下面if （i > mCount - 1） { lockerParams.addRule（RelativeLayout.BELOW, mGestureLockViews[i - mCount].getId（））;}//设置右下左上的边距int rightMargin = mMarginBetweenLockView;int bottomMargin = mMarginBetweenLockView;int leftMagin = 0;int topMargin = 0;/** * 每个View都有右外边距和底外边距 第一行的有上外边距 第一列的有左外边距 */if （i >= 0 && i < mCount）// 第一行{ topMargin = mMarginBetweenLockView;}if （i % mCount == 0）// 第一列{ leftMagin = mMarginBetweenLockView;}lockerParams.setMargins（leftMagin, topMargin, rightMargin,bottomMargin）;mGestureLockViews[i].setMode（Mode.STATUS_NO_FINGER）;addView（mGestureLockViews[i], lockerParams）; }} }
在触摸监听中处理不同事件
@Override public boolean onTouchEvent（MotionEvent event） {int action = event.getAction（）;int x = （int） event.getX（）;int y = （int） event.getY（）;Log.d（TAG, "mTryTimes : " + mTryTimes）;//重试次数超过限制，直接返回if （mTryTimes <= 0 && isRetryTimeLimit） {return true;}switch （action） { case MotionEvent.ACTION_DOWN:reset（）;// 重置break; case MotionEvent.ACTION_MOVE:drawAndGetSelectedWhenTouchMove（x, y）;break; case MotionEvent.ACTION_UP:if （isInPasswordSettingMode） { if （gesturePasswordSettingListener ！= null）setPasswordHandle（）; //设置密码} else { if （mChoose.size（） > 0） {isCorrect = checkAnswer（）; } else {return true; } if （gestureEventListener ！= null） {gestureEventListener.onGestureEvent（isCorrect）; //将结果回调 } if （this.mTryTimes == 0） {gestureUnmatchedExceedListener.onUnmatchedExceedBoundary（）; //超出重试次数，进入回调 }}drawWhenTouchUp（）;break;}invalidate（）;return true; } private void drawAndGetSelectedWhenTouchMove（int x, int y） {mPaint.setColor（mFingerOnColor）;mPaint.setAlpha（50）;GestureLockView child = getChildIdByPos（x, y）;if （child ！= null） { int cId = child.getId（）; if （！mChoose.contains（cId）） {mChoose.add（cId）;mChooseString = mChooseString + cId;child.setMode（Mode.STATUS_FINGER_ON）;// 设置指引线的起点mLastPathX = child.getLeft（） / 2 + child.getRight（） / 2;mLastPathY = child.getTop（） / 2 + child.getBottom（） / 2;if （mChoose.size（） == 1）// 当前添加为第一个{ mPath.moveTo（mLastPathX, mLastPathY）;} else// 非第一个，将两者使用线连上{ mPath.lineTo（mLastPathX, mLastPathY）;} }}// 指引线的终点mTmpTarget.x = x;mTmpTarget.y = y; } private void drawWhenTouchUp（） {if （isCorrect） { mPaint.setColor（mFingerUpColorCorrect）;} else { mPaint.setColor（mFingerUpColorError）;}mPaint.setAlpha（50）;Log.d（TAG, "mChoose = " + mChoose）;// 将终点设置位置为起点，即取消指引线mTmpTarget.x = mLastPathX;mTmpTarget.y = mLastPathY;// 改变子元素的状态为UPsetItemModeUp（）;// 计算每个元素中箭头需要旋转的角度for （int i = 0; i + 1 < mChoose.size（）; i++） { int childId = mChoose.get（i）; int nextChildId = mChoose.get（i + 1）; GestureLockView startChild = （GestureLockView） findViewById（childId）; GestureLockView nextChild = （GestureLockView） findViewById（nextChildId）; int dx = nextChild.getLeft（） - startChild.getLeft（）; int dy = nextChild.getTop（） - startChild.getTop（）; // 计算角度 int angle = （int） Math.toDegrees（Math.atan2（dy, dx）） + 90; startChild.setArrowDegree（angle）;} }
 设置密码处理:
private void setPasswordHandle（） {if （isWaitForFirstInput） { if （gesturePasswordSettingListener.onFirstInputComplete（mChooseString.length（））） {firstInputPassword = mChooseString;isWaitForFirstInput = false; }} else { if （firstInputPassword.equals（mChooseString）） {gesturePasswordSettingListener.onSuccess（）;savePassword（mChooseString）;isInPasswordSettingMode = false; } else {gesturePasswordSettingListener.onFail（）; }}reset（）; }
检查手势密码是否正确:
public boolean checkAnswer（） {if （password.equals（mChooseString）） { return true;} else { if （isRetryTimeLimit）this.mTryTimes--; return false;} }
重置：
private void reset（） {mChoose.clear（）;mChooseString = "";mPath.reset（）;for （GestureLockView gestureLockView : mGestureLockViews） { gestureLockView.setMode（Mode.STATUS_NO_FINGER）; gestureLockView.setArrowDegree（-1）;} }
对外公开的一些方法
public void setGestureEventListener（GestureEventListener gestureEventListener） {this.gestureEventListener = gestureEventListener; } public void setGestureUnmatchedExceedListener（int retryTimes, GestureUnmatchedExceedListener gestureUnmatchedExceedListener） {isRetryTimeLimit = true;this.mTryTimes = retryTimes;this.gestureUnmatchedExceedListener = gestureUnmatchedExceedListener; } public void setGesturePasswordSettingListener（GesturePasswordSettingListener gesturePasswordSettingListener） {this.gesturePasswordSettingListener = gesturePasswordSettingListener; } public void removePassword（） {gesturePreference.WriteStringPreference（"null"）;this.isSetPassword = false;isWaitForFirstInput = true;isInPasswordSettingMode = true; } public void savePassword（String password） {this.password = password;gesturePreference.WriteStringPreference（password）; } public String getPassword（） {return password; } public void resetView（） {reset（）;invalidate（）; } public void setRetryTimes（int retryTimes） {this.mTryTimes = retryTimes; } public boolean isSetPassword（） {return isSetPassword; }
定义密码存储的Preference
就是简单的存和读
public GesturePreference（Context context, int nameTableId） {this.context = context;if （nameTableId ！= -1） this.nameTable = nameTable + nameTableId; } public void WriteStringPreference（String data） {SharedPreferences preferences = context.getSharedPreferences（fileName, Context.MODE_PRIVATE）;SharedPreferences.Editor editor = preferences.edit（）;editor.putString（nameTable, data）;editor.commit（）; } public String ReadStringPreference（） {SharedPreferences preferences = context.getSharedPreferences（fileName, Context.MODE_PRIVATE）;return preferences.getString（nameTable, "null"）; }
总结
ok，至此，整个手势密码的实现就完成了。

以上就是小编对Android实现简易手势密码的资料整理，后续继续整理相关资料，谢谢大家对本站的支持！
版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图