前言
最近遇到手势密码的开发需求，花半天时间撸了一下，发现没有想象中难，在这里记录一下。
先上效果图
gesture_320.gif
思路
- 自定义GestureView继续自View；
- 先计算九宫格的九个点坐标，并保存起来，重写onDraw方法，开始绘制；
- 首先绘制初始状态：即把九个原始状态的圆点画出来；
- 重写onTouchEvent方法，当手势进入到九宫格中任何一个点的范围时，激活该点，画出相应的选择状态；
- 把每一个激活的点按顺序保存到List中，相当于把绘制图案转换为数组，当绘制完成后把该结果回调给上层。
GestureView的全部代码
代码贴此处，具体说明可以看注释。
public class GestureView extends View {
private static final String TAG = "GestureView";
/**
* 格子数
*/
private static final int POINT_COUNT = 9;
/**
* 中心点的半径
*/
private static final int POINT_RADIUS = 25;
/**
* 外圈半径
*/
private static final int CIRCLE_RADIUS = 75;
/**
* 最少连接的点数，否则提示错误
*/
private static final int MIN_POINT_COUNT = 4;
/**
* 中心点颜色
*/
private int pointColor = R.color.point_color;
/**
* 中心点选择态颜色
*/
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);
}
/**
* 保存每个点对应的坐标到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);
}
}
/**
* 设置点，圈，和连接线的颜色
*/
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;
}
}
/**
* 恢复初始未选择的状态
*/
public void reset() {
setColor(0, R.color.point_select_color, R.color.circle_color);
selectList.clear();
invalidate();
}
/**
* 显示错误，比如连结的点过少
*/
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;
}
/**
* 获取已经选择的点数量
*/
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);
//画中心选择态的点
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;
}
}
使用
具体使用时，可以把整个类复制到项目里，根据需求调整一下细节即可。
比如需求是设置新手势，需要用户绘制两次并进行对比，上层代码大概如下：
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("设置成功");
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("手势密码最少连续四个点");
}
});
/**
* 判断两次绘制是否一致
*/
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;
}
