Android開發中中怎么實現投放九宮格手勢密碼功能

這篇文章將為大家詳細講解有關Android開發中中怎么實現投放九宮格手勢密碼功能，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

要實現九宮格密碼要解決的問題有：

1、給九宮格密碼界面布局九個點，即確定每個節點的位置。每個點到上下左右的距離都是相同的。即九個點剛好圍成一個正方形。所以這樣的布局界面無法用現有的五大布局來完成必須自定義這個控件。

2、每個節點只能被選擇一次，所以必須記錄每個點的選中狀態。

3、手勢開始滑動時，每個節點如何知道手勢運動的軌跡經過自己。

4、連線，連線如果步考慮效果，直接用canvas的drawline方法來畫連線時當然是很簡單的。但是如果用圖線（即聯系用用一個Bitmap）來畫，如何畫。解決了這四個問題我們就可以做九宮格密碼了。

5、記錄被選擇節點的順序。

帶著這是那個問題我們開始實現我們要實現的效果。因為網上好多事例所以我就直接拿別人的事例來消化吧。為了更好的解讀這個問題我先把代碼貼出來后面在講解這樣我覺得我會剛好說一些，大家也更容易理解一些 

package org.demo.custon_view; 
 
import android.content.Context; 
import android.graphics.Bitmap; 
import android.graphics.BitmapFactory; 
import android.graphics.Canvas; 
import android.graphics.Matrix; 
import android.graphics.Paint; 
import android.util.AttributeSet; 
import android.view.MotionEvent; 
import android.view.View; 
import android.widget.ImageView; 
 
/** 
 * @Title: SquaredPassWord.java 
 * @Description: 九宮格密碼 
 * @author lhz 
 * @date 2013年9月16日 下午3:48:10 
 * @version V1.0 Copyright (c) 2013 Company,Inc. All Rights Reserved. 
 * 
 */ 
public class SquaredPassWord extends View { 
 ImageView i; 
 private int length;// 九宮格密碼是正方形所以只要知道邊長就可以 
 private Point[] points = new Point[9];// 九宮格節點 
 private Bitmap defualtPointMap = BitmapFactory.decodeResource(getResources(), R.drawable.locus_round_original);// 正常情況下點的位圖 
 private int poitleght = defualtPointMap.getWidth();// 節點的邊長；這里值考慮正方形狀態 
 private Bitmap selectPointMap = BitmapFactory.decodeResource(getResources(), R.drawable.locus_round_click);// 選中情況下點的位圖 
 private Point startPoint;// 起點 
 private Point tempPoint;// 臨時存儲上一個節點 
 private StringBuffer passWBuffer = new StringBuffer();// 保存軌跡順序的密碼 
 private Bitmap lineBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.locus_line); 
 private int lineBitmapheight = lineBitmap.getHeight(); 
 private double lineBitmapWidth = lineBitmap.getWidth(); 
 // 以下四個變量是為了繪制最后一個跟手指之間的連線 
 private int startX;// 移動起點X 
 private int startY;// 移動起點Y 
 private int moveX;// 正在移動的X 
 private int moveY;// 正在移動的Y 
 
 public SquaredPassWord(Context context) { 
  super(context); 
 
 } 
 
 public SquaredPassWord(Context context, AttributeSet attrs) { 
  super(context, attrs); 
 
 } 
 
 public SquaredPassWord(Context context, AttributeSet attrs, int defStyle) { 
  super(context, attrs, defStyle); 
 
 } 
 
 @Override 
 public boolean onTouchEvent(MotionEvent event) { 
  boolean flag = true; 
  switch (event.getAction()) { 
  case MotionEvent.ACTION_DOWN: 
   passWBuffer.delete(0, passWBuffer.length()); 
   int x = (int) event.getX(); 
   int y = (int) event.getY(); 
   for (Point point : points) { 
    if (point.isInMyArea(x, y)) { 
     point.setSelected(true); 
     tempPoint = startPoint = point; 
     startX = startPoint.getCenterX(); 
     startY = startPoint.getCenterY(); 
     passWBuffer.append(startPoint.getId()); 
    } 
   } 
   invalidate(); 
   break; 
  case MotionEvent.ACTION_MOVE: 
   moveX = (int) event.getX(); 
   moveY = (int) event.getY(); 
   for (Point point : points) { 
    if (point.isInMyArea(moveX, moveY) && !point.isSelected()) { 
     tempPoint.setNextID(point.getId()); 
     point.setSelected(true); 
     tempPoint = point; 
     startX = tempPoint.getCenterX(); 
     startY = tempPoint.getCenterY(); 
     passWBuffer.append(tempPoint.getId()); 
    } 
   } 
   invalidate(); 
   break; 
  case MotionEvent.ACTION_UP: 
   reSetData(); 
   startX = startY = moveX = moveY = 0; 
   invalidate(); 
   flag = false; 
   break; 
 
  default: 
   break; 
  } 
  return flag; 
 } 
 
 /** 
  * 回復各個點到初始狀態 
  */ 
 private void reSetData() { 
  for (Point point : points) { 
   point.setSelected(false); 
   point.setNextID(point.getId()); 
  } 
 } 
 
 @Override 
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
  // TODO Auto-generated method stub 
  int width = getWidth() - getPaddingLeft() - getPaddingRight(); 
  int height = getHeight() - getPaddingTop() - getPaddingBottom(); 
  length = (width < height ? width : height);// 獲取邊長 
  if(!(length>0)){ 
    
  } 
  System.out.println(length); 
  initPionts(points); 
  super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
 } 
 
 @Override 
 protected void onDraw(Canvas canvas) { 
  // TODO Auto-generated method stub 
  if (moveX != 0 && moveY != 0 && startX != 0 && startY != 0) { 
   // 繪制當前活動的線段 
   drawLine(startX, startY, moveX, moveY, canvas); 
  } 
  drawLinePoint(canvas); 
  super.onDraw(canvas); 
 } 
 
 /** 
  * 初始各節點 
  * 
  * @param pionts 
  */ 
 @SuppressWarnings("null") 
 private void initPionts(Point[] points) { 
  int spacing = (length - poitleght * 3) / 2; 
 
  if (points == null && points.length != 9) {// 只做九宮格的處理 
   return; 
  } else { 
   for (int i = 0; i < 9; i++) { 
    int row = i / 3;// 行數 
    int column = i % 3;// 列數；求整取余 
 
    int x = (poitleght + spacing) * column + getPaddingLeft();// x坐標 
    int y = (poitleght + spacing) * row + getPaddingTop();// y坐標 
    Point point = new Point((i + 1), x, y, poitleght); 
    points[i] = point; 
   } 
  } 
 } 
 
 /** 
  * 繪制各節點以及被選擇的個節點之間的連線軌跡 
  * 
  * @param canvas 
  */ 
 private void drawLinePoint(Canvas canvas) { 
  if (startPoint != null) { 
   drawP2POrbit(startPoint, canvas); 
  } 
  Paint paint = null;// new Paint(); 
  // 繪制每個點的圖片 
  for (Point point : points) { 
   if (point.isSelected()) {// 繪制大圈 
    canvas.drawBitmap(selectPointMap, point.getX(), point.getY(), paint); 
   } else { 
    canvas.drawBitmap(defualtPointMap, point.getX(), point.getY(), paint); 
   } 
  } 
 } 
 
 /** 
  * 繪制點與點之間的軌跡 
  * 
  * @param canvas 
  */ 
 private void drawP2POrbit(Point point, Canvas canvas) { 
  if (point.getId() != point.nextID) { 
   // canvas.concat(matrix); 
   Point endPoint = null; 
   // 獲取目標節點 
   for (Point point3 : points) { 
    if (point3.getId() == point.getNextID()) { 
     endPoint = point3; 
     break; 
    } 
   } 
   if (endPoint != null) { 
    // 畫線 
    drawLine(point.getCenterX(), point.getCenterY(), endPoint.getCenterX(), endPoint.getCenterY(), canvas); 
    // 遞歸 
    drawP2POrbit(endPoint, canvas); 
   } 
  } 
 } 
 
 /** 
  * 畫連線 
  * 
  * @param startX 
  *   起點X 
  * @param startY 
  *   起點Y 
  * @param stopX 
  *   終點X 
  * @param stopY 
  *   終點Y 
  * @param canvas 
  */ 
 private void drawLine(int startX, int startY, int stopX, int stopY, Canvas canvas) { 
  Paint paint = new Paint(); 
  // 獲得斜邊長度 
  double hypotenuse = Math.hypot((stopX - startX), (stopY - startY)); 
  // double side = stopX - startX;// 鄰邊 
  // double piAngle = Math.acos(side / hypotenuse);// pi角度 
  // float rotate = (float) (180 / Math.PI * piAngle);// 轉換的角度 
  float rotate = getDegrees(startX, startY, stopX, stopY); 
  Matrix matrix = new Matrix(); 
  // matrix.postRotate(rotate);//不能用這個matritx 來選擇角度只能用 讓canvas懶選擇 
    // 用matrix的話會引起圖片所表示的線條不在中心點上 
    canvas.rotate(rotate, startX, startY); 
  matrix.preTranslate(0, 0); 
  matrix.setScale((float) (hypotenuse / lineBitmapWidth), 1.0f); 
  matrix.postTranslate(startX, startY - lineBitmapheight / 2.f); 
  canvas.drawBitmap(lineBitmap, matrix, paint); 
  canvas.rotate(-rotate, startX, startY);//恢復 
  canvas.save(); 
 
//  Paint paint1 = new Paint(); 
//  paint1.setColor(Color.BLACK); 
//  paint1.setStrokeWidth(8);// 粗細 
//  paint1.setFlags(Paint.ANTI_ALIAS_FLAG); 
//  canvas.drawLine(startX, startY, stopX, stopY, paint1); 
 
 } 
 
 /** 
  * 獲取角度 
  * 
  * @param startX 
  *   起點X 
  * @param startY 
  *   起點Y 
  * @param stopX 
  *   終點X 
  * @param stopY 
  *   終點Y 
  */ 
 private float getDegrees(int startX, int startY, int stopX, int stopY) { 
  // 獲得斜邊長度 
  double hypotenuse = Math.hypot((stopX - startX), (stopY - startY)); 
  double side = stopX - startX;// 鄰邊 
  double piAngle = Math.acos(side / hypotenuse);// pi角度 
  float rotate = (float) (180 / Math.PI * piAngle);// 轉換的角度（0--180); 
  if (stopY - startY < 0) {// 如果Y愁小于0說明角度在第三或者第四像限 
   rotate = 360 - rotate; 
  } 
  return rotate; 
 } 
 
 /** 
  * 軌跡順序密碼 
  * 
  * @return 
  */ 
 public String getOrbitString() { 
  return (passWBuffer == null ? null : passWBuffer.toString()); 
 } 
 
 /** 
  * 表示一個點 
  * 
  * @author lanhaizhong 
  * 
  */ 
 class Point { 
 
  private int id;// 點的id 
  private int nextID;// 連向下一個借點的id 
  private int x;// 點的左上角x坐標 
  private int y;// 點的左上角的y坐標 
  private boolean isSelected;// 該節點是否被選中 
  private int width;// 點的長度 這里只考慮正方形 
 
  public Point() { 
   super(); 
   // TODO Auto-generated constructor stub 
  } 
 
  public int getId() { 
   return id; 
  } 
 
  public void setId(int id) { 
   this.id = id; 
  } 
 
  public int getNextID() { 
   return nextID; 
  } 
 
  public void setNextID(int nextID) { 
   this.nextID = nextID; 
  } 
 
  public int getX() { 
   return x; 
  } 
 
  public void setX(int x) { 
   this.x = x; 
  } 
 
  public int getY() { 
   return y; 
  } 
 
  public void setY(int y) { 
   this.y = y; 
  } 
 
  public boolean isSelected() { 
   return isSelected; 
  } 
 
  public void setSelected(boolean isSelected) { 
   this.isSelected = isSelected; 
  } 
 
  public int getWidth() { 
   return width; 
  } 
 
  public void setWidth(int width) { 
   this.width = width; 
  } 
 
  public Point(int id, int x, int y, int width) { 
   super(); 
   this.id = id; 
   this.x = x; 
   this.y = y; 
   this.nextID = id; 
   this.isSelected = false; 
   this.width = width; 
  } 
 
  public int getCenterX() { 
   return x + (width / 2); 
  } 
 
  private int getCenterY() { 
   return y + (width / 2); 
  } 
 
  /** 
   * 判斷某個坐標是否這個這個表示一個點的圖形區域內 
   * 
   * @param x 
   * @param y 
   * @return 
   */ 
  public boolean isInMyArea(int x, int y) { 
 
   // return (this.x < x && x < (this.x + width)) && (this.y < y && y < 
   // (this.y + width)); 
   return ((this.getCenterX() - lineBitmapWidth / 2) < x && x < (this.getCenterX() + lineBitmapWidth / 2)) 
     && ((this.getCenterY() - lineBitmapWidth / 2) < y && y < (this.getCenterY() + lineBitmapWidth / 2)); 
  } 
 } 
}

1、布局九個節點。將九個節點布局起來首先要知道控件寬和高，這樣我們才能如何布局，在onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法中用getWidth()和getHeight(); 方法我們就可以得到高度和寬度，因為自定義布局還有一個padding屬性，所以我們還要計算這個步驟。所以計算真正布局這九個節點的正方形的邊長（我們這里是做正方形的九宮格）為：
int width = getWidth() - getPaddingLeft() - getPaddingRight();
int height = getHeight() - getPaddingTop() - getPaddingBottom();
length = (width < height ? width : height);// 獲取邊長如果這個邊長大于0我就開始確定九個節點分別的坐標位置。邊長=三個節點的變長+兩個間隙長度。

那么現在我們可以確定每個節點的位置了第一個節點為（0，0），第二節點為（0+pointwidth+spacing,0）, ……。但是我們現在要做的首先是是怎樣結論每個節點的位置，即定義一個節點的類。根據前面列出的幾個問題可得出該節點要記錄節點的id，起止坐標，被選中狀態，節點的中心點坐標以及節點所連接的下一個節點的左邊。根據這些性質我們寫出了Point 的內部類如上面代碼286行開始的定義。定義完了節點的類我們就開始為他們初始化如144還看是的initPionts方法。

2、畫點以及畫連線drawLinePoint方法所示用一個循環就可以把所有點畫出來。繪制連線，現在有個情況要分析一下，1)點與點之間的連線即節點已經確定了加一個節點的id。2)節點與手勢之間的連線，即節點還沒有確定下一個節點前節點到手指的連線。先拋開畫線這個方法不說畫線就是畫起點到終點的連線，這樣我們可以先定義一個空發方法，傳遞canvas,以及表示兩點坐標的參數傳遞給drawLine這個方法(220行開始)，后面再去處理畫線。根據先易后難的原則我們可以很容易的繪制點與點之間的連線如187行drawP2POrbit方法。麻煩就在點到手指的連線。干根據常識我們知道這個點肯定是最后被選中的那個點。而且這個點不是一成不變的所以我們得定義一個臨時變量tempPoint來保存這個節點（不能用startPoit記錄startPoint用保存最起點的位置）。而連線的終點就是手指的坐標點。這樣就可以缺點兩個節點下來了。見代碼57行開始的onTouchEvent方法，該方法里頭同時還記錄的節點唄選中的順序。這樣我們就可以在ondraw方法畫出了點和連線如128行開始。

3、畫連線，drawLine（220行）這里我沒什么要特別說的唯一要提起的就是反三角函數問題以及角度轉化問題，反三角函數我不說了大家都會只是太長時間沒用了忘了現在再去看一眼就行。而這個角度轉化這塊要特別注意一下我們要轉化的是canvas的角度而不是bitmap的角度以為轉化bitmap的角度的畫很不容易確定bitmap的起點坐標因為bitmap以左上角作為起點坐標，隨著角度的變化起點坐標也跟著變很難去計算。所以轉換canvas的角度比較簡單，最后在畫晚線后別忘了再把角度轉回來。并保存。

4、返回密碼串getOrbitString（276行)是返回密碼串的方法，在調用者（activity）的ontouch的Action_UP中調用就可以了。

關于Android開發中中怎么實現投放九宮格手勢密碼功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。