Android手势解锁控件实现(仿京东金融手势解锁)

个人原创文章,请尊重原创,转载请注明出处:吴磊的:http://www.jianshu.com/p/a4c29ec5712f

前言

  • 最近自己写的小项目中需要用到手势解锁,但是使用了多个开源的轮子效果都不理想,
    想要京东金融的那种样式,于是,谁让我是程序员呢?没有什么就创造什么。
  • 手势解锁其实是一个比较轻量级的东西,并不需要很多附加的、酷炫的功能,所以自定义一个
    适合自己项目的是最好不过了。
  • 本文出自安卓新手,旨在引导初入安卓坑的同学们做出一个简单的自定义View,大佬可以直接跳过,
    另,有不足之处望读者指出。

思路

其实实现这个自定义的控件有很多思路,首先想到的是,要在View中创建9个圆,那么继承GridLayout再合适不过了,但是经过尝试,放弃了,逻辑变的更加复杂了,所以我选择直接继承View,那么下面就是需要处理的逻辑:
1 . 根据控件的大小,绘制9个圆圈;
2 . 在手指按到圆圈时,开始绘制路线,并且将按下的圆圈置为选中状态;
3 . 在手指滑动时,绘制一根跟随手指移动的、起点为按下的圆圈的线;
4 .当手指滑动到另外一个圆圈时,将第一个按下的圆圈与当前圆圈用线连起来,并且绘制一根以当前圆圈为起点的跟随手指移动的线;
5 .手指按下到圆圈时,以及每次划过圆圈时,将此圆圈对应的数字添加到数组;
6 .当手指抬起时,根据添加的数字判断密码是否正确,若错误,则将所有的线、选中的圆,都置为错误的状态、颜色;

实现

  • 首先看一下效果图:


    GestureUnlock.gif
  • Demo中实现的功能是:第一次为设置手势密码,第二次验证手势密码是否与第一次相同,运用的场景为设置手势密码和解锁;
  • 废话不说,下面上代码,由于没有添加xml中自定义属性的功能,所以所有代码就一个UnlockView类,各类自定义的属性通过set方法来设置,另外需要一个Circle的内部类,作为圆圈的对象,包含圆圈的XY坐标以及状态(选中、未选中、出错);
  • 首先是OnMeasure方法,由于OnMeasure会在最开始被调用,所以在这里获取控件的宽高再合适不过:
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getMeasuredWidth();
        height = getMeasuredHeight();
    }
  • 然后是OnLayout方法,在此方法中,绘制9个圆圈,以及初始化一些画笔、颜色等参数,注意,此方法可能会多次调用,所以要考虑到多次调用的情况,如初始化9个圆圈。:
@Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        //init all path/paint
        mPath = new Path();
        tempPath = new Path();
        pathPaint = new Paint();
        pathPaint.setColor(selectColor);
        pathPaint.setDither(true);
        pathPaint.setAntiAlias(true);
        pathPaint.setStyle(Paint.Style.STROKE);
        pathPaint.setStrokeCap(Paint.Cap.ROUND);
        pathPaint.setStrokeJoin(Paint.Join.ROUND);
        pathPaint.setStrokeWidth(pathWidth);
        //普通状态小圆画笔
        circletBmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(circletBmp);
        cirNorPaint = new Paint();
        cirNorPaint.setAntiAlias(true);
        cirNorPaint.setDither(true);
        cirNorPaint.setColor(normalColor);
        //选中状态大圆画笔
        cirSelPaint = new Paint();
        cirSelPaint.setAntiAlias(true);
        cirSelPaint.setDither(true);
        cirSelPaint.setStyle(Paint.Style.STROKE);
        cirSelPaint.setStrokeWidth(strokeWidth);
        cirSelPaint.setColor(selectColor);
        //选中状态小圆画笔
        smallCirSelPaint = new Paint();
        smallCirSelPaint.setAntiAlias(true);
        smallCirSelPaint.setDither(true);
        smallCirSelPaint.setColor(selectColor);
        //出错状态大圆画笔
        cirErrPaint = new Paint();
        cirErrPaint.setAntiAlias(true);
        cirErrPaint.setDither(true);
        cirErrPaint.setStyle(Paint.Style.STROKE);
        cirErrPaint.setStrokeWidth(strokeWidth);
        cirErrPaint.setColor(errorColor);
        //出错状态小圆画笔
        smallcirErrPaint = new Paint();
        smallcirErrPaint.setAntiAlias(true);
        smallcirErrPaint.setDither(true);
        smallcirErrPaint.setColor(errorColor);

        //init all circles
        int hor = width / 6;
        int ver = height / 6;
        if(!hasNewCircles){
            for (int i = 0; i < 9; i++) {
                int tempX = (i % 3 + 1) * 2 * hor - hor;
                int tempY = (i / 3 + 1) * 2 * ver - ver;
                Circle circle = new Circle(i, tempX, tempY, CIRCLE_NORMAL);
                circleList.add(circle);
            }
        }
        hasNewCircles=true;
    }
  • 再然后是重中之中,OnTouchEvent方法,在此方法中,需要监听手指的操作,当手指按到屏幕中的某个圆圈时,开始整个流程,所以我们需要通过以下代码判断手指的落点是都在某个圆内:
    @Nullable
    private Circle getOuterCircle(int x, int y) {
        for (int i = 0; i < circleList.size(); i++) {
            Circle circle = circleList.get(i);
            if ((x - circle.getX()) * (x - circle.getX()) + (y - circle.getY()) * (y - circle.getY()) <= normalR * normalR) {
                if (circle.getState() != CIRCLE_SELECTED) {
                    return circle;
                }
            }
        }
        return null;
    }

在ACTION_DOWN中,若落点在圆内,则将此圆的状态置为选中状态,并且将可移动的连线的起点置为此圆的坐标;在ACTION_MOVE中,若手指滑动,但未滑动到任何其他圆内,则只绘制一根移动的线,若手指在移动时移动到其他任何圆内,则将这个圆与一开始的圆用线连接,并且将可移动的线的起点置为此圆的坐标,并将此圆对应的序号添加到List中,最后将所有选中的圆的状态置为选中并且重新绘制画布;在ACTION_UP中,需要判断所有经过的圆的序号跟预设密码是否一致,并且重置所有状态。每次操作后,都需要通过invalidate()通知重新onDraw下面上代码:

@Override
    public boolean onTouchEvent(MotionEvent event) {
        if (isShowError)
            return true;
        int curX = (int) event.getX();
        int curY = (int) event.getY();
        Circle circle = getOuterCircle(curX, curY);
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                this.resetAll();
                if (circle != null) {
                    rootX = circle.getX();
                    rootY = circle.getY();
                    circle.setState(CIRCLE_SELECTED);
                    pathCircleList.add(circle);
                    tempPath.moveTo(rootX, rootY);
                    addItem(circle.getPosition() + 1);
                    isUnlocking = true;
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if (isUnlocking) {
                    mPath.reset();
                    mPath.addPath(tempPath);
                    mPath.moveTo(rootX, rootY);
                    mPath.lineTo(curX, curY);
                    handleMove(circle);
                }
                break;
            case MotionEvent.ACTION_UP:
                isUnlocking = false;
                if (pathCircleList.size() > 0) {
                    mPath.reset();
                    mPath.addPath(tempPath);
                    StringBuilder sb = new StringBuilder();
                    for (Integer num : passList) {
                        sb.append(num);
                    }

                    if (this.mode == CREATE_MODE) {
                        if(createListener!=null){
                            createListener.onGestureCreated(sb.toString());
                        }else{
                            Log.e("UnLockView","Please set CreateGestureListener first!");
                        }
                    } else if(this.mode == CHECK_MODE){
                        if(listener!=null){
                            if (listener.isUnlockSuccess(sb.toString())) {
                                listener.onSuccess();
                            } else {
                                listener.onFailure();
                                for (Circle circle1 : pathCircleList) {
                                    circle1.setState(CIRCLE_ERROR);
                                }
                                pathPaint.setColor(errorColor);
                            }
                        }else{
                            Log.e("UnLockView","Please set OnUnlockListener first!");
                        }

                    }else{
                        try {
                            throw new Exception("Please set mode first!");
                        } catch (Exception e) {
                            e.printStackTrace();
                        }
                    }
                    isShowError = true;
                    handler.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            handler.sendEmptyMessage(0);
                        }
                    }, 1000);

                }
                break;
        }
        invalidate();
        return true;
    }
  • 最后是所有操作的提现:onDraw(),在此方法中,需要根据当前9个圆的状态绘制不同状态的圆,并且要根据记录的Path来绘制连线,代码如下:
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(circletBmp, 0, 0, null);
        for (int i = 0; i < circleList.size(); i++) {
            drawCircles(circleList.get(i));
        }
        canvas.drawPath(mPath, pathPaint);
    }

    /**
     * called in onDraw for drawing all circles
     *
     * @param circle
     */
    private void drawCircles(Circle circle) {
        switch (circle.getState()) {
            case CIRCLE_NORMAL:
                mCanvas.drawCircle(circle.getX(), circle.getY(), normalR, cirNorPaint);
                break;
            case CIRCLE_SELECTED:
                mCanvas.drawCircle(circle.getX(), circle.getY(), selectR, cirSelPaint);
                mCanvas.drawCircle(circle.getX(), circle.getY(), normalR, smallCirSelPaint);
                break;
            case CIRCLE_ERROR:
                mCanvas.drawCircle(circle.getX(), circle.getY(), selectR, cirErrPaint);
                mCanvas.drawCircle(circle.getX(), circle.getY(), normalR, smallcirErrPaint);
                break;
        }
    }
  • 至此,所有的绘制、记录的逻辑基本完成,最后就是添加监听。由于此控件需要同时用于创建手势、验证手势,所以需要根据模式,添加不同的监听,首先添加的是创建手势的监听,在ACTION_UP的时候,会将记录的密码回调给接口:
    interface CreateGestureListener {
        void onGestureCreated(String result);
    }

    public void setGestureListener(CreateGestureListener listener) {
        this.createListener = listener;
    }

然后是添加验证手势的接口:

    interface OnUnlockListener {
        boolean isUnlockSuccess(String result);

        void onSuccess();

        void onFailure();
    }

    public void setOnUnlockListener(OnUnlockListener listener) {
        this.listener = listener;
    }

好啦,到这里自定义手势控制的View的逻辑基本完成,下面是将此控件用到布局后,在Activity中操作的一个示例:

@Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       mUnlockView= (UnlockView) findViewById(R.id.unlock);
       mUnlockView.setMode(UnlockView.CREATE_MODE);
       mUnlockView.setGestureListener(new UnlockView.CreateGestureListener() {
           @Override
           public void onGestureCreated(String result) {
               pwd=result;
               Toast.makeText(MainActivity.this,"Set Gesture Succeeded!",Toast.LENGTH_SHORT).show();
               mUnlockView.setMode(UnlockView.CHECK_MODE);
           }
       });
       mUnlockView.setOnUnlockListener(new UnlockView.OnUnlockListener() {
           @Override
           public boolean isUnlockSuccess(String result) {
               if(result.equals(pwd)){
                   return true;
               }else{
                   return false;
               }
           }

           @Override
           public void onSuccess() {
               Toast.makeText(MainActivity.this,"Check Succeeded!",Toast.LENGTH_SHORT).show();
           }

           @Override
           public void onFailure() {
               Toast.makeText(MainActivity.this,"Check Failed!",Toast.LENGTH_SHORT).show();
           }
       });

   }

到这里就完成了整个自定义View的编写、使用。完整代码及Demo可以在我的Github中查看。如发现有改进之处,望指正,万分感谢!

个人原创文章,请尊重原创,转载请注明出处:吴磊的:http://www.jianshu.com/p/a4c29ec5712f

欢迎联系我、提供工作机会:
Github:https://github.com/MondeoWu/GestureUnlock
E-mail:[email protected]
QQ:331948214

你可能感兴趣的:(Android手势解锁控件实现(仿京东金融手势解锁))