package com.example.liuan.jiugongge;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;/*** 图案解锁* Name: LockPatternView* Author: liuan* creatTime:2017-01-11 20:45*/public class LockPatternView extends View {// 正常状态的颜色private static final int SELECTED_COLOR = 0xFF979797;// 正常状态的颜色private static final int NORMAL_COLOR = 0xFF70DBDB;private Paint mCiclePaint;private Paint mLinePoaint;private float mRadius;//圆心数组private PointView[][] mPointViewArray = new PointView[3][3];//保存选中点的集合private List<PointView> mSelectedPointViewList;//解锁团的边长private int mPatternWidth;//每个圆圈的下标private int mIndex = 1;//正在滑动 并且没有任何点选中private boolean mIsMovingWithoutCircle = false;//是否绘制结束private boolean mIsFinsihed;private float mCurrentX, mCurrentY;//图案监听器private OnPatternChangeListener mOnPatternChangeListener;//第一个点是否选中private boolean mIsSelected;public LockPatternView(Context context) {this(context, null);}public LockPatternView(Context context, AttributeSet attrs) {super(context, attrs);//圆的画笔mCiclePaint = new Paint();mCiclePaint.setAntiAlias(true);mCiclePaint.setDither(true);mCiclePaint.setColor(NORMAL_COLOR);mCiclePaint.setStyle(Paint.Style.FILL);//线的画笔mLinePoaint = new Paint();mLinePoaint.setAntiAlias(true);mLinePoaint.setDither(true);mLinePoaint.setStrokeWidth(20);mLinePoaint.setColor(SELECTED_COLOR);mLinePoaint.setStyle(Paint.Style.STROKE);mRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());mSelectedPointViewList = new ArrayList<>();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);//获取屏幕长和宽中的较小值作为图案的边长mPatternWidth = Math.min(getMeasuredHeight(), getMeasuredWidth());setMeasuredDimension(mPatternWidth, mPatternWidth);}@Overrideprotected void onDraw(Canvas canvas) {//画圆drawCicle(canvas);//将选中的圆 重新绘制一遍  将选中的点和未选中的点区别开来for (PointView pointView : mSelectedPointViewList) {mCiclePaint.setColor(SELECTED_COLOR);canvas.drawCircle(pointView.x, pointView.y, mRadius, mCiclePaint);//每重新绘制一个，将画笔的颜色重置 保证不会影响到其他圆的绘制mCiclePaint.setColor(NORMAL_COLOR);}//点与点画线if (mSelectedPointViewList.size() > 0) {//第一个选中的点为A点Point pointViewA = mSelectedPointViewList.get(0);for (int i = 0; i < mSelectedPointViewList.size(); i++) {//其余的点为B点Point pointViewB = mSelectedPointViewList.get(i);drawLine(canvas, pointViewA, pointViewB);pointViewA = pointViewB;}//点于鼠标当前位置绘制轨迹if (mIsMovingWithoutCircle & !mIsFinsihed) {drawLine(canvas, pointViewA, new PointView((int) mCurrentX, (int) mCurrentY));}}super.onDraw(canvas);}private void drawCicle(Canvas 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, mCiclePaint);mIndex++;}}mIndex = 1;}private void drawLine(Canvas canvas, Point pointA, Point pointB) {canvas.drawLine(pointA.x, pointA.y, pointB.x, pointB.y, mLinePoaint);}@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();mIsFinsihed = 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:mIsFinsihed = true;mIsSelected = false;break;}//将选中的点收藏起来if (!mIsFinsihed && mIsSelected && selectedPointView != null) {if (!mSelectedPointViewList.contains(selectedPointView)) {mSelectedPointViewList.add(selectedPointView);}}if (mIsFinsihed) {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;}private boolean isWithInCircle(float mCurrentX, float mCurrentY, int x, int y, float mRadius) {//如果点和圆心的距离 小于半径，则证明在圆内if (Math.sqrt(Math.pow(x - mCurrentX, 2) + Math.pow(y - mCurrentY, 2)) < mRadius) {return true;}return false;}public void setOnPatternChangeListener(OnPatternChangeListener onPatternChangeListener) {if (onPatternChangeListener != null) {this.mOnPatternChangeListener = onPatternChangeListener;}}/*** 图案监听器*/public interface OnPatternChangeListener {//图案改变 图案密码patternPasswordvoid onPatternChange(String patternPassword);//图案是否重新绘制void onPatternStarted(boolean isStarted);}
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"
android:orientation="vertical"tools:context="com.example.liuan.jiugongge.MainActivity"><TextViewandroid:layout_gravity="center"android:id="@+id/text"android:textColor="#18b968"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="状态显示" /><com.example.liuan.jiugongge.LockPatternViewandroid:clickable="true"android:id="@+id/lock_pattern_view"android:layout_weight="1"android:layout_width="match_parent"android:layout_height="0dp" />
</LinearLayout>