Android簡易手勢密碼開源庫
簡介
本文介紹一個Android手勢密碼開源庫的使用及實現的詳細過程,該開源庫主要實現以下幾個功能:
- 支持手勢密碼的繪製,並支持密碼保存功能,解鎖時自動比對密碼給出結果
- 封裝了繪製密碼的方法,比對兩次密碼是否一致,可以快捷地進行手勢密碼的設置
- 可以設置密碼輸入錯誤後的重試次數上限
- 可以自定義不同狀態下手勢密碼圖案的顏色
- 可以自定義手勢密碼的觸摸點數量(n*n)
最近需要用到手勢密碼解鎖功能,找了一些demo感覺用起來都有點麻煩,於是參考一些文章自己造了下輪子,封裝了相關的一些方法,使用起來比較便捷。
github鏈接如下,覺得還可以請幫忙star支持下~
github鏈接 https://github.com/autume/GestureLock
個人博客 http://blog.csdn.net/yaodong379
使用效果
首先看下使用效果:
使用方法
XML佈局文件中使用該控件
<com.syd.oden.gesturelock.view.GestureLockViewGroup
android:id="@+id/gesturelock"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:preference_id="1"
android:layout_marginTop="30dp"
app:count="3" />
可以設置的一些參數,說明如下:
color_no_finger:未觸摸時圓形的顏色
color_finger_on:觸摸時圓形的顏色
color_finger_up_correct:輸入正確時圓形的顏色
color_finger_up_error:出錯時圓形的顏色
count:手勢密碼的圓形數量,n*n
preference_id:手勢密碼保存的id號,不輸入或輸入-1則使用默認的id
初始化
private void initGesture() {
mGestureLockViewGroup = (GestureLockViewGroup) findViewById(R.id.gesturelock);
gestureEventListener();
gesturePasswordSettingListener();
gestureRetryLimitListener();
}
設置手勢密碼監聽事件
private void gestureEventListener() {
mGestureLockViewGroup.setGestureEventListener(new GestureEventListener() {
@Override
public void onGestureEvent(boolean matched) {
mylog.d("onGestureEvent matched: " + matched);
if (!matched) {
tv_state.setTextColor(Color.RED);
tv_state.setText("手勢密碼錯誤");
} else {
if (isReset) {
isReset = false;
Toast.makeText(MainActivity.this, "清除成功!", Toast.LENGTH_SHORT).show();
resetGesturePattern();
} else {
tv_state.setTextColor(Color.WHITE);
tv_state.setText("手勢密碼正確");
}
}
}
});
}
若已經設置有密碼則會進入該回調,在這裏對結果進行處理,上面的例子中加入了一個重設密碼的處理。
手勢密碼設置
private void gesturePasswordSettingListener() {
mGestureLockViewGroup.setGesturePasswordSettingListener(new GesturePasswordSettingListener() {
@Override
public boolean onFirstInputComplete(int len) {
if (len > 3) {
tv_state.setTextColor(Color.WHITE);
tv_state.setText("再次繪製手勢密碼");
return true;
} else {
tv_state.setTextColor(Color.RED);
tv_state.setText("最少連接4個點,請重新輸入!");
return false;
}
}
@Override
public void onSuccess() {
tv_state.setTextColor(Color.WHITE);
Toast.makeText(MainActivity.this, "密碼設置成功!", Toast.LENGTH_SHORT).show();
tv_state.setText("請輸入手勢密碼解鎖!");
}
@Override
public void onFail() {
tv_state.setTextColor(Color.RED);
tv_state.setText("與上一次繪製不一致,請重新繪製");
}
});
}
若還未設置密碼,繪製手勢的時候會進入該回調,返回值爲繪製的觸摸點的數量,onFirstInputComplete中返回true則進入第二手勢密碼的繪製,兩次輸入一致後自動保存密碼。
重試次數超過限制監聽
private void gestureRetryLimitListener() {
mGestureLockViewGroup.setGestureUnmatchedExceedListener(3, new GestureUnmatchedExceedListener() {
@Override
public void onUnmatchedExceedBoundary() {
tv_state.setTextColor(Color.RED);
tv_state.setText("錯誤次數過多,請稍後再試!");
}
});
}
若設置了該監聽事件,則輸入錯誤有次數限制,超過上限後進入回調,在該回調中進行處理。
清除密碼的邏輯自己加個判斷處理下即可,具體可以看下github上的demo
其他的一些API
public void removePassword() :清除密碼
public void savePassword() : 保存密碼,設置手勢密碼成功後會自動保存,也可以調用該接口另外設置密碼
public void getPassword(): 獲取密碼
public void setRetryTimes(int retryTimes) : 設置重試次數上限
public boolean isSetPassword() : 返回現在是否已經設置有密碼
public void resetView() : 將視圖Reset
在項目中導入該庫
僅需加入兩行代碼:
在工程的 build.gradle中加入:
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
module的build.gradle中加入依賴:
dependencies {
compile 'com.github.autume:GestureLock:1.0.0'
}
總的使用就是這樣,是不是很簡單!
具體實現過程
下面講下實現的過程,如果只是直接拿來用的話也可以略過這部分。
自定義手勢密碼的圓形view
這部分主要參考Hongyang大大的博客,稍微修改了一下
初始化傳入參數
public GestureLockView(Context context, int colorNoFingerr, int colorFingerOn, int colorCorrect, int colorError) {
super(context);
this.mColorNoFinger = colorNoFingerr;
this.mColorFingerOn = colorFingerOn;
this.mColorFingerUpCorrect = colorCorrect;
this.mColorFingerUpError = colorError;
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mArrowPath = new Path();
}
根據不同的觸摸狀態繪製不同顏色的圓
@Override
protected void onDraw(Canvas canvas) {
switch (mCurrentStatus) {
case STATUS_FINGER_ON:
// 繪製外圓
mPaint.setStyle(Style.STROKE);
mPaint.setColor(mColorFingerOn);
mPaint.setStrokeWidth(2);
canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);
// 繪製內圓
mPaint.setStyle(Style.FILL);
canvas.drawCircle(mCenterX, mCenterY, mRadius * mInnerCircleRadiusRate, mPaint);
break;
case STATUS_FINGER_UP:
// 繪製外圓
if (GestureLockViewGroup.isCorrect)
mPaint.setColor(mColorFingerUpCorrect);
else
mPaint.setColor(mColorFingerUpError);
mPaint.setStyle(Style.STROKE);
mPaint.setStrokeWidth(2);
canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);
// 繪製內圓
mPaint.setStyle(Style.FILL);
canvas.drawCircle(mCenterX, mCenterY, mRadius * mInnerCircleRadiusRate, mPaint);
drawArrow(canvas);
break;
case STATUS_NO_FINGER:
// 繪製外圓
mPaint.setStyle(Style.STROKE);
mPaint.setColor(mColorNoFinger);
canvas.drawCircle(mCenterX, mCenterY, mRadius, mPaint);
// 繪製內圓
mPaint.setStyle(Style.FILL);
mPaint.setColor(mColorNoFinger);
canvas.drawCircle(mCenterX, mCenterY, mRadius * mInnerCircleRadiusRate, mPaint);
break;
}
}
繪製箭頭
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth = MeasureSpec.getSize(widthMeasureSpec);
mHeight = MeasureSpec.getSize(heightMeasureSpec);
// 取長和寬中的小值
mWidth = mWidth < mHeight ? mWidth : mHeight;
mRadius = mCenterX = mCenterY = mWidth / 2;
mRadius -= mStrokeWidth / 2;
// 繪製三角形,初始時是個默認箭頭朝上的一個等腰三角形,用戶繪製結束後,根據由兩個GestureLockView決定需要旋轉多少度
float mArrowLength = mWidth / 2 * mArrowRate;
mArrowPath.moveTo(mWidth / 2, mStrokeWidth + 2);
mArrowPath.lineTo(mWidth / 2 - mArrowLength, mStrokeWidth + 2 + mArrowLength);
mArrowPath.lineTo(mWidth / 2 + mArrowLength, mStrokeWidth + 2 + mArrowLength);
mArrowPath.close();
mArrowPath.setFillType(Path.FillType.WINDING);
}
private void drawArrow(Canvas canvas) {
if (mArrowDegree != -1) {
mPaint.setStyle(Paint.Style.FILL);
canvas.save();
canvas.rotate(mArrowDegree, mCenterX, mCenterY);
canvas.drawPath(mArrowPath, mPaint);
canvas.restore();
}
}
自定義手勢密碼的ViewGroup
加入自定義view的屬性
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="color_no_finger" format="color" />
<attr name="color_finger_on" format="color" />
<attr name="color_finger_up_correct" format="color" />
<attr name="color_finger_up_error" format="color" />
<attr name="count" format="integer" />
<attr name="preference_id" format="integer" />
<declare-styleable name="GestureLockViewGroup">
<attr name="color_no_finger" />
<attr name="color_finger_on" />
<attr name="color_finger_up_correct" />
<attr name="color_finger_up_error" />
<attr name="count" />
<attr name="preference_id" />
</declare-styleable>
</resources>
獲取參數及初始化
public GestureLockViewGroup(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
/**
* 獲得所有自定義的參數的值
*/
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.GestureLockViewGroup, defStyle, 0);
mNoFingerColor = a.getColor(R.styleable.GestureLockViewGroup_color_no_finger, mNoFingerColor);
mFingerOnColor = a.getColor(R.styleable.GestureLockViewGroup_color_finger_on, mFingerOnColor);
mFingerUpColorCorrect = a.getColor(R.styleable.GestureLockViewGroup_color_finger_up_correct, mFingerUpColorCorrect);
mFingerUpColorError = a.getColor(R.styleable.GestureLockViewGroup_color_finger_up_error, mFingerUpColorError);
mCount = a.getInt(R.styleable.GestureLockViewGroup_count, mCount);
mPrferenceId = a.getInt(R.styleable.GestureLockViewGroup_preference_id, mPrferenceId);
a.recycle();
/**
* 獲取密碼狀態
*/
gesturePreference = new GesturePreference(context, mPrferenceId);
password = gesturePreference.ReadStringPreference();
Log.d(TAG, "password now is : " + password);
isSetPassword = !password.equals("null"); //判斷是否已經保存有密碼
isInPasswordSettingMode = !isSetPassword; //當未設置密碼,進入密碼設置模式
// 初始化畫筆
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPath = new Path();
}
根據參數繪製出圓
在onMeasure後調用該方法,繪製圓形矩陣
private GestureLockView[] mGestureLockViews; //保存所有的GestureLockView
private void initViews() {
// 初始化mGestureLockViews
if (mGestureLockViews == null) {
mGestureLockViews = new GestureLockView[mCount * mCount];
// 計算每個GestureLockView的寬度
mGestureLockViewWidth = (int) (4 * mWidth * 1.0f / (5 * mCount + 1));
//計算每個GestureLockView的間距
mMarginBetweenLockView = (int) (mGestureLockViewWidth * 0.25);
// 設置畫筆的寬度爲GestureLockView的內圓直徑稍微小點
mPaint.setStrokeWidth(mGestureLockViewWidth * 0.29f);
for (int i = 0; i < mGestureLockViews.length; i++) {
//初始化每個GestureLockView
mGestureLockViews[i] = new GestureLockView(getContext(), mNoFingerColor, mFingerOnColor, mFingerUpColorCorrect, mFingerUpColorError);
mGestureLockViews[i].setId(i + 1);
//設置參數,主要是定位GestureLockView間的位置
RelativeLayout.LayoutParams lockerParams = new RelativeLayout.LayoutParams(
mGestureLockViewWidth, mGestureLockViewWidth);
// 不是每行的第一個,則設置位置爲前一個的右邊
if (i % mCount != 0) {
lockerParams.addRule(RelativeLayout.RIGHT_OF,
mGestureLockViews[i - 1].getId());
}
// 從第二行開始,設置爲上一行同一位置View的下面
if (i > mCount - 1) {
lockerParams.addRule(RelativeLayout.BELOW,
mGestureLockViews[i - mCount].getId());
}
//設置右下左上的邊距
int rightMargin = mMarginBetweenLockView;
int bottomMargin = mMarginBetweenLockView;
int leftMagin = 0;
int topMargin = 0;
/**
* 每個View都有右外邊距和底外邊距 第一行的有上外邊距 第一列的有左外邊距
*/
if (i >= 0 && i < mCount)// 第一行
{
topMargin = mMarginBetweenLockView;
}
if (i % mCount == 0)// 第一列
{
leftMagin = mMarginBetweenLockView;
}
lockerParams.setMargins(leftMagin, topMargin, rightMargin,
bottomMargin);
mGestureLockViews[i].setMode(Mode.STATUS_NO_FINGER);
addView(mGestureLockViews[i], lockerParams);
}
}
}
在觸摸監聽中處理不同事件
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
int x = (int) event.getX();
int y = (int) event.getY();
Log.d(TAG, "mTryTimes : " + mTryTimes);
//重試次數超過限制,直接返回
if (mTryTimes <= 0 && isRetryTimeLimit) {
return true;
}
switch (action) {
case MotionEvent.ACTION_DOWN:
reset(); // 重置
break;
case MotionEvent.ACTION_MOVE:
drawAndGetSelectedWhenTouchMove(x, y);
break;
case MotionEvent.ACTION_UP:
if (isInPasswordSettingMode) {
if (gesturePasswordSettingListener != null)
setPasswordHandle(); //設置密碼
} else {
if (mChoose.size() > 0) {
isCorrect = checkAnswer();
} else {
return true;
}
if (gestureEventListener != null) {
gestureEventListener.onGestureEvent(isCorrect); //將結果回調
}
if (this.mTryTimes == 0) {
gestureUnmatchedExceedListener.onUnmatchedExceedBoundary(); //超出重試次數,進入回調
}
}
drawWhenTouchUp();
break;
}
invalidate();
return true;
}
private void drawAndGetSelectedWhenTouchMove(int x, int y) {
mPaint.setColor(mFingerOnColor);
mPaint.setAlpha(50);
GestureLockView child = getChildIdByPos(x, y);
if (child != null) {
int cId = child.getId();
if (!mChoose.contains(cId)) {
mChoose.add(cId);
mChooseString = mChooseString + cId;
child.setMode(Mode.STATUS_FINGER_ON);
// 設置指引線的起點
mLastPathX = child.getLeft() / 2 + child.getRight() / 2;
mLastPathY = child.getTop() / 2 + child.getBottom() / 2;
if (mChoose.size() == 1)// 當前添加爲第一個
{
mPath.moveTo(mLastPathX, mLastPathY);
} else
// 非第一個,將兩者使用線連上
{
mPath.lineTo(mLastPathX, mLastPathY);
}
}
}
// 指引線的終點
mTmpTarget.x = x;
mTmpTarget.y = y;
}
private void drawWhenTouchUp() {
if (isCorrect) {
mPaint.setColor(mFingerUpColorCorrect);
} else {
mPaint.setColor(mFingerUpColorError);
}
mPaint.setAlpha(50);
Log.d(TAG, "mChoose = " + mChoose);
// 將終點設置位置爲起點,即取消指引線
mTmpTarget.x = mLastPathX;
mTmpTarget.y = mLastPathY;
// 改變子元素的狀態爲UP
setItemModeUp();
// 計算每個元素中箭頭需要旋轉的角度
for (int i = 0; i + 1 < mChoose.size(); i++) {
int childId = mChoose.get(i);
int nextChildId = mChoose.get(i + 1);
GestureLockView startChild = (GestureLockView) findViewById(childId);
GestureLockView nextChild = (GestureLockView) findViewById(nextChildId);
int dx = nextChild.getLeft() - startChild.getLeft();
int dy = nextChild.getTop() - startChild.getTop();
// 計算角度
int angle = (int) Math.toDegrees(Math.atan2(dy, dx)) + 90;
startChild.setArrowDegree(angle);
}
}
設置密碼處理:
private void setPasswordHandle() {
if (isWaitForFirstInput) {
if (gesturePasswordSettingListener.onFirstInputComplete(mChooseString.length())) {
firstInputPassword = mChooseString;
isWaitForFirstInput = false;
}
} else {
if (firstInputPassword.equals(mChooseString)) {
gesturePasswordSettingListener.onSuccess();
savePassword(mChooseString);
isInPasswordSettingMode = false;
} else {
gesturePasswordSettingListener.onFail();
}
}
reset();
}
檢查手勢密碼是否正確:
public boolean checkAnswer() {
if (password.equals(mChooseString)) {
return true;
} else {
if (isRetryTimeLimit)
this.mTryTimes--;
return false;
}
}
重置:
private void reset() {
mChoose.clear();
mChooseString = "";
mPath.reset();
for (GestureLockView gestureLockView : mGestureLockViews) {
gestureLockView.setMode(Mode.STATUS_NO_FINGER);
gestureLockView.setArrowDegree(-1);
}
}
對外公開的一些方法
public void setGestureEventListener(GestureEventListener gestureEventListener) {
this.gestureEventListener = gestureEventListener;
}
public void setGestureUnmatchedExceedListener(int retryTimes, GestureUnmatchedExceedListener gestureUnmatchedExceedListener) {
isRetryTimeLimit = true;
this.mTryTimes = retryTimes;
this.gestureUnmatchedExceedListener = gestureUnmatchedExceedListener;
}
public void setGesturePasswordSettingListener(GesturePasswordSettingListener gesturePasswordSettingListener) {
this.gesturePasswordSettingListener = gesturePasswordSettingListener;
}
public void removePassword() {
gesturePreference.WriteStringPreference("null");
this.isSetPassword = false;
isWaitForFirstInput = true;
isInPasswordSettingMode = true;
}
public void savePassword(String password) {
this.password = password;
gesturePreference.WriteStringPreference(password);
}
public String getPassword() {
return password;
}
public void resetView() {
reset();
invalidate();
}
public void setRetryTimes(int retryTimes) {
this.mTryTimes = retryTimes;
}
public boolean isSetPassword() {
return isSetPassword;
}
定義密碼存儲的Preference
就是簡單的存和讀
public GesturePreference(Context context, int nameTableId) {
this.context = context;
if (nameTableId != -1)
this.nameTable = nameTable + nameTableId;
}
public void WriteStringPreference(String data) {
SharedPreferences preferences = context.getSharedPreferences(fileName, Context.MODE_PRIVATE);
SharedPreferences.Editor editor = preferences.edit();
editor.putString(nameTable, data);
editor.commit();
}
public String ReadStringPreference() {
SharedPreferences preferences = context.getSharedPreferences(fileName, Context.MODE_PRIVATE);
return preferences.getString(nameTable, "null");
}
總結
ok,至此,整個手勢密碼的實現就完成了。
本文首發地址:http://www.codeceo.com/article/android-gusture-lock.html