Android 手势锁的实现 与详细的代码注释

先上图，默认效果图：

当然可以自定义数量啊，颜色神马的，自定义效果图：

如果你有艺术细胞，可以给我推荐几个颜色，无奈个人审美有问题~

1、整体思路

a、自定义了一个RelativeLayout(GestureLockViewGroup)在里面会根据传入的每行的个数，生成多个GestureLockView（就是上面一个个小圈圈），然后会自动进行布局，里面的宽度，间距，内圆的直径，箭头的大小神马的都是百分比实现的，所以大胆的设置你喜欢的个数，只要你没有密集恐惧症~

b、GestureLockView有三个状态，没有手指触碰、手指触碰、和手指抬起，会根据这三个状态绘制不同的效果，以及抬起时的小箭头需要旋转的角度，会根据用户选择的GestureLockView，进行计算，在GestureLockViewGroup为每个GestureLockView设置

c、GestureLockViewGroup主要就是判断用户ACTION_MOVE，ACTION_DOWN ， ACTION_UP时改变选中的GestureLockView的状态，并且记录下来，提供一定的回调。

下面开始看代码：

2、声明一些用户可以设置的属性：

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.   
4.     <attr name="color_no_finger_inner_circle" format="color" />  
5.     <attr name="color_no_finger_outer_circle" format="color" />  
6.     <attr name="color_finger_on" format="color" />  
7.     <attr name="color_finger_up" format="color" />  
8.     <attr name="count" format="integer" />  
9.     <attr name="tryTimes" format="integer" />  
10.   
11.     <declare-styleable name="GestureLockViewGroup">  
12.         <attr name="color_no_finger_inner_circle" />  
13.         <attr name="color_no_finger_outer_circle" />  
14.         <attr name="color_finger_on" />  
15.         <attr name="color_finger_up" />  
16.         <attr name="count" />  
17.         <attr name="tryTimes" />  
18.     </declare-styleable>  
19.   
20. </resources>  

用户可以用过在xml文件中设置这些属性，改变外观，最多尝试次数以及数量等。

3、GestureLockView

[java]  view plain  copy

 

1. package com.zhy.zhy_gesturelockview.view;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.graphics.Paint;  
6. import android.graphics.Paint.Style;  
7. import android.graphics.Path;  
8. import android.view.View;  
9.   
10. public class GestureLockView extends View  
11. {  
12.     private static final String TAG = "GestureLockView";  
13.     /** 
14.      * GestureLockView的三种状态 
15.      */  
16.     enum Mode  
17.     {  
18.         STATUS_NO_FINGER, STATUS_FINGER_ON, STATUS_FINGER_UP;  
19.     }  
20.   
21.     /** 
22.      * GestureLockView的当前状态 
23.      */  
24.     private Mode mCurrentStatus = Mode.STATUS_NO_FINGER;  
25.       
26.     /** 
27.      * 宽度 
28.      */  
29.     private int mWidth;  
30.     /** 
31.      * 高度 
32.      */  
33.     private int mHeight;  
34.     /** 
35.      * 外圆半径 
36.      */  
37.     private int mRadius;  
38.     /** 
39.      * 画笔的宽度 
40.      */  
41.     private int mStrokeWidth = 2;  
42.   
43.     /** 
44.      * 圆心坐标 
45.      */  
46.     private int mCenterX;  
47.     private int mCenterY;  
48.     private Paint mPaint;  
49.   
50.     /** 
51.      * 箭头（小三角最长边的一半长度 = mArrawRate * mWidth / 2 ） 
52.      */  
53.     private float mArrowRate = 0.333f;  
54.     private int mArrowDegree = -1;  
55.     private Path mArrowPath;  
56.     /** 
57.      * 内圆的半径 = mInnerCircleRadiusRate * mRadus 
58.      *  
59.      */  
60.     private float mInnerCircleRadiusRate = 0.3F;  
61.   
62.     /** 
63.      * 四个颜色，可由用户自定义，初始化时由GestureLockViewGroup传入 
64.      */  
65.     private int mColorNoFingerInner;  
66.     private int mColorNoFingerOutter;  
67.     private int mColorFingerOn;  
68.     private int mColorFingerUp;  
69.   
70.     public GestureLockView(Context context , int colorNoFingerInner , int colorNoFingerOutter , int colorFingerOn , int colorFingerUp )  
71.     {  
72.         super(context);  
73.         this.mColorNoFingerInner = colorNoFingerInner;  
74.         this.mColorNoFingerOutter = colorNoFingerOutter;  
75.         this.mColorFingerOn = colorFingerOn;  
76.         this.mColorFingerUp = colorFingerUp;  
77.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
78.         mArrowPath = new Path();  
79.   
80.     }  
81.   
82.     @Override  
83.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
84.     {  
85.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
86.   
87.         mWidth = MeasureSpec.getSize(widthMeasureSpec);  
88.         mHeight = MeasureSpec.getSize(heightMeasureSpec);  
89.   
90.         // 取长和宽中的小值  
91.         mWidth = mWidth < mHeight ? mWidth : mHeight;  
92.         mRadius = mCenterX = mCenterY = mWidth / 2;  
93.         mRadius -= mStrokeWidth / 2;  
94.   
95.         // 绘制三角形，初始时是个默认箭头朝上的一个等腰三角形，用户绘制结束后，根据由两个GestureLockView决定需要旋转多少度  
96.         float mArrowLength = mWidth / 2 * mArrowRate;  
97.         mArrowPath.moveTo(mWidth / 2, mStrokeWidth + 2);  
98.         mArrowPath.lineTo(mWidth / 2 - mArrowLength, mStrokeWidth + 2  
99.                 + mArrowLength);  
100.         mArrowPath.lineTo(mWidth / 2 + mArrowLength, mStrokeWidth + 2  
101.                 + mArrowLength);  
102.         mArrowPath.close();  
103.         mArrowPath.setFillType(Path.FillType.WINDING);  
104.   
105.     }  
106.   
107.     @Override  
108.     protected void onDraw(Canvas canvas)  
109.     {  
110.   
111.         switch (mCurrentStatus)  
112.         {  
113.         case STATUS_FINGER_ON:  
114.   
115.             // 绘制外圆  
116.             mPaint.setStyle(Style.STROKE);  
117.             mPaint.setColor(mColorFingerOn);  
118.             mPaint.setStrokeWidth(2);  
119.             canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);  
120.             // 绘制内圆  
121.             mPaint.setStyle(Style.FILL);  
122.             canvas.drawCircle(mCenterX, mCenterY, mRadius  
123.                     * mInnerCircleRadiusRate, mPaint);  
124.             break;  
125.         case STATUS_FINGER_UP:  
126.             // 绘制外圆  
127.             mPaint.setColor(mColorFingerUp);  
128.             mPaint.setStyle(Style.STROKE);  
129.             mPaint.setStrokeWidth(2);  
130.             canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);  
131.             // 绘制内圆  
132.             mPaint.setStyle(Style.FILL);  
133.             canvas.drawCircle(mCenterX, mCenterY, mRadius  
134.                     * mInnerCircleRadiusRate, mPaint);  
135.   
136.             drawArrow(canvas);  
137.   
138.             break;  
139.   
140.         case STATUS_NO_FINGER:  
141.   
142.             // 绘制外圆  
143.             mPaint.setStyle(Style.FILL);  
144.             mPaint.setColor(mColorNoFingerOutter);  
145.             canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);  
146.             // 绘制内圆  
147.             mPaint.setColor(mColorNoFingerInner);  
148.             canvas.drawCircle(mCenterX, mCenterY, mRadius  
149.                     * mInnerCircleRadiusRate, mPaint);  
150.             break;  
151.   
152.         }  
153.   
154.     }  
155.   
156.     /** 
157.      * 绘制箭头 
158.      * @param canvas 
159.      */  
160.     private void drawArrow(Canvas canvas)  
161.     {  
162.         if (mArrowDegree != -1)  
163.         {  
164.             mPaint.setStyle(Paint.Style.FILL);  
165.   
166.             canvas.save();  
167.             canvas.rotate(mArrowDegree, mCenterX, mCenterY);  
168.             canvas.drawPath(mArrowPath, mPaint);  
169.   
170.             canvas.restore();  
171.         }  
172.   
173.     }  
174.   
175.     /** 
176.      * 设置当前模式并重绘界面 
177.      *  
178.      * @param mode 
179.      */  
180.     public void setMode(Mode mode)  
181.     {  
182.         this.mCurrentStatus = mode;  
183.         invalidate();  
184.     }  
185.   
186.     public void setArrowDegree(int degree)  
187.     {  
188.         this.mArrowDegree = degree;  
189.     }  
190.   
191.     public int getArrowDegree()  
192.     {  
193.         return this.mArrowDegree;  
194.     }  
195. }  

注释很详细，主要就是onDraw时，判断当前状态，绘制不同的显示效果；状态的改变都是GestureLockViewGroup的onTouchEvent中设置的。

4、GestureLockViewGroup

[java]  view plain  copy

 

1. package com.zhy.zhy_gesturelockview.view;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.content.Context;  
7. import android.content.res.TypedArray;  
8. import android.graphics.Canvas;  
9. import android.graphics.Color;  
10. import android.graphics.Paint;  
11. import android.graphics.Path;  
12. import android.graphics.Point;  
13. import android.util.AttributeSet;  
14. import android.util.Log;  
15. import android.view.MotionEvent;  
16. import android.view.View;  
17. import android.widget.RelativeLayout;  
18.   
19. import com.zhy.zhy_gesturelockview.R;  
20. import com.zhy.zhy_gesturelockview.view.GestureLockView.Mode;  
21.   
22. /** 
23.  * 整体包含n*n个GestureLockView,每个GestureLockView间间隔mMarginBetweenLockView， 
24.  * 最外层的GestureLockView与容器存在mMarginBetweenLockView的外边距 
25.  *  
26.  * 关于GestureLockView的边长（n*n）： n * mGestureLockViewWidth + ( n + 1 ) * 
27.  * mMarginBetweenLockView = mWidth ; 得：mGestureLockViewWidth = 4 * mWidth / ( 5 
28.  * * mCount + 1 ) 注：mMarginBetweenLockView = mGestureLockViewWidth * 0.25 ; 
29.  *  
30.  * @author zhy 
31.  *  
32.  */  
33. public class GestureLockViewGroup extends RelativeLayout  
34. {  
35.   
36.     private static final String TAG = "GestureLockViewGroup";  
37.     /** 
38.      * 保存所有的GestureLockView 
39.      */  
40.     private GestureLockView[] mGestureLockViews;  
41.     /** 
42.      * 每个边上的GestureLockView的个数 
43.      */  
44.     private int mCount = 4;  
45.     /** 
46.      * 存储答案 
47.      */  
48.     private int[] mAnswer = { 0, 1, 2, 5, 8 };  
49.     /** 
50.      * 保存用户选中的GestureLockView的id 
51.      */  
52.     private List<Integer> mChoose = new ArrayList<Integer>();  
53.   
54.     private Paint mPaint;  
55.     /** 
56.      * 每个GestureLockView中间的间距 设置为：mGestureLockViewWidth * 25% 
57.      */  
58.     private int mMarginBetweenLockView = 30;  
59.     /** 
60.      * GestureLockView的边长 4 * mWidth / ( 5 * mCount + 1 ) 
61.      */  
62.     private int mGestureLockViewWidth;  
63.   
64.     /** 
65.      * GestureLockView无手指触摸的状态下内圆的颜色 
66.      */  
67.     private int mNoFingerInnerCircleColor = 0xFF939090;  
68.     /** 
69.      * GestureLockView无手指触摸的状态下外圆的颜色 
70.      */  
71.     private int mNoFingerOuterCircleColor = 0xFFE0DBDB;  
72.     /** 
73.      * GestureLockView手指触摸的状态下内圆和外圆的颜色 
74.      */  
75.     private int mFingerOnColor = 0xFF378FC9;  
76.     /** 
77.      * GestureLockView手指抬起的状态下内圆和外圆的颜色 
78.      */  
79.     private int mFingerUpColor = 0xFFFF0000;  
80.   
81.     /** 
82.      * 宽度 
83.      */  
84.     private int mWidth;  
85.     /** 
86.      * 高度 
87.      */  
88.     private int mHeight;  
89.   
90.     private Path mPath;  
91.     /** 
92.      * 指引线的开始位置x 
93.      */  
94.     private int mLastPathX;  
95.     /** 
96.      * 指引线的开始位置y 
97.      */  
98.     private int mLastPathY;  
99.     /** 
100.      * 指引下的结束位置 
101.      */  
102.     private Point mTmpTarget = new Point();  
103.   
104.     /** 
105.      * 最大尝试次数 
106.      */  
107.     private int mTryTimes = 4;  
108.     /** 
109.      * 回调接口 
110.      */  
111.     private OnGestureLockViewListener mOnGestureLockViewListener;  
112.   
113.     public GestureLockViewGroup(Context context, AttributeSet attrs)  
114.     {  
115.         this(context, attrs, 0);  
116.     }  
117.   
118.     public GestureLockViewGroup(Context context, AttributeSet attrs,  
119.             int defStyle)  
120.     {  
121.         super(context, attrs, defStyle);  
122.         /** 
123.          * 获得所有自定义的参数的值 
124.          */  
125.         TypedArray a = context.getTheme().obtainStyledAttributes(attrs,  
126.                 R.styleable.GestureLockViewGroup, defStyle, 0);  
127.         int n = a.getIndexCount();  
128.   
129.         for (int i = 0; i < n; i++)  
130.         {  
131.             int attr = a.getIndex(i);  
132.             switch (attr)  
133.             {  
134.             case R.styleable.GestureLockViewGroup_color_no_finger_inner_circle:  
135.                 mNoFingerInnerCircleColor = a.getColor(attr,  
136.                         mNoFingerInnerCircleColor);  
137.                 break;  
138.             case R.styleable.GestureLockViewGroup_color_no_finger_outer_circle:  
139.                 mNoFingerOuterCircleColor = a.getColor(attr,  
140.                         mNoFingerOuterCircleColor);  
141.                 break;  
142.             case R.styleable.GestureLockViewGroup_color_finger_on:  
143.                 mFingerOnColor = a.getColor(attr, mFingerOnColor);  
144.                 break;  
145.             case R.styleable.GestureLockViewGroup_color_finger_up:  
146.                 mFingerUpColor = a.getColor(attr, mFingerUpColor);  
147.                 break;  
148.             case R.styleable.GestureLockViewGroup_count:  
149.                 mCount = a.getInt(attr, 3);  
150.                 break;  
151.             case R.styleable.GestureLockViewGroup_tryTimes:  
152.                 mTryTimes = a.getInt(attr, 5);  
153.             default:  
154.                 break;  
155.             }  
156.         }  
157.   
158.         a.recycle();  
159.   
160.         // 初始化画笔  
161.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
162.         mPaint.setStyle(Paint.Style.STROKE);  
163.         // mPaint.setStrokeWidth(20);  
164.         mPaint.setStrokeCap(Paint.Cap.ROUND);  
165.         mPaint.setStrokeJoin(Paint.Join.ROUND);  
166.         // mPaint.setColor(Color.parseColor("#aaffffff"));  
167.         mPath = new Path();  
168.     }  
169.   
170.     @Override  
171.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  
172.     {  
173.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
174.   
175.         mWidth = MeasureSpec.getSize(widthMeasureSpec);  
176.         mHeight = MeasureSpec.getSize(heightMeasureSpec);  
177.   
178.         // Log.e(TAG, mWidth + "");  
179.         // Log.e(TAG, mHeight + "");  
180.   
181.         mHeight = mWidth = mWidth < mHeight ? mWidth : mHeight;  
182.   
183.         // setMeasuredDimension(mWidth, mHeight);  
184.   
185.         // 初始化mGestureLockViews  
186.         if (mGestureLockViews == null)  
187.         {  
188.             mGestureLockViews = new GestureLockView[mCount * mCount];  
189.             // 计算每个GestureLockView的宽度  
190.             mGestureLockViewWidth = (int) (4 * mWidth * 1.0f / (5 * mCount + 1));  
191.             //计算每个GestureLockView的间距  
192.             mMarginBetweenLockView = (int) (mGestureLockViewWidth * 0.25);  
193.             // 设置画笔的宽度为GestureLockView的内圆直径稍微小点（不喜欢的话，随便设）  
194.             mPaint.setStrokeWidth(mGestureLockViewWidth * 0.29f);  
195.   
196.             for (int i = 0; i < mGestureLockViews.length; i++)  
197.             {  
198.                 //初始化每个GestureLockView  
199.                 mGestureLockViews[i] = new GestureLockView(getContext(),  
200.                         mNoFingerInnerCircleColor, mNoFingerOuterCircleColor,  
201.                         mFingerOnColor, mFingerUpColor);  
202.                 mGestureLockViews[i].setId(i + 1);  
203.                 //设置参数，主要是定位GestureLockView间的位置  
204.                 RelativeLayout.LayoutParams lockerParams = new RelativeLayout.LayoutParams(  
205.                         mGestureLockViewWidth, mGestureLockViewWidth);  
206.   
207.                 // 不是每行的第一个，则设置位置为前一个的右边  
208.                 if (i % mCount != 0)  
209.                 {  
210.                     lockerParams.addRule(RelativeLayout.RIGHT_OF,  
211.                             mGestureLockViews[i - 1].getId());  
212.                 }  
213.                 // 从第二行开始，设置为上一行同一位置View的下面  
214.                 if (i > mCount - 1)  
215.                 {  
216.                     lockerParams.addRule(RelativeLayout.BELOW,  
217.                             mGestureLockViews[i - mCount].getId());  
218.                 }  
219.                 //设置右下左上的边距  
220.                 int rightMargin = mMarginBetweenLockView;  
221.                 int bottomMargin = mMarginBetweenLockView;  
222.                 int leftMagin = 0;  
223.                 int topMargin = 0;  
224.                 /** 
225.                  * 每个View都有右外边距和底外边距 第一行的有上外边距 第一列的有左外边距 
226.                  */  
227.                 if (i >= 0 && i < mCount)// 第一行  
228.                 {  
229.                     topMargin = mMarginBetweenLockView;  
230.                 }  
231.                 if (i % mCount == 0)// 第一列  
232.                 {  
233.                     leftMagin = mMarginBetweenLockView;  
234.                 }  
235.   
236.                 lockerParams.setMargins(leftMagin, topMargin, rightMargin,  
237.                         bottomMargin);  
238.                 mGestureLockViews[i].setMode(Mode.STATUS_NO_FINGER);  
239.                 addView(mGestureLockViews[i], lockerParams);  
240.             }  
241.   
242.             Log.e(TAG, "mWidth = " + mWidth + " ,  mGestureViewWidth = "  
243.                     + mGestureLockViewWidth + " , mMarginBetweenLockView = "  
244.                     + mMarginBetweenLockView);  
245.   
246.         }  
247.     }  
248.   
249.     @Override  
250.     public boolean onTouchEvent(MotionEvent event)  
251.     {  
252.         int action = event.getAction();  
253.         int x = (int) event.getX();  
254.         int y = (int) event.getY();  
255.   
256.         switch (action)  
257.         {  
258.         case MotionEvent.ACTION_DOWN:  
259.             // 重置  
260.             reset();  
261.             break;  
262.         case MotionEvent.ACTION_MOVE:  
263.             mPaint.setColor(mFingerOnColor);  
264.             mPaint.setAlpha(50);  
265.             GestureLockView child = getChildIdByPos(x, y);  
266.             if (child != null)  
267.             {  
268.                 int cId = child.getId();  
269.                 if (!mChoose.contains(cId))  
270.                 {  
271.                     mChoose.add(cId);  
272.                     child.setMode(Mode.STATUS_FINGER_ON);  
273.                     if (mOnGestureLockViewListener != null)  
274.                         mOnGestureLockViewListener.onBlockSelected(cId);  
275.                     // 设置指引线的起点  
276.                     mLastPathX = child.getLeft() / 2 + child.getRight() / 2;  
277.                     mLastPathY = child.getTop() / 2 + child.getBottom() / 2;  
278.   
279.                     if (mChoose.size() == 1)// 当前添加为第一个  
280.                     {  
281.                         mPath.moveTo(mLastPathX, mLastPathY);  
282.                     } else  
283.                     // 非第一个，将两者使用线连上  
284.                     {  
285.                         mPath.lineTo(mLastPathX, mLastPathY);  
286.                     }  
287.   
288.                 }  
289.             }  
290.             // 指引线的终点  
291.             mTmpTarget.x = x;  
292.             mTmpTarget.y = y;  
293.             break;  
294.         case MotionEvent.ACTION_UP:  
295.   
296.             mPaint.setColor(mFingerUpColor);  
297.             mPaint.setAlpha(50);  
298.             this.mTryTimes--;  
299.   
300.             // 回调是否成功  
301.             if (mOnGestureLockViewListener != null && mChoose.size() > 0)  
302.             {  
303.                 mOnGestureLockViewListener.onGestureEvent(checkAnswer());  
304.                 if (this.mTryTimes == 0)  
305.                 {  
306.                     mOnGestureLockViewListener.onUnmatchedExceedBoundary();  
307.                 }  
308.             }  
309.   
310.             Log.e(TAG, "mUnMatchExceedBoundary = " + mTryTimes);  
311.             Log.e(TAG, "mChoose = " + mChoose);  
312.             // 将终点设置位置为起点，即取消指引线  
313.             mTmpTarget.x = mLastPathX;  
314.             mTmpTarget.y = mLastPathY;  
315.   
316.             // 改变子元素的状态为UP  
317.             changeItemMode();  
318.               
319.             // 计算每个元素中箭头需要旋转的角度  
320.             for (int i = 0; i + 1 < mChoose.size(); i++)  
321.             {  
322.                 int childId = mChoose.get(i);  
323.                 int nextChildId = mChoose.get(i + 1);  
324.   
325.                 GestureLockView startChild = (GestureLockView) findViewById(childId);  
326.                 GestureLockView nextChild = (GestureLockView) findViewById(nextChildId);  
327.   
328.                 int dx = nextChild.getLeft() - startChild.getLeft();  
329.                 int dy = nextChild.getTop() - startChild.getTop();  
330.                 // 计算角度  
331.                 int angle = (int) Math.toDegrees(Math.atan2(dy, dx)) + 90;  
332.                 startChild.setArrowDegree(angle);  
333.             }  
334.             break;  
335.   
336.         }  
337.         invalidate();  
338.         return true;  
339.     }  
340.   
341.     private void changeItemMode()  
342.     {  
343.         for (GestureLockView gestureLockView : mGestureLockViews)  
344.         {  
345.             if (mChoose.contains(gestureLockView.getId()))  
346.             {  
347.                 gestureLockView.setMode(Mode.STATUS_FINGER_UP);  
348.             }  
349.         }  
350.     }  
351.   
352.     /** 
353.      *  
354.      * 做一些必要的重置 
355.      */  
356.     private void reset()  
357.     {  
358.         mChoose.clear();  
359.         mPath.reset();  
360.         for (GestureLockView gestureLockView : mGestureLockViews)  
361.         {  
362.             gestureLockView.setMode(Mode.STATUS_NO_FINGER);  
363.             gestureLockView.setArrowDegree(-1);  
364.         }  
365.     }  
366.     /** 
367.      * 检查用户绘制的手势是否正确 
368.      * @return 
369.      */  
370.     private boolean checkAnswer()  
371.     {  
372.         if (mAnswer.length != mChoose.size())  
373.             return false;  
374.   
375.         for (int i = 0; i < mAnswer.length; i++)  
376.         {  
377.             if (mAnswer[i] != mChoose.get(i))  
378.                 return false;  
379.         }  
380.   
381.         return true;  
382.     }  
383.       
384.     /** 
385.      * 检查当前左边是否在child中 
386.      * @param child 
387.      * @param x 
388.      * @param y 
389.      * @return 
390.      */  
391.     private boolean checkPositionInChild(View child, int x, int y)  
392.     {  
393.   
394.         //设置了内边距，即x,y必须落入下GestureLockView的内部中间的小区域中，可以通过调整padding使得x,y落入范围不变大，或者不设置padding  
395.         int padding = (int) (mGestureLockViewWidth * 0.15);  
396.   
397.         if (x >= child.getLeft() + padding && x <= child.getRight() - padding  
398.                 && y >= child.getTop() + padding  
399.                 && y <= child.getBottom() - padding)  
400.         {  
401.             return true;  
402.         }  
403.         return false;  
404.     }  
405.   
406.     /** 
407.      * 通过x,y获得落入的GestureLockView 
408.      * @param x 
409.      * @param y 
410.      * @return 
411.      */  
412.     private GestureLockView getChildIdByPos(int x, int y)  
413.     {  
414.         for (GestureLockView gestureLockView : mGestureLockViews)  
415.         {  
416.             if (checkPositionInChild(gestureLockView, x, y))  
417.             {  
418.                 return gestureLockView;  
419.             }  
420.         }  
421.   
422.         return null;  
423.   
424.     }  
425.   
426.     /** 
427.      * 设置回调接口 
428.      *  
429.      * @param listener 
430.      */  
431.     public void setOnGestureLockViewListener(OnGestureLockViewListener listener)  
432.     {  
433.         this.mOnGestureLockViewListener = listener;  
434.     }  
435.   
436.     /** 
437.      * 对外公布设置答案的方法 
438.      *  
439.      * @param answer 
440.      */  
441.     public void setAnswer(int[] answer)  
442.     {  
443.         this.mAnswer = answer;  
444.     }  
445.   
446.     /** 
447.      * 设置最大实验次数 
448.      *  
449.      * @param boundary 
450.      */  
451.     public void setUnMatchExceedBoundary(int boundary)  
452.     {  
453.         this.mTryTimes = boundary;  
454.     }  
455.   
456.     @Override  
457.     public void dispatchDraw(Canvas canvas)  
458.     {  
459.         super.dispatchDraw(canvas);  
460.         //绘制GestureLockView间的连线  
461.         if (mPath != null)  
462.         {  
463.             canvas.drawPath(mPath, mPaint);  
464.         }  
465.         //绘制指引线  
466.         if (mChoose.size() > 0)  
467.         {  
468.             if (mLastPathX != 0 && mLastPathY != 0)  
469.                 canvas.drawLine(mLastPathX, mLastPathY, mTmpTarget.x,  
470.                         mTmpTarget.y, mPaint);  
471.         }  
472.   
473.     }  
474.   
475.     public interface OnGestureLockViewListener  
476.     {  
477.         /** 
478.          * 单独选中元素的Id 
479.          *  
480.          * @param position 
481.          */  
482.         public void onBlockSelected(int cId);  
483.   
484.         /** 
485.          * 是否匹配 
486.          *  
487.          * @param matched 
488.          */  
489.         public void onGestureEvent(boolean matched);  
490.   
491.         /** 
492.          * 超过尝试次数 
493.          */  
494.         public void onUnmatchedExceedBoundary();  
495.     }  
496. }  

注释极其详细，用极其不过分~主要就是onTouchEvent中对用户选择的GestureLockView进行判断，以及改变GestureLockView状态等。

5、布局文件

[html]  view plain  copy

 

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     xmlns:zhy="http://schemas.android.com/apk/res/com.zhy.zhy_gesturelockview"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent" >  
6.   
7.     <com.zhy.zhy_gesturelockview.view.GestureLockViewGroup  
8.         android:id="@+id/id_gestureLockViewGroup"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent"  
11.         android:background="#F2F2F7"  
12.         android:gravity="center_vertical"  
13.         zhy:count="3"  
14.         zhy:tryTimes="5" />  
15. <!--   zhy:color_no_finger_inner_circle="#ff085D58"  
16.         zhy:color_no_finger_outer_circle="#ff08F0E0"  
17.         zhy:color_finger_on="#FF1734BF" -->  
18.   
19. </RelativeLayout>  

有兴趣的可以自定义属性，把注释的代码添进去就行，当然你也可以什么都不设置，单纯设置宽度和高度，我觉得默认效果也是不错的 ~

6、调用

[java]  view plain  copy

 

1. package com.zhy.zhy_gesturelockview;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.widget.Toast;  
6.   
7. import com.zhy.zhy_gesturelockview.view.GestureLockViewGroup;  
8. import com.zhy.zhy_gesturelockview.view.GestureLockViewGroup.OnGestureLockViewListener;  
9.   
10. public class MainActivity extends Activity  
11. {  
12.   
13.     private GestureLockViewGroup mGestureLockViewGroup;  
14.   
15.     @Override  
16.     protected void onCreate(Bundle savedInstanceState)  
17.     {  
18.         super.onCreate(savedInstanceState);  
19.         setContentView(R.layout.activity_main);  
20.   
21.         mGestureLockViewGroup = (GestureLockViewGroup) findViewById(R.id.id_gestureLockViewGroup);  
22.         mGestureLockViewGroup.setAnswer(new int[] { 1, 2, 3, 4,5 });  
23.         mGestureLockViewGroup  
24.                 .setOnGestureLockViewListener(new OnGestureLockViewListener()  
25.                 {  
26.   
27.                     @Override  
28.                     public void onUnmatchedExceedBoundary()  
29.                     {  
30.                         Toast.makeText(MainActivity.this, "错误5次...",  
31.                                 Toast.LENGTH_SHORT).show();  
32.                         mGestureLockViewGroup.setUnMatchExceedBoundary(5);  
33.                     }  
34.   
35.                     @Override  
36.                     public void onGestureEvent(boolean matched)  
37.                     {  
38.                         Toast.makeText(MainActivity.this, matched+"",  
39.                                 Toast.LENGTH_SHORT).show();  
40.                     }  
41.   
42.                     @Override  
43.                     public void onBlockSelected(int cId)  
44.                     {  
45.                     }  
46.                 });  
47.     }  
48.   
49. }  

转自：http://blog.csdn.net/lmj623565791/article/details/36236113

源码下载链接