Android簡易手勢密碼開源庫

本文由碼農網 – 蘇耀東原創，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

簡介

本文介紹一個Android手勢密碼開源庫的使用及實現的詳細過程，該開源庫主要實現以下幾個功能：

• 支援手勢密碼的繪製，並支援密碼儲存功能，解鎖時自動比對密碼給出結果
• 封裝了繪製密碼的方法，比對兩次密碼是否一致，可以快捷地進行手勢密碼的設定
• 可以設定密碼輸入錯誤後的重試次數上限
• 可以自定義不同狀態下手勢密碼圖案的顏色
• 可以自定義手勢密碼的觸控點數量（n*n）

最近需要用到手勢密碼解鎖功能，找了一些demo感覺用起來都有點麻煩，於是參考一些文章自己造了下輪子，封裝了相關的一些方法，使用起來比較便捷。

github連結如下，覺得還可以請幫忙star支援下~

github連結    個人部落格

使用效果

首先看下使用效果：

使用方法

XML佈局檔案中使用該控制元件

<com.syd.oden.gesturelock.view.GestureLockViewGroup
        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

其他的一些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; //儲存所有的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);
        }
    }

設定密碼處理:

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，至此，整個手勢密碼的實現就完成了。