Android简易手势密码开源库

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

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

使用方法

### XML布局文件中使用该控件 ```java

可以设置的一些参数，说明如下:
color_no_finger:未触摸时圆形的颜色
color_finger_on:触摸时圆形的颜色
color_finger_up_correct:输入正确时圆形的颜色
color_finger_up_error:出错时圆形的颜色
count：手势密码的圆形数量，n*n
preference_id：手势密码保存的id号，不输入或输入-1则使用默认的id

### 初始化
```java
private void initGesture() {
        mGestureLockViewGroup = (GestureLockViewGroup) findViewById(R.id.gesturelock);
        gestureEventListener();
        gesturePasswordSettingListener();
        gestureRetryLimitListener();
    }

### 设置手势密码监听事件 java 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("手势密码正确"); } } } }); } 若已经设置有密码则会进入该回调，在这里对结果进行处理，上面的例子中加入了一个重设密码的处理。 ### 手势密码设置 ```java 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则进入第二手势密码的绘制，两次输入一致后自动保存密码。 ### 重试次数超过限制监听 ```java  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中加入： java allprojects { repositories { ... maven { url "https://jitpack.io" } } } module的build.gradle中加入依赖： java dependencies { compile 'com.github.autume:GestureLock:1.0.0' }

总的使用就是这样，是不是很简单！

具体实现过程

下面讲下实现的过程，如果只是直接拿来用的话也可以略过这部分。 ### 自定义手势密码的圆形view 这部分主要参考Hongyang大大的博客，稍微修改了一下 #### 初始化传入参数 java 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(); } #### 根据不同的触摸状态绘制不同颜色的圆 ```java @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;
    }
} ``` #### 绘制箭头 ```java  @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的属性 ```java

#### 获取参数及初始化
```java
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后调用该方法，绘制圆形矩阵 ```java

private GestureLockView[] mGestureLockViews; //保存所有的GestureLockView

private 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.length; i++) {
            //初始化每个GestureLockView
            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 < 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;

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

设置密码处理: java 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(); } 检查手势密码是否正确: java public boolean checkAnswer() { if (password.equals(mChooseString)) { return true; } else { if (isRetryTimeLimit) this.mTryTimes--; return false; } } 重置： java private void reset() { mChoose.clear(); mChooseString = ""; mPath.reset(); for (GestureLockView gestureLockView : mGestureLockViews) { gestureLockView.setMode(Mode.STATUS_NO_FINGER); gestureLockView.setArrowDegree(-1); } } #### 对外公开的一些方法 ```java 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 就是简单的存和读 ```java 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，至此，整个手势密码的实现就完成了。

苏耀东的博客