怎么在Android中通過自定義View實現(xiàn)九宮格手勢密碼解鎖

這篇文章將為大家詳細講解有關(guān)怎么在Android中通過自定義View實現(xiàn)九宮格手勢密碼解鎖，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

具體實現(xiàn)： 

首先我們得繪制出默認正常狀態(tài)下的九個點：

/**
 * 點的bean
 * Created by Administrator on 2015/9/21.
 */
public class Point {

 // 正常狀態(tài)
 public static final int STATE_NORMAL = 1;
 // 按下狀態(tài)
 public static final int STATE_PRESS = 2;
 // 錯誤狀態(tài)
 public static final int STATE_ERROR = 3;

 float x;
 float y;
 int state = STATE_NORMAL;

 public Point(float x, float y){
  this.x = x;
  this.y = y;
 }

 /**
  * 計算兩點間的距離
  * @param a 另外一個點
  * @return
  */
 public float getInstance(Point a){
  return (float) Math.sqrt((x-a.x)*(x-a.x) + (y-a.y)*(y-a.y));
 }
}

可以看到，給一個點定義了x、y值以及這個點的狀態(tài)有三種，默認的初始狀態(tài)是正常的狀態(tài)。

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
 super.onSizeChanged(w, h, oldw, oldh);
 init();// 初始化正常狀態(tài)下的九個點，以及三種狀態(tài)所需要用到的圖片資源
}

private void init() {
  mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  mPressPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  mErrorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  // 按下狀態(tài)的畫筆
  mPressPaint.setColor(Color.parseColor("#00B7EE"));
  mPressPaint.setStrokeWidth(7);
  // 錯誤狀態(tài)的畫筆
  mErrorPaint.setColor(Color.parseColor("#FB0C13"));
  mErrorPaint.setStrokeWidth(7);

  // 加載三種狀態(tài)圖片
  mNormalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.lock_point_normal);
  mPressBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.lock_point_press);
  mErrorBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.lock_point_error);
  mPointRadius = mNormalBitmap.getWidth() / 2;

  // 當前視圖的大小
  int width = getWidth();
  int height = getHeight();
  // 九宮格點的偏移量
  int offSet = Math.abs(width - height) / 2;
  // x、y軸上的偏移量
  int offSetX = 0, offSetY = 0;
  int pointItemWidth = 0; // 每個點所占用方格的寬度
  if (width > height){ // 橫屏的時候
   offSetX = offSet;
   offSetY = 0;
   pointItemWidth = height / 4;
  }
  if (width < height){ // 豎屏的時候
   offSetX = 0;
   offSetY = offSet;
   pointItemWidth = width / 4;
  }

  // 初始化九個點
  mPoints[0][0] = new Point(offSetX + pointItemWidth, offSetY + pointItemWidth);
  mPoints[0][1] = new Point(offSetX + pointItemWidth * 2, offSetY + pointItemWidth);
  mPoints[0][2] = new Point(offSetX + pointItemWidth * 3, offSetY + pointItemWidth);

  mPoints[1][0] = new Point(offSetX + pointItemWidth, offSetY + pointItemWidth * 2);
  mPoints[1][1] = new Point(offSetX + pointItemWidth * 2, offSetY + pointItemWidth * 2);
  mPoints[1][2] = new Point(offSetX + pointItemWidth * 3, offSetY + pointItemWidth * 2);

  mPoints[2][0] = new Point(offSetX + pointItemWidth, offSetY + pointItemWidth * 3);
  mPoints[2][1] = new Point(offSetX + pointItemWidth * 2, offSetY + pointItemWidth * 3);
  mPoints[2][2] = new Point(offSetX + pointItemWidth * 3, offSetY + pointItemWidth * 3);
 }

這段代碼要注意的是橫豎屏的偏移量，橫屏的時候計算X軸的偏移量，豎屏的時候計算Y軸的偏移量。計算出x y的偏移量后，來初始化九個點的位置。我們要讓九宮格的點繪制的位置在 當前這個自定義視圖View的正中間，那么如上圖顯示，第一個點的起始點就是x = x軸的偏移量 + 格子寬度， y = y軸的偏移量 + 格子寬度。以此可見第二列的點的x值 = 兩個格子的寬度 + x軸的偏移量，同理第二行的點的y值 = 兩個格子的寬度 + y周的偏移量。以此類推初始化九個點的位置。

九個點的位置初始化后，我們需要來繪制九個點，這里我用了三種狀態(tài)的圖片來作為頂點。在init()方法中，初始化了三種bitmap圖片對象。以及計算了點的半徑也就是圖片的一半，當然我這里的三張圖片大小是一樣的。如果不一樣，還是要重新計算過。

接下來就在onDraw方法里繪制出九個點：

@Override
 protected void onDraw(Canvas canvas) {

  // 繪制點
  drawPoints(canvas);

  // 繪制連線
  drawLines(canvas);
 }

 /**
  * 繪制所有的點
  * @param canvas
  */
 private void drawPoints(Canvas canvas){
  for (int i = 0; i < mPoints.length; i++){
   for (int j = 0; j < mPoints[i].length; j++){
    Point point = mPoints[i][j];
    // 不同狀態(tài)繪制點
    switch (point.state){
     case Point.STATE_NORMAL:
      canvas.drawBitmap(mNormalBitmap, point.x - mPointRadius, point.y - mPointRadius, mPaint);
      break;
     case Point.STATE_PRESS:
      canvas.drawBitmap(mPressBitmap, point.x - mPointRadius, point.y - mPointRadius, mPaint);
      break;
     case Point.STATE_ERROR:
      canvas.drawBitmap(mErrorBitmap, point.x - mPointRadius, point.y - mPointRadius, mPaint);
      break;
    }
   }
  }
 }

我們變量初始化好的九個點對象的狀態(tài)，不同狀態(tài)繪制不同的圖片。這里繪制的時候要注意初始化點的時候的x、y值是包括了點圓的半徑的，而繪制圖片又是從左上角開始的，所以在繪制的時候需要減去圖片本身的半徑。

繪制后默認的九個點后，我們接下來處理手勢滑動，覆寫onTouchEvent方法：

 /**
  * 獲取選擇的點的位置
  * @return
  */
 private int[] getSelectedPointPosition(){
  Point point = new Point(mX, mY);
  for (int i = 0; i < mPoints.length; i++) {
   for (int j = 0; j < mPoints[i].length; j++) {
    // 判斷觸摸的點和遍歷的當前點的距離是否小于當個點的半徑
    if(mPoints[i][j].getInstance(point) < mPointRadius){
     // 小于則獲取作為被選中，并返回選中點的位置
     int[] result = new int[2];
     result[0] = i;
     result[1] = j;
     return result;
    }
   }
  }
  return null;
 }

首先我們要判斷手指點擊的位置是否是在點上，獲取屏幕觸摸的點的位置mX、mY，初始化一個點，然后遍歷所有的點與觸摸點的距離 是否 小于 一個點的圖片的半徑，如果小于表示觸摸的位置在這九個點中的一個上。getInstance(point)是計算兩點之間的距離的方法。公式是：distance = Math.sqrt((x1 - x2)(x1 - x2) + (y1 - y2) (y1 - y2))。如果是觸摸的位置在點上，那就返回這個點的在九宮格數(shù)組中的下標位置。

我們來看onTouchEvent方法：

@Override
 public boolean onTouchEvent(MotionEvent event) {
  // 獲取手指觸摸的xy位置
  mX = event.getX();
  mY = event.getY();
  int[] position;
  int i, j;
  switch (event.getAction()){
   case MotionEvent.ACTION_DOWN:
    // 重置所有的點
    resetPoints();
    // 獲取選擇的點的位置
    position = getSelectedPointPosition();
    if (position != null){
     isDraw = true; // 標記為繪制狀態(tài)
     i = position[0];
     j = position[1];
     mPoints[i][j].state = Point.STATE_PRESS;
     // 被選擇的點存入一個集合中
     mSelectedPoints.add(mPoints[i][j]);
     mPassPositions.add(i * 3 + j); // 把選中的點的路徑轉(zhuǎn)換成一位數(shù)組存儲起來
    }
    break;
   case MotionEvent.ACTION_MOVE:
    if (isDraw){
     position = getSelectedPointPosition();
     if (position != null){
      i = position[0];
      j = position[1];
      if (!mSelectedPoints.contains(mPoints[i][j])){
       mPoints[i][j].state = Point.STATE_PRESS;
       mSelectedPoints.add(mPoints[i][j]);
       mPassPositions.add(i * 3 + j);
      }
     }
    }
    break;
   case MotionEvent.ACTION_UP:
    // 標記為不在繪制
    isDraw = false;
    break;
  }
  // 更新繪制視圖
  invalidate();
  return true;
 }

按下的時候堅持到觸摸的位置就在點上的時候，就把這個點的狀態(tài)改成被按下的狀態(tài)，同時存入到mSelectedPoints被選中點的集合中。并標記現(xiàn)在是繪制的狀態(tài)下。同樣在移動手指的時候也是把檢測到的點存儲起來，修改狀態(tài)為按下。當手指離開屏幕的時候，把標記改為不在繪制。然后通過invalidate()方法更新視圖（會去調(diào)用onDraw方法繪制）。
通過上面的步驟，我們把選中的點都收集了起來，接下來就是繪制兩個點連接線：

/**
  * 繪制兩點之間的線
  * @param canvas
  * @param a
  * @param b
*/
 private void drawLine(Canvas canvas, Point a, Point b){
  if (a.state == Point.STATE_PRESS){
   canvas.drawLine(a.x, a.y, b.x, b.y, mPressPaint);
  }
  if (a.state == Point.STATE_ERROR){
   canvas.drawLine(a.x, a.y, b.x, b.y, mErrorPaint);
  }
 }

繪制兩點的連接線比較簡單，我們只繪制按下和錯誤時候的連線。這是繪制單條連接線的。而我們的手勢密碼路徑是有多條的，繼續(xù)看：

 /**
  * 繪制所有的線
  * @param canvas
  */
 private void drawLines(Canvas canvas){
  if (mSelectedPoints.size() > 0){
   // 從第一個被選中的點開始繪制
   Point a = mSelectedPoints.get(0);
   for (int i = 1; i < mSelectedPoints.size(); i++){
    Point b = mSelectedPoints.get(i);
    drawLine(canvas, a, b); // 連接兩個點
    a = b; // 把下一個點作為下一次繪制的第一個點
   }
   if (isDraw){// 如果還在繪制狀態(tài)，那就繼續(xù)繪制連接線
    drawLine(canvas, a, new Point(mX, mY));
   }
  }
 }

如果被選中點的集合不是空的，那我們選擇從第一個被選中點開始繪制連接線，遍歷所有被選中點的時候就要從第二個點開始也就是index為1的時候，繪制完一個點，就要把下一次繪制連接線的起點改為這一次的連接線的終點，也是 a=b；這句的作用。所有被選中的點繪制完后，如果當前還處在繪制狀態(tài)（手機沒有離開屏幕），那我們就new一個手指觸摸位置作為連接線的終點。好了所有的線都繪制完了，那我們只要在onDraw調(diào)用就好了：

@Override
 protected void onDraw(Canvas canvas) {

  // 繪制點
  drawPoints(canvas);

  // 繪制連線
  drawLines(canvas);
 }

這樣繪制的工作基本就完成了，接下來我們需要做一個用來監(jiān)聽手勢滑動完后的接口：

public interface OnDrawFinishedListener{
 boolean onDrawFinished(List<Integer> passPositions);
}

回調(diào)的方法里的passPositions是手勢滑動的時候存儲的九宮格的路徑，對于九宮格路徑的定義如圖：

在onTouchEvent中，當Action動作是Up的時候（手指離開屏幕）：就會觸發(fā)手勢密碼繪制完成的接口：

case MotionEvent.ACTION_UP:
    boolean valid = false;
    if (mListener != null && isDraw){
     // 獲取繪制路徑是否正確
     valid = mListener.onDrawFinished(mPassPositions);
    }
    if (!valid){// 判斷繪制路徑不正確的所有被選中的點的狀態(tài)改為出錯
     for (Point p: mSelectedPoints){
      p.state = Point.STATE_ERROR;
     }
    }
    isDraw = false;
    break;

當設置了監(jiān)聽接口，并且還處于繪制狀態(tài)的時候，回調(diào)接口把路徑傳出去給實現(xiàn)這個接口的使用者，然后在實現(xiàn)這個接口方法的地方判斷和之前設置存儲的手勢密碼是否一致，如果不一致返回為false。然后去修改所有的被選中的點的狀態(tài)為錯誤的。然后invalidate()去更新視圖。

路徑給出去了，在最初設定的時候可以用md5等不可逆的加密方式存儲在手機中。在需要解鎖的時候，拿到這個md5值和解鎖時候繪制的路徑的md5值做比較就可以了：

// 這個自定義視圖的使用方法：
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"  android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.jerry.testproject.ui.ScreenLockActivity">

 <com.jerry.testproject.widget.lockview.LockView
  android:id="@+id/lockView"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#2B2B2B"
  />

</FrameLayout>

LockView lockView = (LockView) findViewById(R.id.lockView);
  lockView.setOnDrawFinishedListener(new LockView.OnDrawFinishedListener() {
   @Override
   public boolean onDrawFinished(List<Integer> passPositions) {
    StringBuilder sb = new StringBuilder();
    for (Integer i :
      passPositions) {
     sb.append(i.intValue());
    }
    // 把字符串md5
    String md5Str = MD5Utils.getMD5String(sb.toString());
    // 比較路徑是否一致
    boolean valid = comparePath(sb.toString());
    if (valid){
     Toast.makeText(ScreenLockActivity.this, "手勢密碼正確！", Toast.LENGTH_SHORT).show();
    } else {
     Toast.makeText(ScreenLockActivity.this, "手勢密碼錯誤，請重試！", Toast.LENGTH_SHORT).show();
    }

    return valid;
   }
  });

關(guān)于怎么在Android中通過自定義View實現(xiàn)九宮格手勢密碼解鎖就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。