个人原创文章，请尊重原创，转载请注明出处：吴磊的简书: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:331948214@qq.com
QQ:331948214
网友评论