android-手勢密碼


引子

手勢密碼,移動開發中的常用功能點,看起來高大上,其實挺簡單的。

本文提供 我自定義的 手勢密碼控件布局,以及使用方法,首先附上github地址:https://github.com/18598925736/EazyGesturePwdLayoutDemo

 

實際效果動態圖

 

設置手勢密碼:

 

設置手勢密碼,當 前后兩次的手勢不一樣時

 

 

校驗手勢密碼-當5次都錯時:

 

校驗手勢密碼-當5次之內輸入正確時

 

重新設置手勢(之前設置過,現在需要修改手勢密碼)

 

源碼解析

首先說下開發思路:

上面的圖里面,我們主要看到了9個圓點,以及隨着手勢而產生的線條;

9個圓點,其實就是 自定義的View,如果你運行demo,把手放上去的畫,你會發現原點會出現圓環背景,這是在自定義的時候加上的功能,至於圓環的顏色寬度神馬的,你開心的話自己就行了。

至於線條,其實是 通過在一個自定義ViewGroup上重寫onToucheEvent監測 down,move和up來繪制的,9個圓點是被放置(用的 addView)在這個自定義ViewGroup里面,排布的方式看看源碼應該能明白;

特別說明一下這里有個坑:

在繪制線條的時候,我發現 我繪制出來的線條總是被9個圓點覆蓋,經過多方查詢,最終得出結論:這是ViewGroup的繪制機制導致的,它默認的繪制順序,是先繪制 background,然后是自己,然后是子,最后是裝飾;

看起來很抽象是吧?

看源碼;

最下方這個英語翻譯過來,就是我剛才說的意思,由於后繪制的會覆蓋先繪制的,所以,線條被子覆蓋也是正常的。

但是,這不是我想要的效果,問題是不是無解了呢?

也不是,只是大路不通,要走小路了;

還是看 View.java源碼:

 

發現,在繪制的第四步,DrawChildren中,調用的方法是dispatchDraw(canvas); 

那我如果在繪制子之后,再畫線,是不是可以讓線條覆蓋子。

所以,我重寫了這個方法,執行super.dispatchDraw()先保持原有邏輯,並且在執行我自己的繪制來畫線;

 

 OK,坑 解釋完畢。

自定義控件的源碼:

業內人士應該沒有什么看不懂的,畢竟我這個注釋已經是詳細得令人發指了(●´∀`●)....

 

首先是那9個圓點:

  1 package com.example.gesture_password_study.gesture_pwd.custom;
  2 
  3 import android.content.Context;
  4 import android.content.res.TypedArray;
  5 import android.graphics.Canvas;
  6 import android.graphics.Paint;
  7 import android.support.annotation.Nullable;
  8 import android.util.AttributeSet;
  9 import android.view.View;
 10 
 11 import com.example.gesture_password_study.R;
 12 
 13 
 14 /**
 15  * 手勢密碼專用的圓形控件
 16  */
 17 public class GestureLockCircleView extends View {
 18 
 19     public GestureLockCircleView(Context context) {
 20         this(context, null);
 21     }
 22 
 23     public GestureLockCircleView(Context context, @Nullable AttributeSet attrs) {
 24         this(context, attrs, 0);
 25     }
 26 
 27     public GestureLockCircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 28         super(context, attrs, defStyleAttr);
 29         dealAttr(context, attrs);
 30         initPaint();
 31     }
 32 
 33     private void dealAttr(Context context, AttributeSet attrs) {
 34         TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.GestureLockCircleView);
 35 
 36         if (ta != null) {
 37             try {
 38                 circleFillColor = ta.getColor(R.styleable.GestureLockCircleView_gestureCircleFillColor, 0x00FE6665);
 39                 circleRadius = ta.getDimension(R.styleable.GestureLockCircleView_gestureCircleRadius, 0);
 40 
 41                 hasRoundBorder = ta.getBoolean(R.styleable.GestureLockCircleView_hasRoundBorder, false);
 42                 roundBorderColor = ta.getColor(R.styleable.GestureLockCircleView_roundBorderColor, 0x00FE6665);
 43                 roundBorderWidth = ta.getDimension(R.styleable.GestureLockCircleView_roundBorderWidth, 0);
 44             } catch (Exception e) {
 45 
 46             } finally {
 47                 ta.recycle();
 48             }
 49         }
 50     }
 51 
 52 
 53     private int minWidth = 50, minHeight = 50;
 54 
 55     /**
 56      * 重寫onMeasure設定最小寬高
 57      *
 58      * @param widthMeasureSpec
 59      * @param heightMeasureSpec
 60      */
 61     @Override
 62     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 63         setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
 64         int widthMode = MeasureSpec.getMode(widthMeasureSpec);
 65         int widthSize = MeasureSpec.getSize(widthMeasureSpec);
 66         int heightMode = MeasureSpec.getMode(heightMeasureSpec);
 67         int heightSize = MeasureSpec.getSize(heightMeasureSpec);
 68 
 69         if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
 70             setMeasuredDimension(minWidth, minHeight);
 71         } else if (widthMode == MeasureSpec.AT_MOST) {
 72             setMeasuredDimension(minWidth, heightSize);
 73         } else if (heightMode == MeasureSpec.AT_MOST) {
 74             setMeasuredDimension(widthSize, minHeight);
 75         }
 76     }
 77 
 78     @Override
 79     protected void onDraw(Canvas canvas) {
 80         super.onDraw(canvas);
 81         int width = getWidth();
 82         int height = getHeight();
 83 
 84         float centerX = width / 2;
 85         float centerY = height / 2;
 86 
 87         if (hasRoundBorder) {
 88             canvas.drawCircle(centerX, centerY, roundBorderWidth, paint_border);
 89         }
 90         canvas.drawCircle(centerX, centerY, circleRadius, paint_inner);
 91 
 92     }
 93 
 94     private Paint paint_inner, paint_border;
 95 
 96 
 97     private boolean hasRoundBorder;
 98     private int roundBorderColor;
 99     private float roundBorderWidth;
100 
101     /**
102      * 設置內圈的顏色和半徑
103      *
104      * @param circleFillColor
105      * @param circleRadius
106      */
107     public void setInnerCircle(int circleFillColor, float circleRadius) {
108         this.circleFillColor = circleFillColor;
109         this.circleRadius = circleRadius;
110         initPaint();
111         postInvalidate();
112     }
113 
114     public void setBorderRound(boolean hasRoundBorder, int roundBorderColor, float roundBorderWidth) {
115         this.hasRoundBorder = hasRoundBorder;
116         this.roundBorderColor = roundBorderColor;
117         this.roundBorderWidth = roundBorderWidth;
118         initPaint();
119         postInvalidate();
120     }
121 
122 
123     private int circleFillColor;
124     private float circleRadius;
125 
126     private void initPaint() {
127         paint_inner = new Paint();
128         paint_inner.setColor(circleFillColor);
129         paint_inner.setAntiAlias(true);//抗鋸齒
130         paint_inner.setStyle(Paint.Style.FILL);//FILL填充,stroke描邊
131 
132         paint_border = new Paint();
133         paint_border.setColor(roundBorderColor);
134         paint_border.setAntiAlias(true);//抗鋸齒
135         paint_border.setStyle(Paint.Style.FILL);//FILL填充,stroke描邊
136     }
137 
138     //3個狀態
139     public static final int STATUS_NOT_CHECKED = 0x01;
140     public static final int STATUS_CHECKED = 0x02;
141     public static final int STATUS_CHECKED_ERR = 0x03;
142 
143     public void switchStatus(int status) {
144         switch (status) {
145             case STATUS_CHECKED:
146                 circleFillColor = getResources().getColor(R.color.colorChecked);
147                 roundBorderColor = getResources().getColor(R.color.colorRoundBorder);
148                 break;
149             case STATUS_CHECKED_ERR:
150                 circleFillColor = getResources().getColor(R.color.colorCheckedErr);
151                 roundBorderColor = getResources().getColor(R.color.colorRoundBorderErr);
152                 break;
153             case STATUS_NOT_CHECKED:// 普通狀態
154             default://以及缺省狀態
155                 //沒有外框,內圈為灰色
156                 circleFillColor = getResources().getColor(R.color.colorNotChecked);
157                 roundBorderColor = getResources().getColor(R.color.transparent);
158                 break;
159         }
160         initPaint();
161         postInvalidate();
162     }
163 
164 }

 

然后是外層的布局:

  1 package com.example.gesture_password_study.gesture_pwd.custom;
  2 
  3 import android.content.Context;
  4 import android.content.res.TypedArray;
  5 import android.graphics.Canvas;
  6 import android.graphics.Paint;
  7 import android.graphics.Path;
  8 import android.graphics.Point;
  9 import android.graphics.Rect;
 10 import android.util.AttributeSet;
 11 import android.util.Log;
 12 import android.view.MotionEvent;
 13 import android.view.View;
 14 import android.widget.RelativeLayout;
 15 
 16 import com.example.gesture_password_study.R;
 17 
 18 import java.util.ArrayList;
 19 import java.util.List;
 20 
 21 /**
 22  * 手勢密碼繪制 控件;
 23  */
 24 public class EasyGestureLockLayout extends RelativeLayout {
 25 
 26     //全局變量統一管理
 27     private Context mContext;
 28     private boolean hasRoundBorder;//按鍵是否允許有圓環外圈
 29     private boolean ifAllowInteract;//是否允許有事件交互
 30     private Paint currentPaint;//當前使用的畫筆
 31     private Paint paint_correct, paint_error;//畫線用的兩種顏色的畫筆
 32     private GestureLockCircleView[] gestureCircleViewArr = null;//用數組來保存所有按鍵
 33     private int mCount = 4;// 方陣的行數(列數等同)
 34     private int mGesturePasswordViewWidth;//每一個按鍵的邊長(因為寬高相同)
 35     private int mWidth, mHeight;//本layout的寬高
 36     private int childStartIndex, childEndIndex;//畫軌跡線(密碼軌跡)的時候,需要指定子的起始和結束 index
 37     private float marginRate = 0.2f;//縮小MotionEvent到達時的密碼鍵選中的判定范圍,這里的0.2的意思是,原本10*10的判定范圍,現在,縮小到6*6,其他4,被兩頭平分
 38     private boolean ifAllowDrawLockPath = false;//因為有可能存在,down的時候沒有點在任何一個鍵位的范圍之內,所以必須用這個變量來控制是否進行繪制
 39     private int guideLineStartX, guideLineStartY, guideLineEndX, guideLineEndY;//引導線(正在畫手勢,但是尚未或者無法形成軌跡線的時候,會出現)的起始和終止坐標
 40     private int downX, downY;//MotionEvent的down事件坐標
 41     private int movedX, movedY;//MotionEvent的move事件坐標
 42     private Path lockPath = new Path();//密碼的圖形路徑.用於繪制軌跡線
 43     private List<Integer> lockPathArr;//手勢密碼路徑,用於輸出到外界以及核對密碼
 44     private int minLengthOfPwd = 4;//密碼最少位數
 45 
 46     private int mModeStatus = -1;
 47     private List<Integer> checkPwd;//外界傳入的需要核對的密碼
 48     private int maxAttemptTimes = 5;//允許解鎖的最大嘗試次數,有必要的話,給他設置一個set方法,或者弄一個自定義屬性
 49     private int currentAttemptTime = 1;// 當前嘗試次數
 50 
 51     private int resetCurrentTime = 0;//當用戶重新設置密碼,這個值將會被重置
 52     private List<Integer> tempPwd;//用於重新設置密碼
 53     private boolean ifCheckOnErr = false;//當前是否檢測密碼曾失敗過
 54 
 55     //常量
 56     public static final int STATUS_RESET = 0x01;//本類狀態:重新設置,此狀態下會允許用戶繪制兩次手勢,而且必須相同,繪制完成之后,返回密碼值出去;
 57     // 如果第二次繪制和第一次繪制不同,則強制重新繪制
 58     public static final int STATUS_CHECK = 0x02;//本類狀態:校驗密碼,此狀態下,要求外界傳入密碼,然后給予用戶若干嘗試解鎖的次數,
 59     // 如果規定次數之內,密碼相同,則返回解鎖成功;
 60     // 如果規定次數之內,都沒有繪制出正確密碼,則返回解鎖失敗;
 61 
 62     //************* 構造函數 *****************************
 63     public EasyGestureLockLayout(Context context) {
 64         this(context, null);
 65     }
 66 
 67     public EasyGestureLockLayout(Context context, AttributeSet attrs) {
 68         this(context, attrs, 0);
 69     }
 70 
 71     public EasyGestureLockLayout(Context context, AttributeSet attrs, int defStyleAttr) {
 72         super(context, attrs, defStyleAttr);
 73         dealAttr(context, attrs);
 74         init(context);
 75     }
 76 
 77     //************* 屬性值獲取 *****************************
 78     private void dealAttr(Context context, AttributeSet attrs) {
 79         TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.EasyGestureLockLayout);
 80 
 81         if (ta != null) {
 82             try {
 83                 hasRoundBorder = ta.getBoolean(R.styleable.EasyGestureLockLayout_ifChildHasBorder, false);
 84                 mCount = ta.getInteger(R.styleable.EasyGestureLockLayout_count, 3);
 85 
 86                 ifAllowInteract = ta.getBoolean(R.styleable.EasyGestureLockLayout_ifAllowInteract, false);
 87             } catch (Exception e) {
 88 
 89             } finally {
 90                 ta.recycle();
 91             }
 92         }
 93     }
 94 
 95     //************* 重寫方法 *****************************
 96     @Override
 97     protected void onMeasure(int widthSpec, int heightSpec) {
 98         super.onMeasure(widthSpec, heightSpec);
 99 
100         //取測量之后的寬和高
101         mWidth = MeasureSpec.getSize(widthSpec);
102         mHeight = MeasureSpec.getSize(heightSpec);
103         //強行將繪圖使用的寬高置為  測量寬高中的較小值, 因為繪圖不能超出邊界
104         mHeight = mWidth = mWidth < mHeight ? mWidth : mHeight;
105 
106         // 初始化mGestureLockViews
107         if (gestureCircleViewArr == null) {
108             gestureCircleViewArr = new GestureLockCircleView[mCount * mCount];//用數組來保存 “按鍵”
109             mGesturePasswordViewWidth = mWidth / mCount;//等分,不需要留間隙, 因為圓形控件會自己留空隙
110 
111             //利用相對布局的參數來放置子元素
112             for (int i = 0; i < gestureCircleViewArr.length; i++) {
113                 //初始化每個GestureLockView
114                 gestureCircleViewArr[i] = getCircleView(mHeight);
115                 gestureCircleViewArr[i].setId(i + 1);
116                 LayoutParams lockerParams = new LayoutParams(
117                         mGesturePasswordViewWidth, mGesturePasswordViewWidth);
118 
119                 // 不是每行的第一個,則設置位置為前一個的右邊
120                 if (i % mCount != 0) {
121                     lockerParams.addRule(RelativeLayout.RIGHT_OF,
122                             gestureCircleViewArr[i - 1].getId());
123                 }
124                 // 從第二行開始,設置為上一行同一位置View的下面
125                 if (i > mCount - 1) {
126                     lockerParams.addRule(RelativeLayout.BELOW,
127                             gestureCircleViewArr[i - mCount].getId());
128                 }
129                 lockerParams.setMargins(0, 0, 0, 0);
130                 addView(gestureCircleViewArr[i], lockerParams);
131             }
132         }
133 
134     }
135 
136     /**
137      * 實驗結果,在這里onDraw,繪制出來的線,總是會被子元素覆蓋,
138      *
139      * @param canvas
140      */
141     @Override
142     protected void onDraw(Canvas canvas) { //鬧半天,這個onDraw沒有執行
143         super.onDraw(canvas);
144         //奇怪,為何不執行onDraw
145         // 一般情況下,viewGroup都不會執行onDraw,因為它本身是一個容器,容器不具有自我繪制功能;
146         //圖像的表現,和繪制的順序有關系;
147         Log.d("onDrawTag", "onDraw");
148     }
149 
150     /**
151      * 然而,由這個方法進行繪制,線,則會覆蓋"子";
152      *
153      * @param canvas
154      */
155     @Override
156     public void dispatchDraw(Canvas canvas) {
157         super.dispatchDraw(canvas);//這一步居然就是繪制 “子”, 具體看View.java 的 19195行
158         Log.d("onDrawTag", "dispatchDraw");//那么, 等children畫完了之后,再畫線,就名正言順了。⊙︿⊙ 一頭包。明白了
159         if (gestureCircleViewArr != null && ifAllowInteract) {
160             drawLockPath(canvas);
161             drawMovingPath(canvas);
162         }
163     }
164 
165     //************* 模式設置 *****************************
166 
167     public int getCurrentMode() {
168         return mModeStatus;
169     }
170 
171     /**
172      * 切換到Reset模式,重新設置手勢密碼;
173      * 此模式下,不需要入參。設置完成之后,會執行回調GestureEventCallback.onResetFinish(pwd);
174      */
175     public void switchToResetMode() {
176         mModeStatus = STATUS_RESET;
177     }
178 
179     /**
180      * 切換到 校驗模式;
181      * 這個模式需要傳入原始密碼,以及最大嘗試的次數;
182      * <p>
183      * 嘗試解鎖成功,或者超過了最大嘗試次數都沒有成功,就會執行回調GestureEventCallback.onCheckFinish(boolean succeedOrFailed);
184      *
185      * @param pwd
186      * @param maxAttemptTimes
187      */
188     public void switchToCheckMode(List<Integer> pwd, int maxAttemptTimes) {
189         if (pwd == null || maxAttemptTimes <= 0) {
190             Log.e("switchToCheckMode", "參數錯誤,pwd不能為空,而且 maxAttemptTimes必須大於0");
191             return;
192         }
193         this.currentAttemptTime = 1;
194         this.mModeStatus = STATUS_CHECK;
195         this.maxAttemptTimes = maxAttemptTimes;
196         this.checkPwd = copyPwd(pwd);
197     }
198 
199     //****************************以下全是業務代碼**************************
200     private int background_color = 0xff4790FF;
201     private int background_color_transparent = 0x00000000;
202 
203     /**
204      * 初始化畫筆,
205      *
206      * @param context
207      */
208     private void init(Context context) {
209         mContext = context;
210         setClickable(true);//為了順利接收事件,需要開啟click;因為你如果不設置,,就只能收到down,其他的一概收不到
211         setBackgroundColor(background_color_transparent);//設置透明色;這里如果不設置,onDraw將不會執行;原因:這是一個ViewGroup,本身是容器,不具備自我繪制功能,但是這里設置了背景色,就說明有東西需要繪制,onDraw就會執行;
212 
213         paint_correct = new Paint();
214         paint_correct.setStyle(Paint.Style.STROKE);
215         paint_correct.setAntiAlias(true);
216         paint_correct.setColor(getResources().getColor(R.color.colorChecked));
217 
218         paint_error = new Paint();
219         paint_error.setStyle(Paint.Style.STROKE);
220         paint_error.setAntiAlias(true);
221         paint_error.setColor(getResources().getColor(R.color.colorCheckedErr));
222 
223         initLockPathArr();
224         currentPaint = paint_correct;// 默認使用的畫筆
225     }
226 
227     /**
228      * 構建單個圓
229      *
230      * @param wh 邊長
231      * @return
232      */
233     private GestureLockCircleView getCircleView(int wh) {
234         GestureLockCircleView gestureCircleView = new GestureLockCircleView(mContext);
235 
236         double s = Math.pow(mCount, 3) + 0.5f;//除法系數,用於計算內圓的半徑; 行數的3次方,並且轉為浮點型
237         gestureCircleView.setInnerCircle(getResources().getColor(R.color.colorChecked), (float) (wh / s));
238 
239         paint_correct.setStrokeWidth((float) (wh / s) * 0.2f);
240         paint_error.setStrokeWidth((float) (wh / s) * 0.2f);
241 
242         //內圓顏色,內圓半徑
243         s = Math.pow(mCount, 2) + 0.5f;//除法系數,用於計算外圓的半徑;行數的2次方,並且轉為浮點型
244         gestureCircleView.setBorderRound(hasRoundBorder, getResources().getColor(R.color.colorChecked), (float) (wh / s));//是否有邊框,外圓顏色,外圓半徑
245         gestureCircleView.switchStatus(GestureLockCircleView.STATUS_NOT_CHECKED);
246         return gestureCircleView;
247     }
248 
249     /**
250      * 重置所有按鍵為 notChecked 狀態
251      */
252     private void resetAllCircleBtn() {
253         if (gestureCircleViewArr == null) return;
254         for (int i = 0; i < gestureCircleViewArr.length; i++) {
255             gestureCircleViewArr[i].switchStatus(GestureLockCircleView.STATUS_NOT_CHECKED);
256         }
257     }
258 
259     //*************************手勢密碼路徑的管理***********************************************
260     private void initLockPathArr() {
261         lockPathArr = new ArrayList<>();
262     }
263 
264     /**
265      * 增加一個密碼數字
266      *
267      * @param p
268      */
269     private void addPwd(int p) {
270         if (!checkRepetition(p)) {
271             lockPathArr.add(p);
272         }
273     }
274 
275     private void resetPwd() {
276         if (lockPathArr == null)
277             lockPathArr = new ArrayList<>();
278         else
279             lockPathArr.clear();
280     }
281 
282     /**
283      * 繪制密碼“軌跡線”
284      *
285      * @param canvas
286      */
287     private void drawLockPath(Canvas canvas) {
288         canvas.drawPath(lockPath, currentPaint);
289     }
290 
291     /**
292      * 重置引導線的起/終 坐標值
293      */
294     private void resetMovingPathCoordinate() {
295         guideLineStartX = 0;
296         guideLineStartY = 0;
297         guideLineEndX = 0;
298         guideLineEndY = 0;
299     }
300 
301     /**
302      * 繪制引導線
303      */
304     private void drawMovingPath(Canvas canvas) {
305         if (guideLineStartX != 0 && guideLineStartY != 0)//只有當起始位置不是0的時候,才進行繪制
306             canvas.drawLine(guideLineStartX, guideLineStartY, guideLineEndX, guideLineEndY, currentPaint);
307     }
308 
309     /**
310      * 輔助方法,獲得一個View的中心位置
311      *
312      * @param v
313      * @return
314      */
315     private Point getCenterPoint(View v) {
316         Rect rect = new Rect();
317         v.getHitRect(rect);
318         int x = rect.left + v.getWidth() / 2;
319         int y = rect.top + v.getHeight() / 2;
320         return new Point(x, y);
321     }
322 
323     /**
324      * 判斷當前點擊的點位置是不是在子元素范圍之內
325      *
326      * @param x
327      * @param y
328      * @param v
329      * @return
330      */
331     private boolean ifClickOnView(int x, int y, View v) {
332         Rect r = new Rect();
333         v.getHitRect(r);
334 
335         //判定點是不是在view范圍內,根據業務需求,要給view一個判定的間隙,比如 5*5的View,判定范圍只能是3*3
336         //以原來的矩陣為基礎,重新定一個判定范圍,范圍暫時定位原來的80%
337         //真正的判定區域的矩陣范圍
338 
339         int w = v.getWidth();
340         int h = v.getHeight();
341 
342         int realLeft = (int) (r.left + marginRate * w);
343         int realTop = (int) (r.top + marginRate * h);
344         int realRight = (int) (r.right - marginRate * w);
345         int realBottom = (int) (r.bottom - marginRate * h);
346 
347         Rect rect1 = new Rect(realLeft, realTop, realRight, realBottom);
348 
349         if (rect1.contains(x, y)) {
350             return true;
351         }
352         return false;
353     }
354 
355     /**
356      * 根據點坐標,返回當前點在哪個密碼鍵的范圍內,直接返回View對象
357      *
358      * @param x
359      * @param y
360      * @return
361      */
362     private GestureLockCircleView getClickedChild(int x, int y) {
363         for (GestureLockCircleView v : gestureCircleViewArr) {
364             if (ifClickOnView(x, y, v)) {//
365                 return v;
366             }
367         }
368         return null;
369     }
370 
371     /**
372      * 根據點坐標,返回當前點在哪個密碼鍵的范圍內,直接返回View對象的id
373      *
374      * @param x
375      * @param y
376      * @return
377      */
378     private int getClickedChildIndex(int x, int y) {
379         for (int i = 0; i < gestureCircleViewArr.length; i++) {
380             View v = gestureCircleViewArr[i];
381             if (ifClickOnView(x, y, v)) {//
382                 return i;
383             }
384         }
385         return -1;
386     }
387 
388     /**
389      * 檢查密碼值是否重復
390      *
391      * @return
392      */
393     private boolean checkRepetition(int pwd) {
394         return lockPathArr.contains(pwd);
395     }
396 
397     /**
398      * 手勢繪制
399      *
400      * @param event
401      * @return
402      */
403     @Override
404     public boolean onTouchEvent(MotionEvent event) {
405         if (ifAllowInteract)//只有設置了允許事件交互,才往下執行
406             switch (event.getAction()) {
407                 case MotionEvent.ACTION_DOWN:
408                     onToast("", ColorHolder.COLOR_GRAY);
409                     downX = (int) event.getX();
410                     downY = (int) event.getY();
411                     ifAllowDrawLockPath = false;
412                     GestureLockCircleView current = getClickedChild(downX, downY);
413                     if (current != null) {//如果當前按下的點,沒有在任何一個按鍵范圍之內
414                         ifAllowDrawLockPath = true;
415 
416                         if (ifCheckOnErr)
417                             current.switchStatus(GestureLockCircleView.STATUS_CHECKED_ERR);
418                         else
419                             current.switchStatus(GestureLockCircleView.STATUS_CHECKED);//down的時候,將當前這個按鍵設置為checked
420 
421                         childStartIndex = getClickedChildIndex(downX, downY);
422                         //記錄手勢密碼
423                         lockPath.reset();
424                         resetPwd();
425                         addPwd(childStartIndex);
426                         //path處理
427                         Point startP = getCenterPoint(gestureCircleViewArr[childStartIndex]);
428                         if (startP != null) {//因為如果
429                             lockPath.moveTo(startP.x, startP.y);
430                             //引導線的起始坐標
431                             guideLineStartX = startP.x;
432                             guideLineStartY = startP.y;
433                         } else {
434                             Log.d("tagpx", "1");
435                         }
436                     } else {
437                         //如果第一次點下去,就是在 鍵位的空隙里面。那么,就不用繪制了
438                         Log.d("tagpx", "2");
439                     }
440 
441                     break;
442                 case MotionEvent.ACTION_MOVE:
443                     if (ifAllowDrawLockPath) {
444                         movedX = (int) event.getX();
445                         movedY = (int) event.getY();
446                         childEndIndex = getClickedChildIndex(movedX, movedY);
447 
448                         //-1表示沒有找到對應的區域
449                         boolean flag1 = childStartIndex != -1 && childEndIndex != -1;//沒有獲取到正確的對應區域
450                         boolean flag2 = childStartIndex != childEndIndex;//在同一個區域內不需要畫線
451                         boolean flag3 = checkRepetition(childEndIndex);//不允許密碼值重復,這里要檢查當前這個區域是不是已經在lockPathArr里面
452 
453                         if (flag1 && flag2 && !flag3) {//如果起點終點都在區域之內,那么就直接繪制“軌跡線”
454                             Point endP = getCenterPoint(gestureCircleViewArr[childEndIndex]);
455                             GestureLockCircleView cur = getClickedChild(movedX, movedY);
456                             if (ifCheckOnErr)
457                                 cur.switchStatus(GestureLockCircleView.STATUS_CHECKED_ERR);
458                             else
459                                 cur.switchStatus(GestureLockCircleView.STATUS_CHECKED);
460 
461                             addPwd(childEndIndex);
462                             lockPath.lineTo(endP.x, endP.y);
463 
464                             guideLineStartX = endP.x;
465                             guideLineStartY = endP.y;
466                         }
467                         guideLineEndX = movedX;
468                         guideLineEndY = movedY;
469                         postInvalidate();//刷新視圖
470                     }
471                     break;
472                 case MotionEvent.ACTION_UP:
473                 case MotionEvent.ACTION_CANCEL:
474                     if (ifAllowDrawLockPath) {
475                         resetMovingPathCoordinate(); // up的時候,要清除引導線
476                         lockPath.reset(); //同時要清除軌跡線
477                         postInvalidate();//刷新本layout
478                         resetAllCircleBtn();//up的時候,把所有按鍵全部設置為notChecked,
479                         onSwipeFinish();
480                         if (lockPathArr.size() >= minLengthOfPwd) {
481                             if (mModeStatus == STATUS_RESET) {//如果處於reset模式下,執行rest的回調
482                                 onReset();
483                             } else if (mModeStatus == STATUS_CHECK) {//檢查模式下,執行onCheck
484                                 onCheck();
485                             } else {
486                                 throw new RuntimeException("異常模式,請正確調用switchToCheckMode/switchToResetMode!");
487                             }
488                         } else {
489                             onToast(String.format(ToastStrHolder.swipeTooLittlePointStr, minLengthOfPwd), ColorHolder.COLOR_RED);
490                         }
491                     }
492                     break;
493                 default:
494                     break;
495             }
496         return super.onTouchEvent(event);
497     }
498 
499     private void onSwipeFinish() {
500         if (mGestureEventCallback == null) return;
501         mGestureEventCallback.onSwipeFinish(copyPwd(lockPathArr));
502     }
503 
504     private void onReset() {
505         if (mGestureEventCallback == null) return;
506         if (resetCurrentTime == 0) {//第一次繪制,賦值給tempPwd
507             tempPwd = copyPwd(lockPathArr);
508             resetCurrentTime++;
509             onToast(ToastStrHolder.tryAgainStr, ColorHolder.COLOR_GRAY);
510         } else {
511             try {
512                 boolean s = compare(tempPwd, lockPathArr);
513                 if (s) {
514                     onToast(ToastStrHolder.successStr, ColorHolder.COLOR_GRAY);
515                     mGestureEventCallback.onResetFinish(copyPwd(lockPathArr));//執行回調
516                 } else {
517                     onToast(ToastStrHolder.notSameStr, ColorHolder.COLOR_RED);
518                 }
519             } catch (RuntimeException e) {
520                 e.printStackTrace();
521             }
522         }
523     }
524 
525     /**
526      * 初始化當前的繪制次數
527      */
528     public void initCurrentTimes() {
529         resetCurrentTime = 0;
530     }
531 
532     private void onCheck() {
533         if (mGestureEventCallback == null) return;
534         boolean compareRes = compare(checkPwd, lockPathArr); //對比當前密碼和外界傳入的密碼
535         if (currentAttemptTime <= maxAttemptTimes) {//如果還能繼續嘗試解鎖,那么
536             if (compareRes) {//如果成功
537                 mGestureEventCallback.onCheckFinish(compareRes);//直接返回結果
538 
539                 currentAttemptTime = 1;
540                 currentPaint = paint_correct;
541                 ifCheckOnErr = false;
542             } else {//否則,提示
543                 int remindTime = maxAttemptTimes - currentAttemptTime;
544                 if (remindTime > 0) {
545                     onToast(String.format(ToastStrHolder.wrongPwdInputStr, remindTime), ColorHolder.COLOR_RED);
546 
547                     currentPaint = paint_error;
548                     ifCheckOnErr = true;
549                 } else {
550                     mGestureEventCallback.onCheckFinish(compareRes);//直接返回結果
551                 }
552                 currentAttemptTime++;
553             }
554         } else {//如果已經不能嘗試, 無論是否成功,都要返回結果
555             mGestureEventCallback.onCheckFinish(compareRes);
556             currentAttemptTime = 1;
557         }
558     }
559 
560     private void onSwipeMore() {
561         if (mGestureEventCallback == null) return;
562         mGestureEventCallback.onSwipeMore();
563     }
564 
565     private void onToast(String s, int color) {
566         if (mGestureEventCallback == null) return;
567         mGestureEventCallback.onToast(s, color);
568     }
569 
570     /**
571      * 提供一個方法,繪制密碼點,但是只繪制 圓圈,不繪制引導線和軌跡線
572      */
573     public void refreshPwdKeyboard(List<Integer> pwd) {
574         try {
575             for (int i = 0; i < mCount * mCount; i++) {//先把所有的點都設置為notChecked
576                 gestureCircleViewArr[i].switchStatus(GestureLockCircleView.STATUS_NOT_CHECKED);
577             }
578 
579             if (null != pwd)
580                 for (int i = 0; i < pwd.size(); i++) {//再把密碼中的點,設置為checked
581                     gestureCircleViewArr[pwd.get(i)].switchStatus(GestureLockCircleView.STATUS_CHECKED);
582                 }
583         } catch (IndexOutOfBoundsException e) {
584             //這里有可能發生數組越界,因為 本類的各個對象時相互獨立的,方陣行數可能不同
585             e.printStackTrace();
586         }
587     }
588 
589     //*************************下面業務對接***********************************************
590     public interface GestureEventCallback {
591         /**
592          * 當滑動結束,無論模式,只要滑動之后發現upEvent就執行
593          */
594         void onSwipeFinish(List<Integer> pwd);
595 
596         /**
597          * 當重新設置密碼成功的時候,將密碼返回出去
598          *
599          * @param pwd 設置的密碼
600          */
601         void onResetFinish(List<Integer> pwd);
602 
603         /**
604          * 如果當前模式是 check模式,則用這個方法來返回check的結果
605          *
606          * @param succeedOrFailed 校驗是否成功
607          */
608         void onCheckFinish(boolean succeedOrFailed);
609 
610         /**
611          * 如果當前滑動的密碼格子數太少(比如設置了至少滑動4格,卻只滑了2格)
612          */
613         void onSwipeMore();
614 
615         /**
616          * 當需要給外界反饋信息的時候
617          *
618          * @param s     信息內容
619          * @param color 有必要的話,傳字體顏色給外界
620          */
621         void onToast(String s, int color);
622     }
623 
624     /**
625      * 反饋給外界的回調
626      */
627     private GestureEventCallback mGestureEventCallback;
628 
629     public void setGestureFinishedCallback(GestureEventCallback gestureFinishedCallback) {
630         this.mGestureEventCallback = gestureFinishedCallback;
631     }
632 
633     public static class GestureEventCallbackAdapter implements GestureEventCallback {
634 
635         @Override
636         public void onSwipeFinish(List<Integer> pwd) {
637 
638         }
639 
640         @Override
641         public void onResetFinish(List<Integer> pwd) {
642 
643         }
644 
645         @Override
646         public void onCheckFinish(boolean succeedOrFailed) {
647 
648         }
649 
650         @Override
651         public void onSwipeMore() {
652 
653         }
654 
655         @Override
656         public void onToast(String s, int color) {
657 
658         }
659     }
660 
661     //*************************下面是輔助方法以及輔助內部類***********************************************
662 
663     /**
664      * 輔助方法,復制一份密碼對象,因為如果直接把當前對象的密碼返回出去,則外界使用的全部都是同一個對象,這個對象可能隨時變化,外層邏輯無法對比密碼值
665      */
666     private List<Integer> copyPwd(List<Integer> pwd) {
667         List<Integer> copyOne = new ArrayList<>();
668         for (int i = 0; i < pwd.size(); i++) {
669             copyOne.add(pwd.get(i));
670         }
671         return copyOne;
672     }
673 
674     /**
675      * 對比兩個list是否內容完全相同
676      */
677     private boolean compare(List<Integer> list1, List<Integer> list2) throws RuntimeException {
678 
679         if (list1 == null || list2 == null) {
680             throw new RuntimeException("存在list為空,不執行對比");
681         }
682 
683         if (list1.size() != list2.size())//size長度都不同,就不用比了
684             return false;
685 
686         for (int i = 0; i < list1.size(); i++) {
687             if (list1.get(i) != list2.get(i)) {
688                 return false;
689             }
690         }
691         return true;
692     }
693 
694 
695     public class ColorHolder {
696         public static final int COLOR_RED = 0xffFF3232;
697         public static final int COLOR_GRAY = 0xff999999;
698         public static final int COLOR_YELLOW = 0xffF8A916;
699     }
700 
701     public class ToastStrHolder {
702         public static final String successStr = "繪制成功";
703         public static final String tryAgainStr = "請再次繪制手勢密碼";
704         public static final String notSameStr = "與首次繪制不一致,請再次繪制";
705         public static final String forYourSafetyStr = "為了您的賬戶安全,請設置手勢密碼";
706         public static final String swipeTooLittlePointStr = "請最少連接%s個點";
707         public static final String wrongPwdInputStr = "輸入錯誤,您還可以輸入%s次";
708     }
709 }

 

 

 具體使用方法:


只展示一個例子,這是設置手勢密碼的界面,紅色的代碼就是你需要自己編寫的;

package com.example.gesture_password_study.gesture_pwd;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

import com.example.gesture_password_study.R;
import com.example.gesture_password_study.gesture_pwd.base.GestureBaseActivity;
import com.example.gesture_password_study.gesture_pwd.custom.EasyGestureLockLayout;

import java.util.List;

/**
 * 手勢密碼 設置界面
 */
public class GesturePwdSettingActivity extends GestureBaseActivity {

    EasyGestureLockLayout layout_small;
    TextView tv_go;
    TextView tv_redraw;
    EasyGestureLockLayout layout_parent;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_gesture_pwd_setting);
        initView();
        initLayoutView();
    }

    private void initView() {
        tv_go = findViewById(R.id.tv_go);
        layout_parent = findViewById(R.id.layout_parent);
        layout_small = findViewById(R.id.layout_small);
        tv_redraw = findViewById(R.id.tv_redraw);
    }


    protected void initLayoutView() {
        
        //寫個適配器
        EasyGestureLockLayout.GestureEventCallbackAdapter adapter = new EasyGestureLockLayout.GestureEventCallbackAdapter() {
            @Override
            public void onSwipeFinish(List<Integer> pwd) {
                layout_small.refreshPwdKeyboard(pwd);//通知另一個小密碼盤,將密碼點展示出來,但是不展示軌跡線
                tv_redraw.setVisibility(View.VISIBLE);
            }

            @Override
            public void onResetFinish(List<Integer> pwd) {// 當密碼設置完成
                savePwd(showPwd("showGesturePwdInt", pwd));//保存密碼到本地
                Toast.makeText(GesturePwdSettingActivity.this, "密碼已保存", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onCheckFinish(boolean succeedOrFailed) {
                String str = succeedOrFailed ? "解鎖成功" : "解鎖失敗";
                Toast.makeText(GesturePwdSettingActivity.this, str, Toast.LENGTH_SHORT).show();
                if (succeedOrFailed) {//如果解鎖成功,則切換到set模式
                    layout_parent.switchToResetMode();
                } else {
                    onCheckFailed();
                }
            }

            @Override
            public void onSwipeMore() {
                //執行動畫
                animate(tv_go);
            }

            @Override
            public void onToast(String s, int textColor) {
                tv_go.setText(s);
                if (textColor != 0)
                    tv_go.setTextColor(textColor);

                if (textColor == 0xffFF3232) {
                    animate(tv_go);
                }
            }
        };

        layout_parent.setGestureFinishedCallback(adapter);

        //使用rest模式
        layout_parent.switchToResetMode();

        tv_redraw.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                layout_parent.initCurrentTimes();
                tv_redraw.setVisibility(View.INVISIBLE);
                layout_small.refreshPwdKeyboard(null);
                tv_go.setText("請重新繪制"); } });
    }



}

 

它的布局xml:

layout_gesture_pwd_setting.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_skip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="40dp"
        android:text="--"
        android:textColor="@color/color_v"
        android:textSize="15sp" />


    <com.example.gesture_password_study.gesture_pwd.custom.EasyGestureLockLayout
        android:id="@+id/layout_small"
        android:layout_width="@dimen/small_grid_width"
        android:layout_height="@dimen/small_grid_width" app:count="3" app:ifAllowInteract="false" app:ifChildHasBorder="false" />

    <TextView
        android:id="@+id/tv_go"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="為了您的賬戶安全,請設置手勢密碼"
        android:textColor="#F8A916"
        android:textSize="13sp" />

    <com.example.gesture_password_study.gesture_pwd.custom.EasyGestureLockLayout
        android:id="@+id/layout_parent"
        android:layout_width="@dimen/big_grid_width"
        android:layout_height="@dimen/big_grid_width"
        android:layout_marginTop="64dp" app:count="3" app:ifAllowInteract="true" app:ifChildHasBorder="true" />

    <TextView
        android:id="@+id/tv_redraw"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="重新繪制"
        android:textColor="@color/color_v"
        android:textSize="15sp"
        android:visibility="invisible"/>


</LinearLayout>

count屬性,是控制 密碼盤的 方陣寬度,目前是3,所以呈現出來就是3*3;

你可以換成4,5,6···隨意,只要你沒有密集恐懼症.```````````

 

 ===========================================

 歐拉,源碼解讀就到這里,也沒什么復雜的東西。

想起之前面試的時候有一個大佬問我的問題, 自定義ViewGroup能不能在里面同時放置子View並且還能對自身進行繪制。

當時一臉懵逼,不知道什么意思,···· 現在知道了。

自定義ViewGroup,然后addView。。。然后還 onDraw··自己。

 

 

 

喜歡的大佬可以下載源碼,歡迎留言討論···


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM