引子
手勢密碼,移動開發中的常用功能點,看起來高大上,其實挺簡單的。
本文提供 我自定義的 手勢密碼控件布局,以及使用方法,首先附上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··自己。