Android 自定义View 当然是十分重要的，笔者这两天写了一个自定义 View 的手势密码，和大家分享分享：
首先，我们来创建一个表示点的类，Point.java：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
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，并重写其三种构造方法（不重写带两个参数的构造方法会导致程序出错）：
首先，我们先把后面需要用的变量写出来，方便大家明白这些变量是干嘛的：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
// 三种画笔 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 的宽高，都可以使里面的九个点看起来位置很舒服。
接下来我们就需要写一些函数，将点、线绘制到控件上，我自己把绘制分成了三部分，一部分是点，一部分是点与点之间的线，一部分是手势的小点和手势到最新点的线。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
// 画点，按照我们选择的半径画九个圆 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); } } |
上面的代码我们看到需要使用到手势划过的点，我们是怎么选择的呢？
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// 获取手指移动中选取的点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 来通过手势动作来提交选择的点，并更新视图：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
// 重写点击事件 @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() 方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 判断是否画错误状态，画错误状态不需要画手势点已经于最新选择点的连线 if (isDrawError) { drawPoints(canvas); drawLines(canvas); } else { drawPoints(canvas); drawLines(canvas); drawFinger(canvas); } } |
那么这个手势密码绘制过程就结束了，但是整个控件还没有结束，我们还需要给它一个监听器，监听其绘制完成，选择后续事件：
|
1
2
3
4
5
6
7
8
9
10
11
|
private OnDrawFinishListener mListener; // 定义绘制完成的接口 public interface OnDrawFinishListener { public boolean drawFinish(String route); } // 定义绘制完成的方法，传入接口 public void setOnDrawFinishListener(OnDrawFinishListener listener) { this.mListener = listener; } |
然后我们就需要在手势离开的时候 ，来进行绘制完成时的事件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
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 的使用，首先是在布局文件中使用：
|
1
2
3
4
|
<com.example.a01378359.testapp.lock.HandleLock android:id="@+id/handlelock_test" android:layout_width="match_parent" android:layout_height="match_parent" /> |
接下来是代码中使用：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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; } } } }); |
项目地址：源代码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/Young_Time/article/details/80856817
