相信大家在很多的app肯定看到過手勢密碼解鎖View，但是大家有沒有想過怎麼實現這樣一個View，哈，接下來，小編手把手教大家教寫一個GesturePasswordView。

先看一張效果圖

要實現這樣一個效果，首先需要在螢幕上繪製一個3x3九宮圖，如下圖

具體思路：
1、要知道每個點在螢幕上位置。
2、知道各個點的位置，在去繪製，呼叫drawCircle(float cx, float cy, float radius, @NonNull Paint paint)方法。*

定義一個Point類，記錄下每個點的位置和狀態。

    public class
 
 Point {
    //點的圓心的x，y的位置
    public float centerX;
    public float centerY;
    //每個點的索引
    private int index;
    //正常的狀態
    private int normalState = 0;
    //按下的狀態
    private int pressState = 1;
    //錯誤的狀態
    private int errorState = 2;
    private int state = normalState;
    public Point(float centerX, float
 
 centerY, int index) {
        this.centerX = centerX;
        this.centerY = centerY;
        this.index = index;
    }
    public void setErrorState() {
        this.state = errorState;
    }
    public void setPressState() {
        this.state = pressState;
    }
    public void setNormalState() {
        this
 
.state = normalState;
    }
    public void setState(int state) {
        this.state = state;
    }
    public boolean stateIsPress() {
        return state == pressState;
    }
    public boolean stateIsNormal() {
        return state == normalState;
    }
    public boolean stateIsError() {
        return state == errorState;
    }

GesturePasswordView類

    public class GesturePasswordView extends View {
    //3x3的解鎖View
    private static final int mRow = 3;
    private static final int mColumn = 3;
    //顏色
    private int mNormalColor = Color.GRAY;
    private int mPressedColor = Color.BLUE;
    private int mErrorColor = Color.RED;
    //畫筆
    private Paint mNormalPaint;
    private Paint mPressPaint;
    private Paint mErrorPaint;
    private Paint mLinePaint;
    //儲存Point的二位陣列
    private Point[][] mPoints = new Point[3][3];
    private float mDotRadius;
    //被選中的點
    private List<Point> mSelectPoints = new ArrayList<>();
    private boolean mInitOnce;
    private boolean mIsTouchPoint;
    private boolean mIsErrorStatus;
    private GesturePasswordViewListener mGesturePasswordViewListener;

    public GesturePasswordView(Context context) {
        this(context, null);
    }

    public GesturePasswordView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public GesturePasswordView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    private void initPaint() {
        mNormalPaint = getPaint();
        mNormalPaint.setColor(mNormalColor);
        mPressPaint = getPaint();
        mPressPaint.setColor(mPressedColor);
        mErrorPaint = getPaint();
        mErrorPaint.setColor(mErrorColor);
        mLinePaint = getPaint();
        mLinePaint.setColor(mPressedColor);

    }

    /**
     * 畫筆
     *
     * @return
     */
    private Paint getPaint() {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(mDotRadius / 9);
        return paint;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (!mInitOnce) {
            initDot();
            initPaint();
            mInitOnce = true;
        }
        for (int i = 0; i < mPoints.length; i++) {
            for (int j = 0; j < mPoints[i].length; j++) {
                Point point = mPoints[i][j];
                if (point.stateIsNormal()) {
                    //先繪製外圓
                    canvas.drawCircle(point.centerX, point.centerY, mDotRadius, mNormalPaint);
                    //後繪製內圓
                    canvas.drawCircle(point.centerX, point.centerY, mDotRadius / 6, mNormalPaint);
                } else if (point.stateIsPress()) {
                    canvas.drawCircle(point.centerX, point.centerY, mDotRadius, mPressPaint);
                    canvas.drawCircle(point.centerX, point.centerY, mDotRadius / 6, mPressPaint);
                } else if (point.stateIsError()) {
                    //設定下線條畫筆的顏色
                    canvas.drawCircle(point.centerX, point.centerY, mDotRadius, mErrorPaint);
                    canvas.drawCircle(point.centerX, point.centerY, mDotRadius / 6, mErrorPaint);
                }
            }
        }
        //繪製兩個點之間的連線
        drawLineToCanvas(canvas);
    }

     /**
       * 初始化每個點
       */

    private void initDot() {
    int width = this.getWidth();
    int height = this.getHeight();
    int offsetX = 0;
    int offsetY = 0;
    //相容下橫豎屏
    if (height > width) {
      offsetY = (height - width) / 2;
     } else {
      offsetX = (width - height) / 2;
     }
    int squareWidth = width / 3;
     //外圓的半徑
     mDotRadius = width / 12;
    //mPoints[0][0] = new Point(offsetX + squareWidth / 2, offsetY + squareWidth / 2, 0);
    //mPoints[0][1] = new Point(offsetX + squareWidth * 3 / 2, offsetY + squareWidth / 2, 1);
    //mPoints[0][2] = new Point(offsetX + squareWidth * 5 / 2, offsetY + squareWidth / 2, 2);
    //mPoints[1][0] = new Point(offsetX + squareWidth / 2, offsetY + squareWidth * 3 / 2, 3);
    //mPoints[1][1] = new Point(offsetX + squareWidth * 3 / 2, offsetY + squareWidth * 3 / 2, 4);
    //mPoints[1][2] = new Point(offsetX + squareWidth * 5 / 2, offsetY + squareWidth * 3 / 2, 5);
    //mPoints[2][0] = new Point(offsetX + squareWidth / 2, offsetY + squareWidth * 5 / 2, 6);
    //mPoints[2][1] = new Point(offsetX + squareWidth * 3 / 2, offsetY + squareWidth * 5 / 2, 7);
    //mPoints[2][2] = new Point(offsetX + squareWidth * 5 / 2, offsetY + squareWidth * 5 / 2, 8);
    //為了簡便，用for迴圈
            for (int i = 0; i < mRow; i++) {
                for (int j = 0; j < mColumn; j++) {
                    mPoints[i][j] = new Point(offsetX + squareWidth * (j * 2 + 1) / 2,
                     offsetY + squareWidth * (i * 2 + 1) / 2, i * mPoints.length + j);
                }
            }
        }

寫到這裡3x3九宮圖繪製完了，接下來是手指觸控時繪製兩個點之間的連線了。如下圖

兩個點之間連線是內圓之外與內圓之外的連線，怎麼計算這兩個點的位置呢？如下圖

    private void drawLineToCanvas(Canvas canvas) {
        if (mSelectPoints.size() >= 1) {
            Point lastPoint = mSelectPoints.get(0);
            for (int i = 1; i < mSelectPoints.size(); i++) {
                drawLine(canvas, lastPoint, mSelectPoints.get(i));
                lastPoint = mSelectPoints.get(i);
            }
            //觸控的時候繪製
            if (mIsTouchPoint) {
                drawLine(canvas, lastPoint, new Point(mMovingX, mMovingY, -1));
            }
        }
    }

    /**
     * 繪製兩個點之間的連線
     *
     * @param canvas
     * @param start
     * @param end
     */

  private void drawLine(Canvas canvas, Point start, Point end) {
        //兩點之間的距離
        double pointDistance = MathUtil.distance(end.centerX, end.centerY, start.centerX, start.centerY);
        float dx = end.centerX - start.centerX;
        float dy = end.centerY - start.centerY;
        float rx = (float) ((dx / pointDistance) * (mDotRadius / 6));
        float ry = (float) ((dy / pointDistance) * (mDotRadius / 6));
        canvas.drawLine(start.centerX + rx, start.centerY + ry,
                end.centerX - rx, end.centerY - ry, mLinePaint);
    }

處理下手指的Touch事件

    float mMovingX;
    float mMovingY;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //顯示錯誤時有個時間，是錯誤的狀態是手指觸控是不能繪製的
        if (mIsErrorStatus) {
            return false;
        }
        mMovingX = event.getX();
        mMovingY = event.getY();
        Point point = getPressPoint();
        switch (event.getAction()) {
            //手指按下
            case MotionEvent.ACTION_DOWN:
                if (point != null) {
                    mIsTouchPoint = true;
                    mSelectPoints.add(point);
                    point.setPressState();
                }
                break;
            //手指移動
            case MotionEvent.ACTION_MOVE:
                if (point != null) {
                    if (!mSelectPoints.contains(point)) {
                        mSelectPoints.add(point);
                        point.setPressState();
                    }
                }
                break;
            //手指擡起
            case MotionEvent.ACTION_UP:
                mIsTouchPoint = false;
                if (mGesturePasswordViewListener != null) {
                    if (mSelectPoints.size() < 4) {
                        showSelectError();
                    } else {
                        clearSelectPoints();
                    }
                }
                break;

        }
        invalidate();
        return true;
    }

使用者可能會解鎖錯誤，處理下解鎖View錯誤的情況，每個點和點與點之間的連線顯示紅色

  /**
     * 顯示錯誤
     */
    private void showSelectError() {
        for (int i = 0; i < mPoints.length; i++) {
            for (int j = 0; j < mPoints[i].length; j++) {
                Point point = mPoints[i][j];
                //把所有選中的點的狀態設定為Error
                if (mSelectPoints.contains(point)) {
                    point.setErrorState();
                    mIsErrorStatus = true;
                    mLinePaint.setColor(mErrorColor);
                }
            }
        }
        postDelayed(new Runnable() {
            @Override
            public void run() {
                clearSelectPoints();
                mIsErrorStatus = false;
                invalidate();
                mLinePaint.setColor(mPressedColor);
            }
        }, 1000);

    }

顯示錯誤完畢之後，需要恢復下點的正常狀態

    /**
     * 清空所有選中的點
     */
    private void clearSelectPoints() {
        for (int i = 0; i < mPoints.length; i++) {
            for (int j = 0; j < mPoints[i].length; j++) {
                Point point = mPoints[i][j];
                //把所有選中的點的狀態設定為Normal
                if (mSelectPoints.contains(point)) {
                    point.setNormalState();
                }
            }
        }
        mSelectPoints.clear();
    }

獲取手指觸控的是哪個點，根據點的圓心位置到手指觸控的位置的距離小於外圓的半徑。如圖

只要在藍色區域內就可以，之外的話手指肯定不在這個圓內。

private Point getPressPoint() {
    for (int i = 0; i < mPoints.length; i++) {
        for (int j = 0; j < mPoints[i].length; j++) {
            Point point = mPoints[i][j];
            if (point != null) {
                if (MathUtil.checkInRound(point.centerX, point.centerY, mDotRadius, mMovingX, mMovingY)) {
                    return point;
                }
            }
        }
    }
    return null;
}

最後說下index的作用，index是記錄了每個的點的索引，這樣做可以知道使用者連了哪些點。整個3x3的九宮圖解鎖到這繪製完畢，只貼上了部分關鍵程式碼，完整程式碼github地址：https://github.com/StevenYan88/GesturePasswordView

有不懂的還可以加小編的微信StevenInSH-，(注意微訊號最後面有個減號)。