<com.xing.androidsample.view.LockView  android:id="@+id/lock_view"  app:rowCount="4"  app:normalColor=""  app:moveColor=""  app:errorColor=""  android:layout_width="match_parent"  android:layout_height="match_parent"  android:layout_margin="40dp" />

List<Integer> intList = new ArrayList<>();  intList.add(3);  intList.add(7);  intList.add(4);  intList.add(2);  lockView.setStandard(intList);  lockView.setOnDrawCompleteListener(new LockView.OnDrawCompleteListener() {   @Override   public void onComplete(boolean isSuccess) {    Toast.makeText(CustomViewActivity.this, isSuccess ? "success" : "fail", Toast.LENGTH_SHORT).show();   }  });

<?xml version="1.0" encoding="utf-8"?><resources> <declare-styleable name="LockView">  <attr name="normalColor" format="color|reference" /> <!--默認(rèn)圓顏色-->  <attr name="moveColor" format="color|reference" />  <!--手指觸摸選中圓顏色-->   <attr name="errorColor" format="color|reference" />  <!--手指抬起錯(cuò)誤圓顏色-->   <attr name="rowCount" format="integer" />    <!--每行每列圓的個(gè)數(shù)-->  </declare-styleable></resources>

public LockView(Context context) {   this(context, null);  }  public LockView(Context context, @Nullable AttributeSet attrs) {   super(context, attrs);   readAttrs(context, attrs);   init();  } /** * 獲取自定義屬性 */  private void readAttrs(Context context, AttributeSet attrs) {   TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LockView);   normalColor = typedArray.getColor(R.styleable.LockView_normalColor, DEFAULT_NORMAL_COLOR);   moveColor = typedArray.getColor(R.styleable.LockView_moveColor, DEFAULT_MOVE_COLOR);   errorColor = typedArray.getColor(R.styleable.LockView_errorColor, DEFAULT_ERROR_COLOR);   rowCount = typedArray.getInteger(R.styleable.LockView_rowCount, DEFAULT_ROW_COUNT);   typedArray.recycle();  } /** * 初始化 */  private void init() {   stateSparseArray = new SparseIntArray(rowCount * rowCount);   points = new PointF[rowCount * rowCount];   innerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);   innerCirclePaint.setStyle(Paint.Style.FILL);   outerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);   outerCirclePaint.setStyle(Paint.Style.FILL);   linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);   linePaint.setStyle(Paint.Style.STROKE);   linePaint.setStrokeCap(Paint.Cap.ROUND);   linePaint.setStrokeJoin(Paint.Join.ROUND);   linePaint.setStrokeWidth(30);   linePaint.setColor(moveColor);  }

radius = Math.min(w, h) / (2 * rowCount + rowCount - 1) * 1.0f;

// 各個(gè)圓設(shè)置坐標(biāo)點(diǎn)for (int i = 0; i < rowCount * rowCount; i++) {  points[i] = new PointF(0, 0);  points[i].set((i % rowCount * 3 + 1) * radius, (i / rowCount * 3 + 1) * radius);}

 @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  super.onMeasure(widthMeasureSpec, heightMeasureSpec);  int width = getSize(widthMeasureSpec);  int height = getSize(heightMeasureSpec);  setMeasuredDimension(width, height); } private int getSize(int measureSpec) {  int mode = MeasureSpec.getMode(measureSpec);  int size = MeasureSpec.getSize(measureSpec);  if (mode == MeasureSpec.EXACTLY) {   return size;  } else if (mode == MeasureSpec.AT_MOST) {   return Math.min(size, dp2Px(600));  }  return dp2Px(600); }

private PointF touchPoint; @Override public boolean onTouchEvent(MotionEvent event) {  switch (event.getAction()) {   case MotionEvent.ACTION_DOWN:    reset();   case MotionEvent.ACTION_MOVE:    if (touchPoint == null) {     touchPoint = new PointF(event.getX(), event.getY());    } else {     touchPoint.set(event.getX(), event.getY());    }    for (int i = 0; i < rowCount * rowCount; i++) {     // 是否觸摸在圓的范圍內(nèi)     if (getDistance(touchPoint, points[i]) < radius) {      stateSparseArray.put(i, STATE_MOVE);      if (!selectedList.contains(points[i])) {       selectedList.add(points[i]);      }      break;     }    }    break;   case MotionEvent.ACTION_UP:    if (check()) { // 正確圖案     if (listener != null) {      listener.onComplete(true);     }     for (int i = 0; i < stateSparseArray.size(); i++) {      int index = stateSparseArray.keyAt(i);      stateSparseArray.put(index, STATE_MOVE);     }    } else {  // 錯(cuò)誤圖案     for (int i = 0; i < stateSparseArray.size(); i++) {      int index = stateSparseArray.keyAt(i);      stateSparseArray.put(index, STATE_ERROR);     }     linePaint.setColor(0xeeff0000);     if (listener != null) {      listener.onComplete(false);     }    }    touchPoint = null;    if (timer == null) {     timer = new Timer();    }    timer.schedule(new TimerTask() {     @Override     public void run() {      linePath.reset();      linePaint.setColor(0xee0000ff);      selectedList.clear();      stateSparseArray.clear();      postInvalidate();     }    }, 1000);    break;  }  invalidate();  return true; }

@Override protected void onDraw(Canvas canvas) {  super.onDraw(canvas);  drawCircle(canvas);  drawLinePath(canvas); } private void drawCircle(Canvas canvas) {  // 依次從索引 0 到索引 8，根據(jù)不同狀態(tài)繪制圓點(diǎn)  for (int index = 0; index < rowCount * rowCount; index++) {   int state = stateSparseArray.get(index);   switch (state) {    case STATE_NORMAL:     innerCirclePaint.setColor(normalColor);     outerCirclePaint.setColor(normalColor & 0x66ffffff);     break;    case STATE_MOVE:     innerCirclePaint.setColor(moveColor);     outerCirclePaint.setColor(moveColor & 0x66ffffff);     break;    case STATE_ERROR:     innerCirclePaint.setColor(errorColor);     outerCirclePaint.setColor(errorColor & 0x66ffffff);     break;   }   canvas.drawCircle(points[index].x, points[index].y, radius, outerCirclePaint);   canvas.drawCircle(points[index].x, points[index].y, radius / 2f, innerCirclePaint);  } }

/** * Created by star.tao on 2018/5/30. * email: xing-java@foxmail.com * github: https://github.com/xing16 */public class LockView extends View { private static final int DEFAULT_NORMAL_COLOR = 0xee776666; private static final int DEFAULT_MOVE_COLOR = 0xee0000ff; private static final int DEFAULT_ERROR_COLOR = 0xeeff0000; private static final int DEFAULT_ROW_COUNT = 3; private static final int STATE_NORMAL = 0; private static final int STATE_MOVE = 1; private static final int STATE_ERROR = 2; private int normalColor; // 無(wú)滑動(dòng)默認(rèn)顏色 private int moveColor; // 滑動(dòng)選中顏色 private int errorColor; // 錯(cuò)誤顏色 private float radius; // 外圓半徑 private int rowCount; private PointF[] points; // 一維數(shù)組記錄所有圓點(diǎn)的坐標(biāo)點(diǎn) private Paint innerCirclePaint; // 內(nèi)圓畫(huà)筆 private Paint outerCirclePaint; // 外圓畫(huà)筆 private SparseIntArray stateSparseArray; private List<PointF> selectedList = new ArrayList<>(); private List<Integer> standardPointsIndexList = new ArrayList<>(); private Path linePath = new Path(); // 手指移動(dòng)的路徑 private Paint linePaint; private Timer timer; public LockView(Context context) {  this(context, null); } public LockView(Context context, @Nullable AttributeSet attrs) {  super(context, attrs);  readAttrs(context, attrs);  init(); } private void readAttrs(Context context, AttributeSet attrs) {  TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LockView);  normalColor = typedArray.getColor(R.styleable.LockView_normalColor, DEFAULT_NORMAL_COLOR);  moveColor = typedArray.getColor(R.styleable.LockView_moveColor, DEFAULT_MOVE_COLOR);  errorColor = typedArray.getColor(R.styleable.LockView_errorColor, DEFAULT_ERROR_COLOR);  rowCount = typedArray.getInteger(R.styleable.LockView_rowCount, DEFAULT_ROW_COUNT);  typedArray.recycle(); } private void init() {  stateSparseArray = new SparseIntArray(rowCount * rowCount);  points = new PointF[rowCount * rowCount];  innerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);  innerCirclePaint.setStyle(Paint.Style.FILL);  outerCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);  outerCirclePaint.setStyle(Paint.Style.FILL);  linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);  linePaint.setStyle(Paint.Style.STROKE);  linePaint.setStrokeCap(Paint.Cap.ROUND);  linePaint.setStrokeJoin(Paint.Join.ROUND);  linePaint.setStrokeWidth(30);  linePaint.setColor(moveColor); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) {  super.onSizeChanged(w, h, oldw, oldh);  // 外圓半徑 = 相鄰?fù)鈭A之間間距 = 2倍內(nèi)圓半徑  radius = Math.min(w, h) / (2 * rowCount + rowCount - 1) * 1.0f;  // 各個(gè)圓設(shè)置坐標(biāo)點(diǎn)  for (int i = 0; i < rowCount * rowCount; i++) {   points[i] = new PointF(0, 0);   points[i].set((i % rowCount * 3 + 1) * radius, (i / rowCount * 3 + 1) * radius);  } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  super.onMeasure(widthMeasureSpec, heightMeasureSpec);  int width = getSize(widthMeasureSpec);  int height = getSize(heightMeasureSpec);  setMeasuredDimension(width, height); } private int getSize(int measureSpec) {  int mode = MeasureSpec.getMode(measureSpec);  int size = MeasureSpec.getSize(measureSpec);  if (mode == MeasureSpec.EXACTLY) {   return size;  } else if (mode == MeasureSpec.AT_MOST) {   return Math.min(size, dp2Px(600));  }  return dp2Px(600); } @Override protected void onDraw(Canvas canvas) {  super.onDraw(canvas);  drawCircle(canvas);  drawLinePath(canvas); } private void drawCircle(Canvas canvas) {  // 依次從索引 0 到索引 8，根據(jù)不同狀態(tài)繪制圓點(diǎn)  for (int index = 0; index < rowCount * rowCount; index++) {   int state = stateSparseArray.get(index);   switch (state) {    case STATE_NORMAL:     innerCirclePaint.setColor(normalColor);     outerCirclePaint.setColor(normalColor & 0x66ffffff);     break;    case STATE_MOVE:     innerCirclePaint.setColor(moveColor);     outerCirclePaint.setColor(moveColor & 0x66ffffff);     break;    case STATE_ERROR:     innerCirclePaint.setColor(errorColor);     outerCirclePaint.setColor(errorColor & 0x66ffffff);     break;   }   canvas.drawCircle(points[index].x, points[index].y, radius, outerCirclePaint);   canvas.drawCircle(points[index].x, points[index].y, radius / 2f, innerCirclePaint);  } } /**  * 繪制選中點(diǎn)之間相連的路徑  *  * @param canvas  */ private void drawLinePath(Canvas canvas) {  // 重置linePath  linePath.reset();  // 選中點(diǎn)個(gè)數(shù)大于 0 時(shí)，才繪制連接線段  if (selectedList.size() > 0) {   // 起點(diǎn)移動(dòng)到按下點(diǎn)位置   linePath.moveTo(selectedList.get(0).x, selectedList.get(0).y);   for (int i = 1; i < selectedList.size(); i++) {    linePath.lineTo(selectedList.get(i).x, selectedList.get(i).y);   }   // 手指抬起時(shí)，touchPoint設(shè)置為null,使得已經(jīng)繪制游離的路徑，消失掉，   if (touchPoint != null) {    linePath.lineTo(touchPoint.x, touchPoint.y);   }   canvas.drawPath(linePath, linePaint);  } } private PointF touchPoint; @Override public boolean onTouchEvent(MotionEvent event) {  switch (event.getAction()) {   case MotionEvent.ACTION_DOWN:    reset();   case MotionEvent.ACTION_MOVE:    if (touchPoint == null) {     touchPoint = new PointF(event.getX(), event.getY());    } else {     touchPoint.set(event.getX(), event.getY());    }    for (int i = 0; i < rowCount * rowCount; i++) {     // 是否觸摸在圓的范圍內(nèi)     if (getDistance(touchPoint, points[i]) < radius) {      stateSparseArray.put(i, STATE_MOVE);      if (!selectedList.contains(points[i])) {       selectedList.add(points[i]);      }      break;     }    }    break;   case MotionEvent.ACTION_UP:    if (check()) { // 正確圖案     if (listener != null) {      listener.onComplete(true);     }     for (int i = 0; i < stateSparseArray.size(); i++) {      int index = stateSparseArray.keyAt(i);      stateSparseArray.put(index, STATE_MOVE);     }    } else {  // 錯(cuò)誤圖案     for (int i = 0; i < stateSparseArray.size(); i++) {      int index = stateSparseArray.keyAt(i);      stateSparseArray.put(index, STATE_ERROR);     }     linePaint.setColor(0xeeff0000);     if (listener != null) {      listener.onComplete(false);     }    }    touchPoint = null;    if (timer == null) {     timer = new Timer();    }    timer.schedule(new TimerTask() {     @Override     public void run() {      linePath.reset();      linePaint.setColor(0xee0000ff);      selectedList.clear();      stateSparseArray.clear();      postInvalidate();     }    }, 1000);    break;  }  invalidate();  return true; } /**  * 清除繪制圖案的條件，當(dāng)觸發(fā) invalidate() 時(shí)將清空?qǐng)D案  */ private void reset() {  touchPoint = null;  linePath.reset();  linePaint.setColor(0xee0000ff);  selectedList.clear();  stateSparseArray.clear(); } public void onStop() {  timer.cancel(); } private boolean check() {  if (selectedList.size() != standardPointsIndexList.size()) {   return false;  }  for (int i = 0; i < standardPointsIndexList.size(); i++) {   Integer index = standardPointsIndexList.get(i);   if (points[index] != selectedList.get(i)) {    return false;   }  }  return true; } public void setStandard(List<Integer> pointsList) {  if (pointsList == null) {   throw new IllegalArgumentException("standard points index can't null");  }  if (pointsList.size() > rowCount * rowCount) {   throw new IllegalArgumentException("standard points index list can't large to rowcount * columncount");  }  standardPointsIndexList = pointsList; } private OnDrawCompleteListener listener; public void setOnDrawCompleteListener(OnDrawCompleteListener listener) {  this.listener = listener; } public interface OnDrawCompleteListener {  void onComplete(boolean isSuccess); } private float getDistance(PointF centerPoint, PointF downPoint) {  return (float) Math.sqrt(Math.pow(centerPoint.x - downPoint.x, 2) + Math.pow(centerPoint.y - downPoint.y, 2)); } private int dp2Px(int dpValue) {  return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, getResources().getDisplayMetrics()); }}