android组件监听手势监听,Android简易手势密码开源库

简介

本文介绍一个Android手势密码开源库的使用及实现的详细过程，该开源库主要实现以下几个功能：支持手势密码的绘制，并支持密码保存功能，解锁时自动比对密码给出结果

封装了绘制密码的方法，比对两次密码是否一致，可以快捷地进行手势密码的设置

可以设置密码输入错误后的重试次数上限

可以自定义不同状态下手势密码图案的颜色

可以自定义手势密码的触摸点数量(n*n)

最近需要用到手势密码解锁功能，找了一些demo感觉用起来都有点麻烦，于是参考一些文章自己造了下轮子，封装了相关的一些方法，使用起来比较便捷。

github链接如下，觉得还可以请帮忙star支持下~

使用效果

首先看下使用效果：

使用方法

XML布局文件中使用该控件

android:id="@+id/gesturelock"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:preference_id="1"

android:layout_marginTop="30dp"

app:count="3" />

可以设置的一些参数，说明如下:color_no_finger:未触摸时圆形的颜色

color_finger_on:触摸时圆形的颜色

color_finger_up_correct:输入正确时圆形的颜色

color_finger_up_error:出错时圆形的颜色

count：收拾密码的圆形数量，n*n

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

其他的一些APIpublic 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 

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"?>

获取参数及初始化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() {        // 初始化mGestureLockViews

if (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[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 

{

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;        // 改变子元素的状态为UP

setItemModeUp();        // 计算每个元素中箭头需要旋转的角度

for (int i = 0; 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，至此，整个手势密码的实现就完成了。