在上一篇介紹了手勢密碼的使用，這一篇將主要介紹手勢密碼的原理，手勢密碼的功能主要是由自定義PatternLockView實現的。那咱這就一步一步來揭開PatternLockView的面紗。

效果圖

步驟

第一步

自定義PatternLockView繼承View,重寫兩個構造方法，一個在xml中定義會呼叫，一個在java程式碼中建立物件會呼叫。但不管怎麼定義，都會走到這個構造中。

public PatternLockView(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray typedArray = context.obtainStyledAttributes
 
(attrs, R.styleable.PatternLockView);
        try {
            sDotCount = typedArray.getInt(R.styleable.PatternLockView_dotCount,
                    DEFAULT_PATTERN_DOT_COUNT);
            mPathWidth = (int) typedArray.getDimension(R.styleable.PatternLockView_pathWidth,
                    ResourceUtils.getDimensionInPx
 
(getContext(), R.dimen.pattern_lock_path_width));
            mNormalDotStateColor = typedArray.getColor(R.styleable.PatternLockView_normalDotStateColor,
                    ResourceUtils.getColor(getContext(), R.color.white));
            mCorrectDotStateColor = typedArray.getColor(R.styleable.PatternLockView
 
_correctDotStateColor,
                    ResourceUtils.getColor(getContext(), R.color.white));
            mCorrectDotStrokeColor = typedArray.getColor(R.styleable.PatternLockView_correctDotStrokeStateColor,
                    ResourceUtils.getColor(getContext(), R.color.white));
            mCorrectLineStateColor = typedArray.getColor(R.styleable.PatternLockView_correctLineStateColor,
                    ResourceUtils.getColor(getContext(), R.color.white));
            mWrongLineStateColor = typedArray.getColor(R.styleable.PatternLockView_wrongLineStateColor,
                    ResourceUtils.getColor(getContext(), R.color.white));
            mWrongDotStateColor = typedArray.getColor(R.styleable.PatternLockView_wrongDotStateColor,
                    ResourceUtils.getColor(getContext(), R.color.white));
            mWrongDotStrokeStateColor = typedArray.getColor(R.styleable.PatternLockView_wrongDotStrokeStateColor,
                    ResourceUtils.getColor(getContext(), R.color.white));
            mDotNormalSize = (int) typedArray.getDimension(R.styleable.PatternLockView_dotNormalSize,
                    ResourceUtils.getDimensionInPx(getContext(), R.dimen.pattern_lock_dot_size));
            mDotSelectedSize = (int) typedArray.getDimension(R.styleable.PatternLockView_dotSelectedSize,
                    ResourceUtils.getDimensionInPx(getContext(), R.dimen.pattern_lock_dot_selected_size));
            mDotAnimationDuration = typedArray.getInt(R.styleable.PatternLockView_dotAnimationDuration,
                    DEFAULT_DOT_ANIMATION_DURATION);
        } finally {
            typedArray.recycle();
        }
        //獲取繪製點的個數
        mPatternSize = sDotCount * sDotCount;
        //存放選中的點
        mPattern = new ArrayList<>(mPatternSize);
        //二維陣列 選中點時置為true
        mPatternDrawLookup = new boolean[sDotCount][sDotCount];
        //二維陣列 存放點物件
        mDotStates = new DotState[sDotCount][sDotCount];
        //通過迴圈的方式，建立點物件，並對點初始化大小
        for (int i = 0; i < sDotCount; i++) {
            for (int j = 0; j < sDotCount; j++) {
                mDotStates[i][j] = new DotState();
                mDotStates[i][j].mSize = mDotNormalSize;
            }
        }
        //存放監聽物件
        mPatternListeners = new ArrayList<>();
        initView();
    }

這裡主要拿到我們自定義的點的數量 點的顏色 線的顏色 線的寬度等資訊，建立了存放選中點的集合 存放監聽物件的集合和兩個二維陣列及點物件。

再來看下initView()方法

private void initView() {
        //設定View可點選
        setClickable(true);

        //設定點與點連線畫筆
        mPathPaint = new Paint();
        mPathPaint.setAntiAlias(true);
        mPathPaint.setDither(true);
        mPathPaint.setColor(mCorrectLineStateColor);
        mPathPaint.setStyle(Paint.Style.STROKE);
        //當畫筆樣式為STROKE或FILL_OR_STROKE時，設定筆刷的圖形樣式，如圓形樣式Cap.ROUND,或方形樣式Cap.SQUARE
        mPathPaint.setStrokeJoin(Paint.Join.ROUND);
        //設定繪製時各圖形的結合方式，如平滑效果等
        mPathPaint.setStrokeCap(Paint.Cap.ROUND);
        mPathPaint.setStrokeWidth(mPathWidth);

        //設定畫點的畫筆
        mDotPaint = new Paint();
        mDotPaint.setAntiAlias(true);
        mDotPaint.setDither(true);

        //設定點外環的畫筆
        mRingPaint = new Paint();
        mRingPaint.setAntiAlias(true);
        mRingPaint.setDither(true);

        //設定點放大縮小動畫(用於隱藏模式)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && !isInEditMode()) {
            mFastOutSlowInInterpolator = AnimationUtils.loadInterpolator(
                    getContext(), android.R.interpolator.fast_out_slow_in);
            mLinearOutSlowInInterpolator = AnimationUtils.loadInterpolator(
                    getContext(), android.R.interpolator.linear_out_slow_in);
        }
    }

這裡主要對各個畫筆做了初始化工作，也可以通過Java程式碼進行更改，初始化工作完成後，就要捕捉手勢了。

第二步

通過onTouchEvent()方法獲取手勢座標

@Override
public boolean onTouchEvent(MotionEvent event) {
        //判斷View是否可用
        if (!mInputEnabled || !isEnabled()) {
            return false;
        }

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                handleActionDown(event);
                return true;
            case MotionEvent.ACTION_UP:
                handleActionUp(event);
                return true;
            case MotionEvent.ACTION_MOVE:
                handleActionMove(event);
                return true;
            case MotionEvent.ACTION_CANCEL:
                mPatternInProgress = false;
                resetPattern();
                notifyPatternCleared();
                return true;
        }
        return false;
    }

這裡對手指的按下 移動 擡起 取消都做了判斷
取消的操作比較簡單，就是重置各個狀態

下邊分別來看下按下 移動 擡起

handleActionDown按下方法

private void handleActionDown(MotionEvent event) {
        //每次按下都重置下狀態
        resetPattern();
        //獲取手指按下的座標，以View區域的左上頂點為（0，0）座標
        float x = event.getX();
        float y = event.getY();
        //通過detectAndAddHit方法判斷首次按下是否觸碰到點
        Dot hitDot = detectAndAddHit(x, y);

        //如果觸碰到點，則改變狀態，開始畫選中點顏色和與點的連線
        //如果沒有觸碰上，則不畫線（通過mPatternInProgress狀態控制）
        if (hitDot != null) {
            mPatternInProgress = true;
            mPatternViewMode = CORRECT;
            notifyPatternStarted();
        } else {
            mPatternInProgress = false;
            notifyPatternCleared();
        }
        //如果首次觸碰到點，則進行區域性重新整理
        if (hitDot != null) {
            //獲取選中點的中心座標
            float startX = getCenterXForColumn(hitDot.mColumn);
            float startY = getCenterYForRow(hitDot.mRow);

            float widthOffset = mViewWidth / 2f;
            float heightOffset = mViewHeight / 2f;

            // 區域性重新整理其實沒多大用，在onDraw裡邊還是所有程式碼都走
            invalidate((int) (startX - widthOffset),
                    (int) (startY - heightOffset),
                    (int) (startX + widthOffset), (int) (startY + heightOffset));
        }
        //把首次按下的座標賦值給mInProgressX mInProgressY
        //當選中時可開始畫線
        mInProgressX = x;
        mInProgressY = y;
    }

按下操作主要是獲取首次按下座標，並通過座標拿到是否觸碰到某一個點上，如果觸碰到點上，則改變點的顏色並開始畫點與手指的連線。

handleActionMove移動方法

private void handleActionMove(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        Dot hitDot = detectAndAddHit(x, y);
        int patternSize = mPattern.size();
        //手指按下時沒有選中點，當滑動時，滑動到點上進入此判斷語句
        //改變mPatternInProgress mPatternViewMode狀態，重畫選中點和外環的顏色及開始畫與點的連線
        if (hitDot != null && patternSize == 1) {
            mPatternInProgress = true;
            mPatternViewMode = CORRECT;
            notifyPatternStarted();
        }

        mInProgressX = event.getX();
        mInProgressY = event.getY();
        //簡單粗暴 重新繪製
        invalidate();
    }

移動操作主要是根據不斷移動的座標，判斷是否觸碰到點上，如果觸碰上了就新增到選中點的集合內，並重畫選中點和外環的顏色及開始畫與點的連線。

handleActionUp擡起方法

private void handleActionUp(MotionEvent event) {
        // 判斷手勢集合中是否有選中的點
        if (!mPattern.isEmpty()) {
            //重置狀態 阻止畫最後一個點與手指之間的連線
            mPatternInProgress = false;
            notifyPatternDetected();
            //擡起的時候再繪製一次
            invalidate();
        }
    }

擡起操作主要是判斷存放點的集合是否為空，如果不為空，則重置狀態，阻止畫最後一個點與手指之間的連線。

detectAndAddHit方法

/**
* 根據x,y座標確定是否點選到點上
*/
private Dot detectAndAddHit(float x, float y) {
        //通過checkForNewHit判斷座標是否在一個點上
        final Dot dot = checkForNewHit(x, y);
        //如果在則返回點 如果不在則返回null
        if (dot != null) {
            Dot fillInGapDot = null;
            //拿到初始化定義存放選中點的集合
            final ArrayList<Dot> pattern = mPattern;
            if (!pattern.isEmpty()) {
                //拿到集合中最後一個點
                Dot lastDot = pattern.get(pattern.size() - 1);
                int dRow = dot.mRow - lastDot.mRow;
                int dColumn = dot.mColumn - lastDot.mColumn;

                int fillInRow = lastDot.mRow;
                int fillInColumn = lastDot.mColumn;

                //重新計算行
                /**
                 * 重新計算行
                 * 例如：從（0，1）直接到（2，1），想跳過（1，1）時，則通過此方法把第一行新增進去
                 */
                if (Math.abs(dRow) == 2 && Math.abs(dColumn) != 1) {
                    fillInRow = lastDot.mRow + ((dRow > 0) ? 1 : -1);
                }
                //重新計算列
                if (Math.abs(dColumn) == 2 && Math.abs(dRow) != 1) {
                    fillInColumn = lastDot.mColumn + ((dColumn > 0) ? 1 : -1);
                }
                //
                fillInGapDot = Dot.of(fillInRow, fillInColumn);
            }

            /**
             * 例如：從（0，1）直接到（2，1），想跳過（1，1）時，則通過此方法把第一行新增進去
             */
            if (fillInGapDot != null
                    && !mPatternDrawLookup[fillInGapDot.mRow][fillInGapDot.mColumn]) {
                addCellToPattern(fillInGapDot);
            }
            /**
             * 如果中間跳過一個點則先新增跳過的點
             * 如果沒有則新增選中的點
             */
            addCellToPattern(dot);
            /**
             * 判斷是否震動
             */
            if (mEnableHapticFeedback) {
                performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY,
                        HapticFeedbackConstants.FLAG_IGNORE_VIEW_SETTING
                                | HapticFeedbackConstants.FLAG_IGNORE_GLOBAL_SETTING);
            }
            return dot;
        }
        return null;
    }

detectAndAddHit方法主要是根據座標拿到點，並判斷前一個點與現在點中間是否還有必須經過但還有新增的點，如果有則優先新增中間點，如果沒有則直接新增現在的點。

checkForNewHit方法

/**
     * 檢查是否滑動到點上
     */
    private Dot checkForNewHit(float x, float y) {
        //判斷y座標是否在點上
        final int rowHit = getRowHit(y);
        if (rowHit < 0) {
            return null;
        }
        //判斷x座標是否在點上
        final int columnHit = getColumnHit(x);
        if (columnHit < 0) {
            return null;
        }

        /**
         * 如果已經選中，則不再選中
         */
        if (mPatternDrawLookup[rowHit][columnHit]) {
            return null;
        }
        //返回一個點物件
        return Dot.of(rowHit, columnHit);
    }

checkForNewHit方法主要是根據x,y座標判斷是否在一個點上，如果是則返回一個點物件。
getRowHit getColumnHit方法

    /**
     * 根據y座標判斷是否在某一個點的y座標上
     * if (y >= hitTop && y <= hitTop + hitSize)這行給點加了一個範圍，在此範圍內都算點上了點
     */
    private int getRowHit(float y) {
        final float squareHeight = mViewHeight;
        float hitSize = squareHeight * mHitFactor;

        float offset = getPaddingTop() + (squareHeight - hitSize) / 2f;
        for (int i = 0; i < sDotCount; i++) {
            float hitTop = offset + squareHeight * i;
            if (y >= hitTop && y <= hitTop + hitSize) {
                return i;
            }
        }
        return -1;
    }

    /**
     * 根據x座標判斷是否在某一個點的x座標上
     * if (x >= hitLeft && x <= hitLeft + hitSize)這行給點加了一個範圍，在此範圍內都算點上了點
     */
    private int getColumnHit(float x) {
        final float squareWidth = mViewWidth;
        float hitSize = squareWidth * mHitFactor;

        float offset = getPaddingLeft() + (squareWidth - hitSize) / 2f;
        for (int i = 0; i < sDotCount; i++) {

            final float hitLeft = offset + squareWidth * i;
            if (x >= hitLeft && x <= hitLeft + hitSize) {
                return i;
            }
        }
        return -1;
    }

這兩個方法是給點加了一個範圍，在此範圍內都算點上了點。

addCellToPattern方法

private void addCellToPattern(Dot newDot) {
        //將選中的點置為true
        mPatternDrawLookup[newDot.mRow][newDot.mColumn] = true;
        //給集合中新增選中的點
        mPattern.add(newDot);
        //開始點放大縮小動畫（隱藏模式用）
        startDotSelectedAnimation(newDot);
        //回撥給使用者選中的點
        notifyPatternProgress();
    }

addCellToPattern方法是將選中的點添到集合中，並把mPatternDrawLookup中點的位置改為true。

以上就是按下 移動 擡起的主要方法，下面再來看下點和線是如何繪製的。

第三步

首先通過onSizeChanged方法來確定patternlockview的大小

onSizeChanged方法

    @Override
    protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
        //設定每一個點佔據的寬度大小
        int adjustedWidth = width - getPaddingLeft() - getPaddingRight();
        mViewWidth = adjustedWidth / (float) sDotCount;
        //設定每一個點佔據的高度度大小
        int adjustedHeight = height - getPaddingTop() - getPaddingBottom();
        mViewHeight = adjustedHeight / (float) sDotCount;
    }

通過onSizeChanged方法，獲取到一個點佔據的寬和高
然後就是onDraw繪製方法了，所有的繪製工作都是由它來完成，同時在滑動過程中，此方法也是在不斷的呼叫。

onDraw方法

    @Override
    protected void onDraw(Canvas canvas) {
        //拿到選中點的集合
        ArrayList<Dot> pattern = mPattern;
        int patternSize = pattern.size();
        //拿到存放點是否選中的二維陣列
        boolean[][] drawLookupTable = mPatternDrawLookup;
        //拿到路徑物件
        Path currentPath = mCurrentPath;
        //清除所有的直線和曲線的路徑，但保持內部資料結構，以便更快地重用。
        currentPath.rewind();

        //判斷是否是隱藏模式
        boolean drawPath = !mInStealthMode;
        if (drawPath) {
            //根據當前模式設定連線線的顏色
            mPathPaint.setColor(getCurrentLineStateColor());
            //是否繪製最後一個點與手指之間的連線
            boolean anyCircles = false;
            float lastX = 0f;
            float lastY = 0f;
            for (int i = 0; i < patternSize; i++) {
                //拿到選中的點
                Dot dot = pattern.get(i);

                //如果點沒有被選中，則不需要跳出迴圈
                if (!drawLookupTable[dot.mRow][dot.mColumn]) {
                    return;
                }
                anyCircles = true;
                //拿到某點的中心座標
                float centerX = getCenterXForColumn(dot.mColumn);
                float centerY = getCenterYForRow(dot.mRow);
                if (i != 0) {
                    DotState state = mDotStates[dot.mRow][dot.mColumn];
                    currentPath.rewind();
                    //當到第二個的時候，則lastX，lastY就是選中的第一個點的中心
                    currentPath.moveTo(lastX, lastY);
                    if (state.mLineEndX != Float.MIN_VALUE
                            && state.mLineEndY != Float.MIN_VALUE) {//主要用於自動繪製
                        currentPath.lineTo(state.mLineEndX, state.mLineEndY);
                    } else {//手動繪製時進入的
                        currentPath.lineTo(centerX, centerY);
                    }
                    //把線連線上
                    canvas.drawPath(currentPath, mPathPaint);
                }
                //當是第一個時，先拿到第一個的中心點，然後從第一個開始畫線，後續再把下一個點的中心點賦值
                lastX = centerX;
                lastY = centerY;
            }

            //這裡繪製最後一個點和和點連線的線
            if (mPatternInProgress && anyCircles) {
                currentPath.rewind();
                currentPath.moveTo(lastX, lastY);
                currentPath.lineTo(mInProgressX, mInProgressY);
                //把線連線上
                canvas.drawPath(currentPath, mPathPaint);
            }
        }

        //迴圈畫點
        for (int i = 0; i < sDotCount; i++) {
            float centerY = getCenterYForRow(i);//排
            for (int j = 0; j < sDotCount; j++) {
                DotState dotState = mDotStates[i][j];
                float centerX = getCenterXForColumn(j);
                float size = dotState.mSize * dotState.mScale;
                float translationY = dotState.mTranslateY;
                drawCircle(canvas, (int) centerX, (int) centerY + translationY,
                        size, drawLookupTable[i][j], dotState.mAlpha);
            }
        }
    }

drawCircle方法

private void drawCircle(Canvas canvas, float centerX, float centerY,
                            float size, boolean partOfPattern, float alpha) {
        //如果隱藏模式則不走
        if (partOfPattern && !isInStealthMode()) {
            //設定點外環的顏色
            mRingPaint.setColor(getCurrentDotStrokeColor(partOfPattern));
            //畫點的外環
            canvas.drawCircle(centerX, centerY, size, mRingPaint);
        }
        //畫點
        mDotPaint.setColor(getCurrentDotStateColor(partOfPattern));
        mDotPaint.setAlpha((int) (alpha * 255));
        canvas.drawCircle(centerX, centerY, size / 2, mDotPaint);
    }

在onDraw方法中對畫什麼顏色的點，什麼顏色的線都做了判斷。
至此整個繪製過程就算完成了，剩下的一些顏色的判斷，各個狀態的回撥，各個模式都比較簡單，就不再這裡特別說明了。

貢獻

這個庫是從Aritra Roy的PatternLockView獲取並添加了一些改進使其更加靈活，如果您發現bug或想改進它的任何方面，可以自由地用拉請求進行貢獻。

原始碼下載
APK下載