前言

最近自己写的小项目中需要用到手势解锁，但是使用了多个开源的轮子效果都不理想，

想要京东金融的那种样式，于是，谁让我是程序员呢？没有什么就创造什么。

手势解锁其实是一个比较轻量级的东西，并不需要很多附加的、酷炫的功能，所以自定义一个

适合自己项目的是最好不过了。

本文出自安卓新手，旨在引导初入安卓坑的同学们做出一个简单的自定义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中查看。如发现有改进之处，望指正，万分感谢！