Android 自定义 View——手势密码

    Android 自定义 View 当然是十分重要的，笔者这两天写了一个自定义 View 的手势密码，和大家分享分享：

    首先，我们来创建一个表示点的类，Point.java：

public class Point {

    // 点的三种状态
    public static final int POINT_STATUS_NORMAL = 0;
    public static final int POINT_STATUS_CLICK = 1;
    public static final int POINT_STATUS_ERROR = 2;

    // 默认状态
    public int state = POINT_STATUS_NORMAL;

    // 点的坐标
    public float mX;
    public float mY;

    public Point(float x,float y){
        this.mX = x;
        this.mY = y;
    }

    // 获取两个点的距离
    public float getInstance(Point a){
        return (float) Math.sqrt((mX-a.mX)*(mX-a.mX)+(mY-a.mY)*(mY-a.mY));
    }

}

    然后我们创建一个 HandleLock.java 继承自 View，并重写其三种构造方法（不重写带两个参数的构造方法会导致程序出错）：

    首先，我们先把后面需要用的变量写出来，方便大家明白这些变量是干嘛的：

// 三种画笔
    private Paint mNormalPaint;
    private Paint mClickPaint;
    private Paint mErrorPaint;

    // 点的半径
    private float mRadius;

    // 九个点，使用二维数组
    private Point[][] mPoints = new Point[3][3];

    // 保存手势划过的点
    private ArrayList<Point> mClickPointsList = new ArrayList<Point>();
    // 手势的 x 坐标，y 坐标
    private float mHandleX;
    private float mHandleY;

    private OnDrawFinishListener mListener;

    // 保存滑动路径
    private StringBuilder mRoute = new StringBuilder();
    // 是否在画错误状态
    private boolean isDrawError = false;

    接下来我们来初始化数据：

// 初始化数据
    private void initData() {

        // 初始化三种画笔，正常状态为灰色，点下状态为蓝色，错误为红色
        mNormalPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mNormalPaint.setColor(Color.parseColor("#ABABAB"));
        mClickPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mClickPaint.setColor(Color.parseColor("#1296db"));
        mErrorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mErrorPaint.setColor(Color.parseColor("#FB0C13"));

        // 获取点间隔
        float offset = 0;
        if (getWidth() > getHeight()) {
            // 横屏
            offset = getHeight() / 7;
            mRadius = offset / 2;
            mPoints[0][0] = new Point(getWidth() / 2 - offset * 2, offset + mRadius);
            mPoints[0][1] = new Point(getWidth() / 2, offset + mRadius);
            mPoints[0][2] = new Point(getWidth() / 2 + offset * 2, offset + mRadius);
            mPoints[1][0] = new Point(getWidth() / 2 - offset * 2, offset * 3 + mRadius);
            mPoints[1][1] = new Point(getWidth() / 2, offset * 3 + mRadius);
            mPoints[1][2] = new Point(getWidth() / 2 + offset * 2, offset * 3 + mRadius);
            mPoints[2][0] = new Point(getWidth() / 2 - offset * 2, offset * 5 + mRadius);
            mPoints[2][1] = new Point(getWidth() / 2, offset * 5 + mRadius);
            mPoints[2][2] = new Point(getWidth() / 2 + offset * 2, offset * 5 + mRadius);
        } else {
            // 竖屏
            offset = getWidth() / 7;
            mRadius = offset / 2;
            mPoints[0][0] = new Point(offset + mRadius, getHeight() / 2 - 2 * offset);
            mPoints[0][1] = new Point(offset * 3 + mRadius, getHeight() / 2 - 2 * offset);
            mPoints[0][2] = new Point(offset * 5 + mRadius, getHeight() / 2 - 2 * offset);
            mPoints[1][0] = new Point(offset + mRadius, getHeight() / 2);
            mPoints[1][1] = new Point(offset * 3 + mRadius, getHeight() / 2);
            mPoints[1][2] = new Point(offset * 5 + mRadius, getHeight() / 2);
            mPoints[2][0] = new Point(offset + mRadius, getHeight() / 2 + 2 * offset);
            mPoints[2][1] = new Point(offset * 3 + mRadius, getHeight() / 2 + 2 * offset);
            mPoints[2][2] = new Point(offset * 5 + mRadius, getHeight() / 2 + 2 * offset);
        }


    }

    大家可以看到，我来给点定坐标是，是按照比较窄的边的 1/7 作为点的直径，这样保证了，不管你怎么定义 handleLock 的宽高，都可以使里面的九个点看起来位置很舒服。

   接下来我们就需要写一些函数，将点、线绘制到控件上，我自己把绘制分成了三部分，一部分是点，一部分是点与点之间的线，一部分是手势的小点和手势到最新点的线。

// 画点，按照我们选择的半径画九个圆
    private void drawPoints(Canvas canvas) {
        // 便利所有的点，并且判断这些点的状态
        for (int i = 0; i < 3; i++) {
            for (int j = 0; j < 3; j++) {
                Point point = mPoints[i][j];
                switch (point.state) {
                    case Point.POINT_STATUS_NORMAL:
                        canvas.drawCircle(point.mX, point.mY, mRadius, mNormalPaint);
                        break;
                    case Point.POINT_STATUS_CLICK:
                        canvas.drawCircle(point.mX, point.mY, mRadius, mClickPaint);
                        break;
                    case Point.POINT_STATUS_ERROR:
                        canvas.drawCircle(point.mX, point.mY, mRadius, mErrorPaint);
                        break;
                    default:
                        break;

                }
            }
        }
    }
    // 画点与点之间的线
    private void drawLines(Canvas canvas) {
        // 判断手势是否已经划过点了
        if (mClickPointsList.size() > 0) {
            Point prePoint = mClickPointsList.get(0);
            // 将所有已选择点的按顺序连线
            for (int i = 1; i < mClickPointsList.size(); i++) {
                // 判断已选择点的状态
                if (prePoint.state == Point.POINT_STATUS_CLICK) {
                    mClickPaint.setStrokeWidth(7);
                    canvas.drawLine(prePoint.mX, prePoint.mY, mClickPointsList.get(i).mX, mClickPointsList.get(i).mY, mClickPaint);
                }
                if (prePoint.state == Point.POINT_STATUS_ERROR) {
                    mErrorPaint.setStrokeWidth(7);
                    canvas.drawLine(prePoint.mX, prePoint.mY, mClickPointsList.get(i).mX, mClickPointsList.get(i).mY, mErrorPaint);
                }
                prePoint = mClickPointsList.get(i);
            }

        }

    }
    // 画手势点
    private void drawFinger(Canvas canvas) {
        // 有选择点后再出现手势点
        if (mClickPointsList.size() > 0) {
            canvas.drawCircle(mHandleX, mHandleY, mRadius / 2, mClickPaint);
        }
        // 最新点到手指的连线，判断是否有已选择的点，有才能画
        if (mClickPointsList.size() > 0) {
            canvas.drawLine(mClickPointsList.get(mClickPointsList.size() - 1).mX, mClickPointsList.get(mClickPointsList.size() - 1).mY,
                    mHandleX, mHandleY, mClickPaint);
        }
    }

    上面的代码我们看到需要使用到手势划过的点，我们是怎么选择的呢？

// 获取手指移动中选取的点
private int[] getPositions() {
    Point point = new Point(mHandleX, mHandleY);
    int[] position = new int[2];
    // 遍历九个点，看手势的坐标是否在九个圆内，有则返回这个点的两个下标
    for (int i = 0; i < 3; i++) {
        for (int j = 0; j < 3; j++) {
            if (mPoints[i][j].getInstance(point) <= mRadius) {
                position[0] = i;
                position[1] = j;
                return position;
            }
        }

    }
    return null;
}

    我们需要重写其 onTouchEvent 来通过手势动作来提交选择的点，并更新视图：

// 重写点击事件
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // 获取手势的坐标
        mHandleX = event.getX();
        mHandleY = event.getY();
        int[] position;
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                position = getPositions();
                // 判断点下时是否选择到点
                if (position != null) {
                    // 添加到已选择点中，并改变其状态
                    mClickPointsList.add(mPoints[position[0]][position[1]]);
                    mPoints[position[0]][position[1]].state = Point.POINT_STATUS_CLICK;
                    // 保存路径，依次保存其横纵下标
                    mRoute.append(position[0]);
                    mRoute.append(position[1]);
                }
                break;
            case MotionEvent.ACTION_MOVE:
                position = getPositions();
                // 判断手势移动时是否选择到点
                if (position != null) {
                    // 判断当前选择的点是否已经被选择过
                    if (!mClickPointsList.contains(mPoints[position[0]][position[1]])) {
                        // 添加到已选择点中，并改变其状态
                        mClickPointsList.add(mPoints[position[0]][position[1]]);
                        mPoints[position[0]][position[1]].state = Point.POINT_STATUS_CLICK;
                        // 保存路径，依次保存其横纵下标
                        mRoute.append(position[0]);
                        mRoute.append(position[1]);
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                // 重置数据
                resetData();
                break;
            default:
                break;
        }
        // 更新视图
        invalidate();

        return true;
    }

// 重置数据
    private void resetData() {
        // 将所有选择过的点的状态改为正常
        for (Point point :
                mClickPointsList) {
            point.state = Point.POINT_STATUS_NORMAL;
        }
        // 清空已选择点
        mClickPointsList.clear();
        // 清空保存的路径
        mRoute = new StringBuilder();
        // 不再画错误状态
        isDrawError = false;
    }

    那我们怎么绘制视图呢？我们通过重写其 onDraw() 方法：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 判断是否画错误状态，画错误状态不需要画手势点已经于最新选择点的连线
        if (isDrawError) {
            drawPoints(canvas);
            drawLines(canvas);
        } else {
            drawPoints(canvas);
            drawLines(canvas);
            drawFinger(canvas);
        }
    }

    那么这个手势密码绘制过程就结束了，但是整个控件还没有结束，我们还需要给它一个监听器，监听其绘制完成，选择后续事件：

private OnDrawFinishListener mListener;

    // 定义绘制完成的接口
    public interface OnDrawFinishListener {
        public boolean drawFinish(String route);
    }

    // 定义绘制完成的方法，传入接口
    public void setOnDrawFinishListener(OnDrawFinishListener listener) {
        this.mListener = listener;
    }

    然后我们就需要在手势离开的时候 ，来进行绘制完成时的事件：

case MotionEvent.ACTION_UP:
                // 完成时回调绘制完成的方法，返回比对结果，判断手势密码是否正确
                mListener.drawFinish(mRoute.toString());
                // 返回错误，则将所有已选择点状态改为错误
                if (!mListener.drawFinish(mRoute.toString())) {
                    for (Point point :
                            mClickPointsList) {
                        point.state = Point.POINT_STATUS_ERROR;
                    }
                    // 将是否绘制错误设为 true
                    isDrawError = true;
                    // 刷新视图
                    invalidate();
                    // 这里我们使用 handler 异步操作，使其错误状态保持 0.5s
                    new Thread(new Runnable() {
                        @Override
                        public void run() {
                            if (!mListener.drawFinish(mRoute.toString())) {
                                Message message = new Message();
                                message.arg1 = 0;
                                handler.sendMessage(message);
                            }
                        }
                    }).run();
                } else {
                    resetData();
                }
                invalidate();

                break;

private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            switch (msg.arg1) {
                case 0:
                    try {
                        // 沉睡 0.5s
                        Thread.sleep(500);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    // 重置数据,并刷新视图
                    resetData();
                    invalidate();
                    break;
                default:
                    break;
            }

        }
    };

    好了，handleLock，整个过程就结束了，笔者这里定义了一个监听器只是给大家提供一种思路，笔者将保存的大路径传给了使用者，是为了保证使用者可以自己保存密码，并作相关操作，大家也可以使用 HandleLock 来  保存密码，不传给使用者，根据自己的需求写出更多更丰富的监听器，而且这里笔者在 MotionEvent.ACTION_UP 中直接回调了 drawFinish() 方法，就意味着要使用该 HandleLock 就必须给它设置监听器。

    接下来我们说说 HandleLock 的使用，首先是在布局文件中使用：

<com.example.a01378359.testapp.lock.HandleLock
        android:id="@+id/handlelock_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    接下来是代码中使用：

handleLock = findViewById(R.id.handlelock_test);
        handleLock.setOnDrawFinishListener(new HandleLock.OnDrawFinishListener() {
            @Override
            public boolean drawFinish(String route) {
                // 第一次滑动，则保存密码
                if (count == 0){
                    password = route;
                    count++;
                    Toast.makeText(LockTestActivity.this,"已保存密码",Toast.LENGTH_SHORT).show();
                    return true;
                }else {
                    // 与保存密码比较，返回结果，并且做出相应事件
                    if (password.equals(route)){
                        Toast.makeText(LockTestActivity.this,"密码正确",Toast.LENGTH_SHORT).show();
                        return true;
                    }else {
                        Toast.makeText(LockTestActivity.this,"密码错误",Toast.LENGTH_SHORT).show();
                        return false;
                    }
                }
            }
        });

    项目地址： 源代码