手势解锁自定义View

  1 package com.rxx.view;
  2 
  3 import java.util.ArrayList;
  4 import java.util.List;
  5 import java.util.Timer;
  6 import java.util.TimerTask;
  7 import android.content.Context;
  8 import android.graphics.Canvas;
  9 import android.graphics.Color;
 10 import android.graphics.Paint;
 11 import android.graphics.Path;
 12 import android.util.AttributeSet;
 13 import android.view.MotionEvent;
 14 import android.view.View;
 15 
 16 /**
 17  * 自定义锁屏View
 18  */
 19 public class GestureLockView extends View {
 20     /** 解锁密码key */
 21     private String key = "";
 22     private OnGestureFinishListener onGestureFinishListener;
 23 
 24     /** 解锁圆点数组 */
 25     private LockCircle[] cycles;
 26     /** 存储触碰圆的序列 */
 27     private List<Integer> linedCycles = new ArrayList<Integer>();
 28 
 29     // 画笔
 30     /** 空心外圆 */
 31     private Paint paintNormal;
 32     /** 点击后内部圆 */
 33     private Paint paintInnerCycle;
 34     /** 画路径 */
 35     private Paint paintLines;
 36     private Path linePath = new Path();
 37 
 38     /** 当前手指X,Y位置 */
 39     private int eventX, eventY;
 40 
 41     /** 能否操控界面绘画 */
 42     private boolean canContinue = true;
 43     /** 验证结果 */
 44     private boolean result;
 45     private Timer timer;
 46 
 47     /** 未选中颜色 */
 48     private final int NORMAL_COLOR = Color.parseColor("#959BB4");
 49     /** 错误颜色 */
 50     private final int ERROE_COLOR = Color.parseColor("#FF2525"); // 正常外圆颜色
 51     /** 选中时颜色 */
 52     private final int TOUCH_COLOR = Color.parseColor("#409DE5"); // 选中内圆颜色
 53 
 54     // =================================start=构造方法========================
 55     public GestureLockView(Context context, AttributeSet attrs, int defStyle) {
 56         super(context, attrs, defStyle);
 57         init();
 58     }
 59 
 60     public GestureLockView(Context context, AttributeSet attrs) {
 61         this(context, attrs, 0);
 62     }
 63 
 64     public GestureLockView(Context context) {
 65         this(context, null);
 66     }
 67 
 68     // ===============================end=构造方法========================
 69 
 70     /** 初始化 */
 71     public void init() {
 72         paintNormal = new Paint();
 73         paintNormal.setAntiAlias(true);
 74         paintNormal.setStrokeWidth(5);
 75         paintNormal.setStyle(Paint.Style.STROKE);
 76 
 77         paintInnerCycle = new Paint();
 78         paintInnerCycle.setAntiAlias(true);
 79         paintInnerCycle.setStyle(Paint.Style.FILL);
 80 
 81         paintLines = new Paint();
 82         paintLines.setAntiAlias(true);
 83         paintLines.setStyle(Paint.Style.STROKE);
 84         paintLines.setStrokeWidth(10);
 85 
 86     }
 87 
 88     @Override
 89     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 90         int specMode = MeasureSpec.getMode(widthMeasureSpec);
 91         int spceSize = MeasureSpec.getSize(widthMeasureSpec);
 92         heightMeasureSpec = MeasureSpec.makeMeasureSpec(
 93                 (int) (spceSize * 0.85 + 0.5f), specMode);
 94         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 95     }
 96 
 97     @Override
 98     protected void onLayout(boolean changed, int left, int top, int right,
 99             int bottom) {
100         super.onLayout(changed, left, top, right, bottom);
101         int perWidthSize = getWidth() / 7;
102         int perHeightSize = getHeight() / 6;
103         /** 初始化圆的参数 */
104         if (cycles == null && (perWidthSize > 0) && (perHeightSize > 0)) {
105             cycles = new LockCircle[9];
106             for (int i = 0; i < 3; i++) {
107                 for (int j = 0; j < 3; j++) {
108                     LockCircle lockCircle = new LockCircle();
109                     lockCircle.setNum(i * 3 + j);
110                     lockCircle.setOx(perWidthSize * (j * 2 + 1.5f) + 0.5f);
111                     lockCircle.setOy(perHeightSize * (i * 2 + 1) + 0.5f);
112                     lockCircle.setR(perWidthSize * 0.6f);
113                     cycles[i * 3 + j] = lockCircle;
114                 }
115             }
116         }
117 
118     }
119 
120     public void setKey(String key) {
121         this.key = key;
122     }
123 
124     public void setOnGestureFinishListener(
125             OnGestureFinishListener onGestureFinishListener) {
126         this.onGestureFinishListener = onGestureFinishListener;
127     }
128 
129     /** 手势输入完成后回调接口 */
130     public interface OnGestureFinishListener {
131         /** 手势输入完成后回调函数 */
132         public void OnGestureFinish(boolean success, String key);
133     }
134 
135     /** 监听手势 */
136     @Override
137     public boolean onTouchEvent(MotionEvent event) {
138         if (canContinue) {
139             switch (event.getAction()) {
140             case MotionEvent.ACTION_DOWN:
141             case MotionEvent.ACTION_MOVE:
142                 eventX = (int) event.getX();
143                 eventY = (int) event.getY();
144                 for (int i = 0; i < cycles.length; i++) {
145                     if (cycles[i].isPointIn(eventX, eventY)) {
146                         cycles[i].setOnTouch(true);
147                         if (!linedCycles.contains(cycles[i].getNum())) {
148                             linedCycles.add(cycles[i].getNum());
149                         }
150                     }
151                 }
152                 break;
153             case MotionEvent.ACTION_UP:
154                 // 手指离开暂停触碰
155                 canContinue = false;
156                 StringBuffer stringBuffer = new StringBuffer();
157                 for (int i = 0; i < linedCycles.size(); i++) {
158                     stringBuffer.append(linedCycles.get(i));
159                 }
160                 result = key.equals(stringBuffer.toString());
161                 if (onGestureFinishListener != null && linedCycles.size() > 0) {
162                     onGestureFinishListener.OnGestureFinish(result,
163                             stringBuffer.toString());
164                 }
165                 timer = new Timer();
166                 timer.schedule(new TimerTask() {
167                     @Override
168                     public void run() {
169                         eventX = eventY = 0;
170                         for (int i = 0; i < 9; i++) {
171                             cycles[i].setOnTouch(false);
172                         }
173                         linedCycles.clear();
174                         linePath.reset();
175                         canContinue = true;
176                         postInvalidate();// 在非ui线程刷新界面
177                     }
178                 }, 1000);
179                 break;
180             }
181             invalidate();
182         }
183         return true;
184     }
185 
186     @Override
187     protected void onDraw(Canvas canvas) {
188         super.onDraw(canvas);
189         int cycleSize = cycles.length;
190         for (int i = 0; i < cycleSize; i++) {
191             // 画完并且错误
192             if (!canContinue && !result) {
193                 if (cycles[i].isOnTouch()) {
194                     drawInnerCycle(cycles[i], canvas, ERROE_COLOR);
195                     drawOutsideCycle(cycles[i], canvas, ERROE_COLOR);
196                 } else
197                     drawOutsideCycle(cycles[i], canvas, NORMAL_COLOR);
198             }
199             // 绘画中
200             else {
201                 if (cycles[i].isOnTouch()) {
202                     drawInnerCycle(cycles[i], canvas, TOUCH_COLOR);
203                     drawOutsideCycle(cycles[i], canvas, TOUCH_COLOR);
204                 } else
205                     drawOutsideCycle(cycles[i], canvas, NORMAL_COLOR);
206             }
207         }
208 
209         if (!canContinue && !result) {
210             drawLine(canvas, ERROE_COLOR);
211         } else {
212             drawLine(canvas, TOUCH_COLOR);
213         }
214 
215     }
216 
217     /** 画空心圆 */
218     private void drawOutsideCycle(LockCircle lockCircle, Canvas canvas,
219             int color) {
220         paintNormal.setColor(color);
221         canvas.drawCircle(lockCircle.getOx(), lockCircle.getOy(),
222                 lockCircle.getR(), paintNormal);
223     }
224 
225     /** 画横线 */
226     private void drawLine(Canvas canvas, int color) {
227         // 构建路径
228         linePath.reset();
229         if (linedCycles.size() > 0) {
230             int size = linedCycles.size();
231             for (int i = 0; i < size; i++) {
232                 int index = linedCycles.get(i);
233                 float x = cycles[index].getOx();
234                 float y = cycles[index].getOy();
235                 if (i == 0) {
236                     linePath.moveTo(x, y);
237                 } else {
238                     linePath.lineTo(x, y);
239                 }
240             }
241             if (canContinue) {
242                 linePath.lineTo(eventX, eventY);
243             } else {
244                 linePath.lineTo(
245                         cycles[linedCycles.get(linedCycles.size() - 1)].getOx(),
246                         cycles[linedCycles.get(linedCycles.size() - 1)].getOy());
247             }
248             paintLines.setColor(color);
249             canvas.drawPath(linePath, paintLines);
250         }
251     }
252 
253     /** 画中心圆圆 */
254     private void drawInnerCycle(LockCircle myCycle, Canvas canvas, int color) {
255         paintInnerCycle.setColor(color);
256         canvas.drawCircle(myCycle.getOx(), myCycle.getOy(),
257                 myCycle.getR() / 3f, paintInnerCycle);
258     }
259 
260     /**
261      * 每个圆点类
262      */
263     class LockCircle {
264         /** 圆心横坐标 */
265         private float ox;
266         /** 圆心纵坐标 */
267         private float oy;
268         /** 半径长度 */
269         private float r;
270         /** 代表数值 */
271         private Integer num;
272         /** 是否选择:false=未选中 */
273         private boolean onTouch;
274 
275         public float getOx() {
276             return ox;
277         }
278 
279         public void setOx(float ox) {
280             this.ox = ox;
281         }
282 
283         public float getOy() {
284             return oy;
285         }
286 
287         public void setOy(float oy) {
288             this.oy = oy;
289         }
290 
291         public void setOy(int oy) {
292             this.oy = oy;
293         }
294 
295         public float getR() {
296             return r;
297         }
298 
299         public void setR(float r) {
300             this.r = r;
301         }
302 
303         public Integer getNum() {
304             return num;
305         }
306 
307         public void setNum(Integer num) {
308             this.num = num;
309         }
310 
311         public boolean isOnTouch() {
312             return onTouch;
313         }
314 
315         public void setOnTouch(boolean onTouch) {
316             this.onTouch = onTouch;
317         }
318 
319         /** 判读传入位置是否在圆心内部 */
320         public boolean isPointIn(int x, int y) {
321             double distance = Math.sqrt((x - ox) * (x - ox) + (y - oy)
322                     * (y - oy));
323             return distance < r;
324         }
325     }
326 }

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="fill_parent"
 3     android:layout_height="fill_parent"
 4     android:background="#232736"
 5     android:gravity="center"
 6     android:orientation="vertical" >
 7 
 8     <!-- 小头像 -->
 9     <ImageView
10         android:layout_width="70dp"
11         android:layout_height="70dp"
12         android:src="@drawable/tempfenlei" />
13 
14     <TextView
15         android:id="@+id/textview"
16         android:layout_width="wrap_content"
17         android:layout_height="wrap_content"
18         android:layout_marginTop="10dp"
19         android:text=""
20         android:textColor="#FF2525"
21         android:textSize="16sp"
22         android:visibility="invisible" />
23 
24     <com.rxx.view.GestureLockView
25         android:id="@+id/gestureLockView"
26         android:layout_width="wrap_content"
27         android:layout_height="wrap_content" />
28 
29     <LinearLayout
30         android:layout_width="fill_parent"
31         android:layout_height="wrap_content"
32         android:orientation="horizontal"
33         android:padding="10dp" >
34 
35         <TextView
36             android:layout_width="fill_parent"
37             android:layout_height="wrap_content"
38             android:layout_weight="1"
39             android:gravity="center"
40             android:text="管理手势密码"
41             android:textColor="#585C6E"
42             android:textSize="16sp" />
43 
44         <TextView
45             android:layout_width="fill_parent"
46             android:layout_height="wrap_content"
47             android:layout_weight="1"
48             android:gravity="center"
49             android:text="登陆其他账号"
50             android:textColor="#585C6E"
51             android:textSize="16sp" />
52     </LinearLayout>
53 
54 </LinearLayout>

 1 package com.rxx.gesturelockdemo;
 2 
 3 import android.app.Activity;
 4 import android.graphics.Color;
 5 import android.os.Bundle;
 6 import android.view.View;
 7 import android.view.animation.Animation;
 8 import android.view.animation.TranslateAnimation;
 9 import android.widget.TextView;
10 
11 import com.rxx.view.GestureLockView;
12 import com.rxx.view.GestureLockView.OnGestureFinishListener;
13 
14 public class MainActivity extends Activity {
15 
16     private GestureLockView gestureLockView;
17     private TextView textview;
18     private Animation animation;
19 
20     @Override
21     protected void onCreate(Bundle savedInstanceState) {
22         super.onCreate(savedInstanceState);
23         setContentView(R.layout.activity_main);
24         init();
25     }
26 
27     /** 初始化 */
28     public void init() {
29         gestureLockView = (GestureLockView) findViewById(R.id.gestureLockView);
30         textview = (TextView) findViewById(R.id.textview);
31         animation = new TranslateAnimation(-20, 20, 0, 0);
32         animation.setDuration(50);
33         animation.setRepeatCount(2);
34         animation.setRepeatMode(Animation.REVERSE);
35         // 设置密码
36         gestureLockView.setKey("1");
37         // 手势完成后回调
38         gestureLockView
39                 .setOnGestureFinishListener(new OnGestureFinishListener() {
40                     @Override
41                     public void OnGestureFinish(boolean success, String key) {
42                         if (success) {
43                             textview.setTextColor(Color.parseColor("#FFFFFF"));
44                             textview.setVisibility(View.VISIBLE);
45                             textview.setText("密码正确！");
46                             textview.startAnimation(animation);
47                         } else {
48                             textview.setTextColor(Color.parseColor("#FF2525"));
49                             textview.setVisibility(View.VISIBLE);
50                             textview.setText("密码错误！");
51                             textview.startAnimation(animation);
52                         }
53                     }
54                 });
55     }
56 }