Android 简易手势密码开源库

简介

本文介绍一个Android手势密码开源库的使用及实现的详细过程，该开源库主要实现以下几个功能：
- 支持手势密码的绘制，并支持密码保存功能，解锁时自动比对密码给出结果
- 封装了绘制密码的方法，比对两次密码是否一致，可以快捷地进行手势密码的设置
- 可以设置密码输入错误后的重试次数上限
- 可以自定义不同状态下手势密码图案的颜色
- 可以自定义手势密码的触摸点数量（n*n）

最近需要用到手势密码解锁功能，找了一些demo感觉用起来都有点麻烦，于是参考一些文章自己造了下轮子，封装了相关的一些方法，使用起来比较便捷。
github链接如下，觉得还可以请帮忙star支持下~
github链接 github.com/autume/Gest…
个人博客 blog.csdn.net/yaodong379

使用效果

首先看下使用效果：

使用方法

XML布局文件中使用该控件

可以设置的一些参数，说明如下:
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

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

        
        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的属性

获取参数及初始化

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; 

private void initViews() {
        
        if (mGestureLockViews == null) {
            mGestureLockViews = new GestureLockView[mCount * mCount];
            
            mGestureLockViewWidth = (int) (4 * mWidth * 1.0f / (5 * mCount + 1));
            
            mMarginBetweenLockView = (int) (mGestureLockViewWidth * 0.25);
            
            mPaint.setStrokeWidth(mGestureLockViewWidth * 0.29f);

            for (int i = 0; i < mGestureLockViews.length; i++) {
                
                mGestureLockViews[i] = new GestureLockView(getContext(), mNoFingerColor, mFingerOnColor, mFingerUpColorCorrect, mFingerUpColorError);
                mGestureLockViews[i].setId(i + 1);
                
                RelativeLayout.LayoutParams lockerParams = new RelativeLayout.LayoutParams(
                        mGestureLockViewWidth, mGestureLockViewWidth);

                
                if (i % mCount != 0) {
                    lockerParams.addRule(RelativeLayout.RIGHT_OF,
                            mGestureLockViews[i - 1].getId());
                }
                
                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;

        
        setItemModeUp();

        
        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，至此，整个手势密码的实现就完成了。

本文首发地址：www.codeceo.com/article/and…