Android实现九宫格图案解锁，自带将图案转化成数字密码的功能，代码如下：
LockPatternView.java
package com.jackie.lockpattern;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Point;import android.text.TextUtils;import android.util.AttributeSet;import android.util.TypedValue;import android.view.MotionEvent;import android.view.View;import java.util.ArrayList;import java.util.List;/*** Created by Jackie on /12/24.* 图案解锁*/public class LockPatternView extends View {/*** 圆的画笔*/private Paint mCirclePaint;/*** 线的画笔*/private Paint mLinePaint;/*** 圆心数组*/private PointView[][] mPointViewArray = new PointView[3][3];/*** 保存选中点的集合*/private List<PointView> mSelectedPointViewList;/*** 解锁图案的边长*/private int mPatternWidth;/*** 图案监听器*/private OnPatternChangeListener mOnPatternChangeListener;/*** 半径*/private float mRadius;/*** 每个圆圈的下标*/private int mIndex = 1;/*** 第一个点是否选中*/private boolean mIsSelected;/*** 是否绘制结束*/private boolean mIsFinished;/*** 正在滑动并且没有任何点选中*/private boolean mIsMovingWithoutCircle = false;private float mCurrentX, mCurrentY;/*** 正常状态的颜色*/private static final int NORMAL_COLOR = 0xFF70DBDB;/*** 选中状态的颜色*/private static final int SELECTED_COLOR = 0xFF979797;public LockPatternView(Context context) {this(context, null);}public LockPatternView(Context context, AttributeSet attrs) {super(context, attrs);mCirclePaint = new Paint();mCirclePaint.setAntiAlias(true);mCirclePaint.setDither(true);mCirclePaint.setColor(NORMAL_COLOR);mCirclePaint.setStyle(Paint.Style.FILL);mLinePaint = new Paint();mLinePaint.setAntiAlias(true);mLinePaint.setDither(true);mLinePaint.setStrokeWidth(20);mLinePaint.setColor(SELECTED_COLOR);mLinePaint.setStyle(Paint.Style.STROKE);mRadius = TypedValue.applyDimension(PLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());mSelectedPointViewList = new ArrayList<>();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);//取屏幕长和宽中的较小值作为图案的边长mPatternWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());setMeasuredDimension(mPatternWidth, mPatternWidth);}@Overrideprotected void onDraw(Canvas canvas) {//画圆drawCircle(canvas);//将选中的圆重新绘制一遍，将选中的点和未选中的点区别开来for (PointView pointView : mSelectedPointViewList) {mCirclePaint.setColor(SELECTED_COLOR);canvas.drawCircle(pointView.x, pointView.y, mRadius, mCirclePaint);mCirclePaint.setColor(NORMAL_COLOR); //每重新绘制一个,将画笔的颜色重置,保证不会影响其他圆的绘制}//点与点画线if (mSelectedPointViewList.size() > 0) {Point pointViewA = mSelectedPointViewList.get(0); //第一个选中的点为A点for (int i = 0; i < mSelectedPointViewList.size(); i++) {Point pointViewB = mSelectedPointViewList.get(i); //其他依次遍历出来的点为B点drawLine(canvas, pointViewA, pointViewB);pointViewA = pointViewB;}//点与鼠标当前位置绘制轨迹if (mIsMovingWithoutCircle & !mIsFinished) {drawLine(canvas, pointViewA, new PointView((int)mCurrentX, (int)mCurrentY));}}super.onDraw(canvas);}/*** 画圆* @param canvas 画布*/private void drawCircle(Canvas canvas) {//初始化点的位置for (int i = 0; i < mPointViewArray.length; i++) {for (int j = 0; j < mPointViewArray.length; j++) {//圆心的坐标int cx = mPatternWidth / 4 * (j + 1);int cy = mPatternWidth / 4 * (i + 1);//将圆心放在一个点数组中PointView pointView = new PointView(cx, cy);pointView.setIndex(mIndex);mPointViewArray[i][j] = pointView;canvas.drawCircle(cx, cy, mRadius, mCirclePaint);mIndex++;}}mIndex = 1;}/*** 画线* @param canvas 画布* @param pointA 第一个点* @param pointB 第二个点*/private void drawLine(Canvas canvas, Point pointA, Point pointB) {canvas.drawLine(pointA.x, pointA.y, pointB.x, pointB.y, mLinePaint);}@Overridepublic boolean onTouchEvent(MotionEvent event) {mCurrentX = event.getX();mCurrentY = event.getY();PointView selectedPointView = null;switch(event.getAction()) {case MotionEvent.ACTION_DOWN://重新绘制if (mOnPatternChangeListener != null) {mOnPatternChangeListener.onPatternStarted(true);}mSelectedPointViewList.clear();mIsFinished = false;selectedPointView = checkSelectPoint();if (selectedPointView != null) {//第一次按下的位置在圆内，被选中mIsSelected = true;}break;case MotionEvent.ACTION_MOVE:if (mIsSelected) {selectedPointView = checkSelectPoint();}if (selectedPointView == null) {mIsMovingWithoutCircle = true;}break;case MotionEvent.ACTION_UP:mIsFinished = true;mIsSelected = false;break;}//将选中的点收集起来if (!mIsFinished && mIsSelected && selectedPointView != null) {if (!mSelectedPointViewList.contains(selectedPointView)) {mSelectedPointViewList.add(selectedPointView);}}if (mIsFinished) {if (mSelectedPointViewList.size() == 1) {mSelectedPointViewList.clear();} else if (mSelectedPointViewList.size() < 5 && mSelectedPointViewList.size() > 0) {//绘制错误if (mOnPatternChangeListener != null) {mOnPatternChangeListener.onPatternChange(null);}} else {//绘制成功String patternPassword = "";if (mOnPatternChangeListener != null) {for (PointView pointView : mSelectedPointViewList) {patternPassword += pointView.getIndex();}if (!TextUtils.isEmpty(patternPassword)) {mOnPatternChangeListener.onPatternChange(patternPassword);}}}}invalidate();return true;}/*** 判断当前按下的位置是否在圆心数组中* @return 返回选中的点*/private PointView checkSelectPoint() {for (int i = 0; i < mPointViewArray.length; i++) {for (int j = 0; j < mPointViewArray.length; j++) {PointView pointView = mPointViewArray[i][j];if (isWithinCircle(mCurrentX, mCurrentY, pointView.x, pointView.y, mRadius)) {return pointView;}}}return null;}/*** 判断点是否在圆内* @param x点X轴坐标* @param y点Y轴坐标* @param cx圆心X坐标* @param cy圆心Y坐标* @param radius 半径* @return true表示在圆内，false表示在圆外*/private boolean isWithinCircle(float x, float y, float cx, float cy, float radius) {//如果点和圆心的距离小于半径，则证明点在圆内if (Math.sqrt(Math.pow(x - cx, 2) + Math.pow(y- cy, 2)) <= radius) {return true;}return false;}/*** 设置图案监听器*/public void setOnPatternChangeListener(OnPatternChangeListener onPatternChangeListener) {if (onPatternChangeListener != null) {this.mOnPatternChangeListener = onPatternChangeListener;}}/*** 图案监听器*/public interface OnPatternChangeListener {/*** 图案改变* @param patternPassword 图案密码*/void onPatternChange(String patternPassword);/*** 图案是否重新绘制* @param isStarted 重新绘制*/void onPatternStarted(boolean isStarted);}}
PointView.java
package com.jackie.lockpattern;import android.graphics.Point;/*** Created by Jackie on /12/25.* 自定义点对象*/public class PointView extends Point {//用于转化密码的下标public int index;public PointView(int x, int y) {super(x, y);}public int getIndex() {return index;}public void setIndex(int index) {this.index = index;}}
MainActivity.java
package com.jackie.lockpattern;import android.app.Activity;import android.os.Bundle;import android.widget.TextView;public class MainActivity extends Activity implements LockPatternView.OnPatternChangeListener {private TextView mLockPatternHint;private LockPatternView mLockPatternView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mLockPatternHint = (TextView) findViewById(R.id.lock_pattern_hint);mLockPatternView = (LockPatternView) findViewById(R.id.lock_pattern_view);mLockPatternView.setOnPatternChangeListener(this);}@Overridepublic void onPatternChange(String patternPassword) {if (patternPassword == null) {mLockPatternHint.setText("至少5个点");} else {mLockPatternHint.setText(patternPassword);}}@Overridepublic void onPatternStarted(boolean isStarted) {if (isStarted) {mLockPatternHint.setText("请绘制图案");}}}
效果图如下：
附上源码地址：
/shineflower/LockPattern.git
