Android 手勢密碼鎖

時間  2019-12-05
標籤 android 手勢 密碼鎖 欄目 Android 简体版
原文   原文鏈接

一：簡介

如今有不少銀行類APP、涉及到支付類的APP都集成了指紋、手勢等二次驗證功能，從而使APP得到更高的安全性。今天咱們就來分析一下手勢密碼鎖功能的具體實現。java

二：源碼

源碼Demo獲取方法

關注 【網羅開發】微信公衆號，回覆【90】即可領取。 網羅天下方法，方便你我開發，全部文檔會持續更新，歡迎關注一塊兒成長！node

三：demo源碼分析

網上也不乏有一些手勢密碼的介紹，可是大可能是使用第三方庫，今天和你們介紹的是經過繼承ViewGroup和View實現的原生手勢密碼鎖。android

項目文件

1.邏輯代碼類分析安全

頁面邏輯主要經過手勢密碼容器類(GestureContentView)、手勢密碼路徑繪製類(GestureDrawline)、手勢密碼圖案提示類(LockIndicator)三個類來實現。 核心代碼以下：bash

package demo.gesturepsd.gesturepsd_android.widget;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import demo.gesturepsd.gesturepsd_android.R;
import demo.gesturepsd.gesturepsd_android.common.AppUtil;
import demo.gesturepsd.gesturepsd_android.entity.GesturePoint;
import demo.gesturepsd.gesturepsd_android.widget.GestureDrawline.GestureCallBack;

import java.util.ArrayList;
import java.util.List;

/**
 * 手勢密碼容器類
 *
 */
public class GestureContentView extends ViewGroup {

	private int baseNum = 6;

	private int[] screenDispaly;

	/**
	 * 每一個點區域的寬度
	 */
	private int blockWidth;
	/**
	 * 聲明一個集合用來封裝座標集合
	 */
	private List<GesturePoint> list;
	private Context context;
	private boolean isVerify;
	private GestureDrawline gestureDrawline;

	/**
	 * 包含9個ImageView的容器，初始化
	 * @param context
	 * @param isVerify 是否爲校驗手勢密碼
	 * @param passWord 用戶傳入密碼
	 * @param callBack 手勢繪製完畢的回調
	 */
	public GestureContentView(Context context, boolean isVerify, String passWord, GestureCallBack callBack) {
		super(context);
		screenDispaly = AppUtil.getScreenDispaly(context);
		blockWidth = screenDispaly[0]/3;
		this.list = new ArrayList<GesturePoint>();
		this.context = context;
		this.isVerify = isVerify;
		// 添加9個圖標
		addChild();
		// 初始化一個能夠畫線的view
		gestureDrawline = new GestureDrawline(context, list, isVerify, passWord, callBack);
	}

	private void addChild(){
		for (int i = 0; i < 9; i++) {
			ImageView image = new ImageView(context);
			image.setBackgroundResource(R.drawable.gesture_node_normal);
			this.addView(image);
			invalidate();
			// 第幾行
			int row = i / 3;
			// 第幾列
			int col = i % 3;
			// 定義點的每一個屬性
			int leftX = col*blockWidth+blockWidth/baseNum;
			int topY = row*blockWidth+blockWidth/baseNum;
			int rightX = col*blockWidth+blockWidth-blockWidth/baseNum;
			int bottomY = row*blockWidth+blockWidth-blockWidth/baseNum;
			GesturePoint p = new GesturePoint(leftX, rightX, topY, bottomY, image,i+1);
			this.list.add(p);
		}
	}

	public void setParentView(ViewGroup parent){
		// 獲得屏幕的寬度
		int width = screenDispaly[0];
		LayoutParams layoutParams = new LayoutParams(width, width);
		this.setLayoutParams(layoutParams);
		gestureDrawline.setLayoutParams(layoutParams);
		parent.addView(gestureDrawline);
		parent.addView(this);
	}

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		for (int i = 0; i < getChildCount(); i++) {
			//第幾行
			int row = i/3;
			//第幾列
			int col = i%3;
			View v = getChildAt(i);
			v.layout(col*blockWidth+blockWidth/baseNum, row*blockWidth+blockWidth/baseNum,
					col*blockWidth+blockWidth-blockWidth/baseNum, row*blockWidth+blockWidth-blockWidth/baseNum);
		}
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		// 遍歷設置每一個子view的大小
		for (int i = 0; i < getChildCount(); i++) {
			View v = getChildAt(i);
			v.measure(widthMeasureSpec, heightMeasureSpec);
		}
	}

	/**
	 * 保留路徑delayTime時間長
	 * @param delayTime
	 */
	public void clearDrawlineState(long delayTime) {
		gestureDrawline.clearDrawlineState(delayTime);
	}

}
複製代碼

2.頁面交互實現分析微信

設置手勢密碼頁面(GestureEditActivity)app

經過設置手勢路徑轉換成數字密碼，並經過SharedPreferences存儲起來，代碼以下：ide

package demo.gesturepsd.gesturepsd_android;

import android.app.Activity;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.text.Html;
import android.text.TextUtils;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.FrameLayout;
import android.widget.TextView;
import android.widget.Toast;

import demo.gesturepsd.gesturepsd_android.widget.GestureContentView;
import demo.gesturepsd.gesturepsd_android.widget.GestureDrawline.GestureCallBack;
import demo.gesturepsd.gesturepsd_android.widget.LockIndicator;

/**
 *
 * 手勢密碼設置界面
 *
 */
public class GestureEditActivity extends Activity implements OnClickListener {
	/** 手機號碼*/
	public static final String PARAM_PHONE_NUMBER = "PARAM_PHONE_NUMBER";
	/** 意圖 */
	public static final String PARAM_INTENT_CODE = "PARAM_INTENT_CODE";
	/** 首次提示繪製手勢密碼，能夠選擇跳過 */
	public static final String PARAM_IS_FIRST_ADVICE = "PARAM_IS_FIRST_ADVICE";

	private static final String fileName = "logintext";//定義保存的文件的名稱

	private TextView mTextTitle;
	private TextView mTextCancel;
	private LockIndicator mLockIndicator;
	private TextView mTextTip;
	private FrameLayout mGestureContainer;
	private GestureContentView mGestureContentView;
	private TextView mTextReset;
	private String mParamSetUpcode = null;
	private String mParamPhoneNumber;
	private boolean mIsFirstInput = true;
	private String mFirstPassword = null;
	private String mConfirmPassword = null;
	private int mParamIntentCode;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_gesture_edit);
		setUpViews();
		setUpListeners();
	}

	private void setUpViews() {
		mTextTitle = (TextView) findViewById(R.id.text_title);
		mTextCancel = (TextView) findViewById(R.id.text_cancel);
		mTextReset = (TextView) findViewById(R.id.text_reset);
		mTextReset.setClickable(false);
		mLockIndicator = (LockIndicator) findViewById(R.id.lock_indicator);
		mTextTip = (TextView) findViewById(R.id.text_tip);
		mGestureContainer = (FrameLayout) findViewById(R.id.gesture_container);
		// 初始化一個顯示各個點的viewGroup
		mGestureContentView = new GestureContentView(this, false, "", new GestureCallBack() {
			@Override
			public void onGestureCodeInput(String inputCode) {
				if (!isInputPassValidate(inputCode)) {
					mTextTip.setText(Html.fromHtml("<font color='#c70c1e'>最少連接4個點, 請從新輸入</font>"));
					mGestureContentView.clearDrawlineState(0L);
					return;
				}
				if (mIsFirstInput) {
					mFirstPassword = inputCode;
					updateCodeList(inputCode);
					mGestureContentView.clearDrawlineState(0L);
					mTextReset.setClickable(true);
					mTextReset.setText(getString(R.string.reset_gesture_code));
				} else {
					if (inputCode.equals(mFirstPassword)) {
						Toast.makeText(GestureEditActivity.this, "設置成功", Toast.LENGTH_SHORT).show();
						Log.i("charge password", mFirstPassword);

						SharedPreferences share = getSharedPreferences(fileName, MODE_PRIVATE);
						SharedPreferences.Editor editor = share.edit();
						editor.putString("psdtype", mFirstPassword);
						editor.commit();

						mGestureContentView.clearDrawlineState(0L);
						GestureEditActivity.this.finish();
					} else {
						mTextTip.setText(Html.fromHtml("<font color='#c70c1e'>與上一次繪製不一致，請從新繪製</font>"));
						// 左右移動動畫
						Animation shakeAnimation = AnimationUtils.loadAnimation(GestureEditActivity.this, R.anim.shake);
						mTextTip.startAnimation(shakeAnimation);
						// 保持繪製的線，1.5秒後清除
						mGestureContentView.clearDrawlineState(1300L);
					}
				}
				mIsFirstInput = false;
			}

			@Override
			public void checkedSuccess() {

			}

			@Override
			public void checkedFail() {

			}
		});
		// 設置手勢解鎖顯示到哪一個佈局裏面
		mGestureContentView.setParentView(mGestureContainer);
		updateCodeList("");
	}

	private void setUpListeners() {
		mTextCancel.setOnClickListener(this);
		mTextReset.setOnClickListener(this);
	}

	private void updateCodeList(String inputCode) {
		// 更新選擇的圖案
		mLockIndicator.setPath(inputCode);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
			case R.id.text_cancel:
				this.finish();
				break;
			case R.id.text_reset:
				mIsFirstInput = true;
				updateCodeList("");
				mTextTip.setText(getString(R.string.set_gesture_pattern));
				break;
			default:
				break;
		}
	}

	private boolean isInputPassValidate(String inputPassword) {
		if (TextUtils.isEmpty(inputPassword) || inputPassword.length() < 4) {
			return false;
		}
		return true;
	}

}
複製代碼

校驗手勢密碼頁面(GestureVerifyActivity)源碼分析

經過SharedPreferences獲取到設置頁面存儲的密碼與校驗輸入的密碼進行對比，校驗密碼是否正確，源碼以下：佈局

package demo.gesturepsd.gesturepsd_android;

import android.app.Activity;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.text.Html;
import android.text.TextUtils;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import demo.gesturepsd.gesturepsd_android.widget.GestureContentView;
import demo.gesturepsd.gesturepsd_android.widget.GestureDrawline.GestureCallBack;

/**
 *
 * 手勢繪製/校驗界面
 *
 */
public class GestureVerifyActivity extends Activity implements android.view.View.OnClickListener {
	/** 手機號碼*/
	public static final String PARAM_PHONE_NUMBER = "PARAM_PHONE_NUMBER";
	/** 意圖 */
	public static final String PARAM_INTENT_CODE = "PARAM_INTENT_CODE";

	private static final String fileName = "logintext";//定義保存的文件的名稱

	private RelativeLayout mTopLayout;
	private TextView mTextTitle;
	private TextView mTextCancel;
	private ImageView mImgUserLogo;
	private TextView mTextPhoneNumber;
	private TextView mTextTip;
	private FrameLayout mGestureContainer;
	private GestureContentView mGestureContentView;
	private TextView mTextForget;
	private TextView mTextOther;
	private String mParamPhoneNumber;
	private long mExitTime = 0;
	private int mParamIntentCode;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_gesture_verify);
		ObtainExtraData();
		setUpViews();
		setUpListeners();
	}

	private void ObtainExtraData() {
		mParamPhoneNumber = getIntent().getStringExtra(PARAM_PHONE_NUMBER);
		mParamIntentCode = getIntent().getIntExtra(PARAM_INTENT_CODE, 0);
	}

	private void setUpViews() {
		mTopLayout = (RelativeLayout) findViewById(R.id.top_layout);
		mTextTitle = (TextView) findViewById(R.id.text_title);
		mTextCancel = (TextView) findViewById(R.id.text_cancel);
		mImgUserLogo = (ImageView) findViewById(R.id.user_logo);
		mTextPhoneNumber = (TextView) findViewById(R.id.text_phone_number);
		mTextTip = (TextView) findViewById(R.id.text_tip);
		mGestureContainer = (FrameLayout) findViewById(R.id.gesture_container);
		mTextForget = (TextView) findViewById(R.id.text_forget_gesture);
		mTextOther = (TextView) findViewById(R.id.text_other_account);


		SharedPreferences share = super.getSharedPreferences(fileName,
				MODE_PRIVATE);

		String psdtype = share.getString("psdtype", null);

		// 初始化一個顯示各個點的viewGroup
		mGestureContentView = new GestureContentView(this, true, psdtype,
				new GestureCallBack() {

					@Override
					public void onGestureCodeInput(String inputCode) {

					}

					@Override
					public void checkedSuccess() {
						mGestureContentView.clearDrawlineState(0L);
						Toast.makeText(GestureVerifyActivity.this, "密碼正確", 1000).show();
						GestureVerifyActivity.this.finish();
					}

					@Override
					public void checkedFail() {
						mGestureContentView.clearDrawlineState(1300L);
						mTextTip.setVisibility(View.VISIBLE);
						mTextTip.setText(Html
								.fromHtml("<font color='#c70c1e'>密碼錯誤</font>"));
						// 左右移動動畫
						Animation shakeAnimation = AnimationUtils.loadAnimation(GestureVerifyActivity.this, R.anim.shake);
						mTextTip.startAnimation(shakeAnimation);
					}
				});
		// 設置手勢解鎖顯示到哪一個佈局裏面
		mGestureContentView.setParentView(mGestureContainer);
	}

	private void setUpListeners() {
		mTextCancel.setOnClickListener(this);
		mTextForget.setOnClickListener(this);
		mTextOther.setOnClickListener(this);
	}

	private String getProtectedMobile(String phoneNumber) {
		if (TextUtils.isEmpty(phoneNumber) || phoneNumber.length() < 11) {
			return "";
		}
		StringBuilder builder = new StringBuilder();
		builder.append(phoneNumber.subSequence(0,3));
		builder.append("****");
		builder.append(phoneNumber.subSequence(7,11));
		return builder.toString();
	}



	@Override
	public void onClick(View v) {
		switch (v.getId()) {
			case R.id.text_cancel:
				this.finish();
				break;
			default:
				break;
		}
	}

}
複製代碼

主頁面(MainActivity)

主頁面是設置手勢密碼和校驗手勢密碼的兩個按鈕，源碼比較簡單，不作展現。

四：Demo 截圖

設置手勢密碼

校驗手勢密碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程