前言

最近遇到手勢密碼的開發(fā)需求，花半天時間擼了一下，發(fā)現(xiàn)沒有想象中難，在這里記錄一下。

先上效果圖

gesture_320.gif

思路

1. 自定義GestureView繼續(xù)自View；
2. 先計算九宮格的九個點坐標，并保存起來，重寫onDraw方法，開始繪制；
3. 首先繪制初始狀態(tài)：即把九個原始狀態(tài)的圓點畫出來；
4. 重寫onTouchEvent方法，當手勢進入到九宮格中任何一個點的范圍時，激活該點，畫出相應(yīng)的選擇狀態(tài)；
5. 把每一個激活的點按順序保存到List中，相當于把繪制圖案轉(zhuǎn)換為數(shù)組，當繪制完成后把該結(jié)果回調(diào)給上層。

GestureView的全部代碼

代碼貼此處，具體說明可以看注釋。

public class GestureView extends View {
    private static final String TAG = "GestureView";

    /**
     * 格子數(shù)
     */
    private static final int POINT_COUNT = 9;

    /**
     * 中心點的半徑
     */
    private static final int POINT_RADIUS = 25;

    /**
     * 外圈半徑
     */
    private static final int CIRCLE_RADIUS = 75;

    /**
     * 最少連接的點數(shù)，否則提示錯誤
     */
    private static final int MIN_POINT_COUNT = 4;

    /**
     * 中心點顏色
     */
    private int pointColor = R.color.point_color;

    /**
     * 中心點選擇態(tài)顏色
     */
    private int pointSelectColor = R.color.point_select_color;

    /**
     * 圓圈的顏色
     */
    private int circleColor = R.color.circle_color;

    private Paint mPaint = new Paint();
    private Map<Integer, int[]> pointMap = new HashMap<>(10);
    /**
     * 記錄選擇過的點下標
     */
    private List<Integer> selectList = new ArrayList();
    private GestureListener listener;

    public interface GestureListener {
        void onStart();

        void onDraw(int index);

        void onFinish(List<Integer> list);

        void onError();
    }

    public void setListener(GestureListener listener) {
        this.listener = listener;
    }

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

    public GestureView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 保存每個點對應(yīng)的坐標到Map中
     */
    private void initPointMap() {
        if (pointMap.size() > 0) {
            return;
        }
        for (int i = 1; i <= POINT_COUNT; i++) {
            int[] location = getLocation(i);
            pointMap.put(i, location);
        }
    }

    /**
     * 設(shè)置點，圈，和連接線的顏色
     */
    public void setColor(int pointColor, int pointSelectColor, int circleColor) {
        if (pointColor > 0) {
            this.pointColor = pointColor;
        }
        if (pointSelectColor > 0) {
            this.pointSelectColor = pointSelectColor;
        }
        if (circleColor > 0) {
            this.circleColor = circleColor;
        }
    }

    /**
     * 恢復(fù)初始未選擇的狀態(tài)
     */
    public void reset() {
        setColor(0, R.color.point_select_color, R.color.circle_color);
        selectList.clear();
        invalidate();
    }

    /**
     * 顯示錯誤，比如連結(jié)的點過少
     */
    public void showError() {
        setColor(0, R.color.error_point_select_color, R.color.error_circle_color);
        invalidate();
        postDelayed(new Runnable() {
            @Override
            public void run() {
                reset();
            }
        }, 1800);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                if (getSelectPointCount() < MIN_POINT_COUNT) {
                    showError();
                    if (null != listener) {
                        listener.onError();
                    }
                } else {
                    if (null != listener) {
                        listener.onFinish(selectList);
                    }
                }
                break;

            case MotionEvent.ACTION_DOWN:
                if (null != listener) {
                    listener.onStart();
                }

            case MotionEvent.ACTION_MOVE:
                int selectIndex = getSelectPoint(event.getX(), event.getY());
                if (selectIndex > 0 && !selectList.contains(selectIndex)) {
                    selectList.add(selectIndex);
                    invalidate();
                }
                break;

            default:
                break;
        }
        return true;
    }

    /**
     * 獲取當前觸摸的點
     */
    private int getSelectPoint(float touchX, float touchY) {
        Set<Map.Entry<Integer, int[]>> entries = pointMap.entrySet();
        for (Map.Entry<Integer, int[]> entry : entries) {
            int[] value = entry.getValue();
            boolean xOk = touchX > value[0] - CIRCLE_RADIUS && touchX < value[0] + CIRCLE_RADIUS;
            boolean yOk = touchY > value[1] - CIRCLE_RADIUS && touchY < value[1] + CIRCLE_RADIUS;
            if (xOk && yOk) {
                entry.getKey();
                return entry.getKey();
            }
        }
        return 0;
    }

    /**
     * 獲取已經(jīng)選擇的點數(shù)量
     */
    private int getSelectPointCount() {
        if (null == selectList || selectList.isEmpty()) {
            return 0;
        }
        List<Integer> newList = new ArrayList<>();
        for (int i : selectList) {
            if (!newList.contains(i)) {
                newList.add(i);
            }
        }
        return newList.size();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.d(TAG, "onDraw");
        initPointMap();

        for (int i = 1; i <= POINT_COUNT; i++) {
            int[] location = getLocation(i);

            if (selectList.contains(i)) {
                //畫圓圈
                mPaint.setColor(getResources().getColor(circleColor));
                canvas.drawCircle(location[0], location[1], CIRCLE_RADIUS, mPaint);

                //畫圓圈邊框
                mPaint.setColor(getResources().getColor(pointSelectColor));
                mPaint.setStrokeWidth(2);
                mPaint.setStyle(Paint.Style.STROKE);
                canvas.drawCircle(location[0], location[1], CIRCLE_RADIUS - 2, mPaint);
                mPaint.setStyle(Paint.Style.FILL);

                //畫中心選擇態(tài)的點
                canvas.drawCircle(location[0], location[1], POINT_RADIUS, mPaint);

                if (null != listener) {
                    listener.onDraw(i);
                }
            } else {
                //畫未選擇的點
                mPaint.setColor(getResources().getColor(pointColor));
                canvas.drawCircle(location[0], location[1], POINT_RADIUS, mPaint);
            }
        }

        //畫連線
        if (selectList.size() > 1) {
            mPaint.setStrokeWidth(4);
            mPaint.setColor(getResources().getColor(pointSelectColor));
            for (int i = 0; i + 1 < selectList.size(); i++) {
                float startX = getLocation(selectList.get(i))[0];
                float startY = getLocation(selectList.get(i))[1];
                float endX = getLocation(selectList.get(i + 1))[0];
                float endY = getLocation(selectList.get(i + 1))[1];
                canvas.drawLine(startX, startY, endX, endY, mPaint);
            }
        }
    }

    /**
     * 獲取某個點的具體坐標
     */
    private int[] getLocation(int index) {
        int width = getWidth();
        int height = getHeight();
        int[] location = new int[2];
        switch (index) {
            case 1:
                location[0] = CIRCLE_RADIUS;
                location[1] = CIRCLE_RADIUS;
                break;

            case 2:
                location[0] = width / 2;
                location[1] = CIRCLE_RADIUS;
                break;

            case 3:
                location[0] = width - CIRCLE_RADIUS;
                location[1] = CIRCLE_RADIUS;
                break;

            case 4:
                location[0] = CIRCLE_RADIUS;
                location[1] = height / 2;
                break;

            case 5:
                location[0] = width / 2;
                location[1] = height / 2;
                break;

            case 6:
                location[0] = width - CIRCLE_RADIUS;
                location[1] = height / 2;
                break;

            case 7:
                location[0] = CIRCLE_RADIUS;
                location[1] = height - CIRCLE_RADIUS;
                break;

            case 8:
                location[0] = width / 2;
                location[1] = height - CIRCLE_RADIUS;
                break;

            case 9:
                location[0] = width - CIRCLE_RADIUS;
                location[1] = height - CIRCLE_RADIUS;
                break;

            default:
                break;
        }
        return location;
    }

}

使用

具體使用時，可以把整個類復(fù)制到項目里，根據(jù)需求調(diào)整一下細節(jié)即可。
比如需求是設(shè)置新手勢，需要用戶繪制兩次并進行對比，上層代碼大概如下：

gestureView.setListener(new GestureView.GestureListener() {
            @Override
            public void onStart() {
                tvError.setVisibility(View.INVISIBLE);
            }

            @Override
            public void onDraw(int index) {

            }

            @Override
            public void onFinish(List<Integer> list) {
               if (mList.isEmpty()) {
                    mList.addAll(list);
                    tvGuide.setText(R.string.gesture_set_again);
                    ToastUtil.showLong("請再次繪制相同解鎖圖案");
                } else {
                    if (theNewIsSame(list)) {
                        ToastUtil.showLong("設(shè)置成功");
                        setResult(RESULT_OK);
                        finish();
                    } else {
                        gestureView.showError();
                        tvError.setVisibility(View.VISIBLE);
                        tvError.setText("兩次繪制圖案不一致 請重新繪制");
                    }
                }
                gestureView.reset();
            }

            @Override
            public void onError() {
                tvError.setVisibility(View.VISIBLE);
                tvError.setText("手勢密碼最少連續(xù)四個點");
            }
        });

    /**
     * 判斷兩次繪制是否一致
     */
    private boolean isSame(List<Integer> list) {
        if (mList.size() != list.size()) {
            return false;
        }
        for (int i = 0; i < list.size(); i++) {
            if (!mList.get(i).equals(list.get(i))) {
                return false;
            }
        }
        return true;
    }