最近因為項目需要用到九宮格密碼（也叫手勢軌跡密碼），特地去學(xué)習(xí)了一下九宮格密碼的實現(xiàn)原來。可能有人認(rèn)為九宮格密碼事例網(wǎng)上到處都有，很多甚至直接拷貝過來就可以運(yùn)行為什么還要學(xué)習(xí)呢。還特地寫到網(wǎng)上有必要嗎？其實寫這個目的是為了增強(qiáng)和鍛煉自己的語言組織能力。其實如果只是既然是學(xué)習(xí)就不光是要知道答案（完成效果）更重要的是知道他什么實現(xiàn)。
好了題外話就不多說了，要實現(xiàn)九宮格密碼要解決的問題有：
1、給九宮格密碼界面布局九個點，即確定每個節(jié)點的位置。每個點到上下左右的距離都是相同的。即九個點剛好圍成一個正方形。所以這樣的布局界面無法用現(xiàn)有的五大布局來完成必須自定義這個控件。
2、每個節(jié)點只能被選擇一次，所以必須記錄每個點的選中狀態(tài)。
3、手勢開始滑動時，每個節(jié)點如何知道手勢運(yùn)動的軌跡經(jīng)過自己。
4、連線，連線如果步考慮效果，直接用canvas的drawline方法來畫連線時當(dāng)然是很簡單的。但是如果用圖線（即聯(lián)系用用一個Bitmap）來畫，如何畫。解決了這四個問題我們就可以做九宮格密碼了。
5、記錄被選擇節(jié)點的順序。
帶著這是那個問題我們開始實現(xiàn)我們要實現(xiàn)的效果。因為網(wǎng)上好多事例所以我就直接拿別人的事例來消化吧。為了更好的解讀這個問題我先把代碼貼出來后面在講解這樣我覺得我會剛好說一些，大家也更容易理解一些
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];// 九宮格節(jié)點 private Bitmap defualtPointMap = BitmapFactory.decodeResource(getResources(), R.drawable.locus_round_original);// 正常情況下點的位圖 private int poitleght = defualtPointMap.getWidth();// 節(jié)點的邊長；這里值考慮正方形狀態(tài) private Bitmap selectPointMap = BitmapFactory.decodeResource(getResources(), R.drawable.locus_round_click);// 選中情況下點的位圖 private Point startPoint;// 起點 private Point tempPoint;// 臨時存儲上一個節(jié)點 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; } /** * 回復(fù)各個點到初始狀態(tài) */ 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) { // 繪制當(dāng)前活動的線段 drawLine(startX, startY, moveX, moveY, canvas); } drawLinePoint(canvas); super.onDraw(canvas); } /** * 初始各節(jié)點 * * @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;// 行數(shù) int column = i % 3;// 列數(shù)；求整取余 int x = (poitleght + spacing) * column + getPaddingLeft();// x坐標(biāo) int y = (poitleght + spacing) * row + getPaddingTop();// y坐標(biāo) Point point = new Point((i + 1), x, y, poitleght); points[i] = point; } } } /** * 繪制各節(jié)點以及被選擇的個節(jié)點之間的連線軌跡 * * @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; // 獲取目標(biāo)節(jié)點 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);// 轉(zhuǎn)換的角度 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);//恢復(fù) canvas.save(); // Paint paint1 = new Paint(); // paint1.setColor(Color.BLACK); // paint1.setStrokeWidth(8);// 粗細(xì) // 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);// 轉(zhuǎn)換的角度（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坐標(biāo) private int y;// 點的左上角的y坐標(biāo) private boolean isSelected;// 該節(jié)點是否被選中 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); } /** * 判斷某個坐標(biāo)是否這個這個表示一個點的圖形區(qū)域內(nèi) * * @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、布局九個節(jié)點。將九個節(jié)點布局起來首先要知道控件寬和高，這樣我們才能如何布局，在onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法中用getWidth()和getHeight(); 方法我們就可以得到高度和寬度，因為自定義布局還有一個padding屬性，所以我們還要計算這個步驟。所以計算真正布局這九個節(jié)點的正方形的邊長（我們這里是做正方形的九宮格）為：
int width = getWidth() - getPaddingLeft() - getPaddingRight();
int height = getHeight() - getPaddingTop() - getPaddingBottom();
length = (width < height ? width : height);// 獲取邊長如果這個邊長大于0我就開始確定九個節(jié)點分別的坐標(biāo)位置。邊長=三個節(jié)點的變長+兩個間隙長度。
那么現(xiàn)在我們可以確定每個節(jié)點的位置了第一個節(jié)點為（0，0），第二節(jié)點為（0+pointwidth+spacing,0）, ……。但是我們現(xiàn)在要做的首先是是怎樣結(jié)論每個節(jié)點的位置，即定義一個節(jié)點的類。根據(jù)前面列出的幾個問題可得出該節(jié)點要記錄節(jié)點的id，起止坐標(biāo)，被選中狀態(tài)，節(jié)點的中心點坐標(biāo)以及節(jié)點所連接的下一個節(jié)點的左邊。根據(jù)這些性質(zhì)我們寫出了Point 的內(nèi)部類如上面代碼286行開始的定義。定義完了節(jié)點的類我們就開始為他們初始化如144還看是的initPionts方法。
2、畫點以及畫連線drawLinePoint方法所示用一個循環(huán)就可以把所有點畫出來。繪制連線，現(xiàn)在有個情況要分析一下，1)點與點之間的連線即節(jié)點已經(jīng)確定了加一個節(jié)點的id。2)節(jié)點與手勢之間的連線，即節(jié)點還沒有確定下一個節(jié)點前節(jié)點到手指的連線。先拋開畫線這個方法不說畫線就是畫起點到終點的連線，這樣我們可以先定義一個空發(fā)方法，傳遞canvas,以及表示兩點坐標(biāo)的參數(shù)傳遞給drawLine這個方法(220行開始)，后面再去處理畫線。根據(jù)先易后難的原則我們可以很容易的繪制點與點之間的連線如187行drawP2POrbit方法。麻煩就在點到手指的連線。干根據(jù)常識我們知道這個點肯定是最后被選中的那個點。而且這個點不是一成不變的所以我們得定義一個臨時變量tempPoint來保存這個節(jié)點（不能用startPoit記錄startPoint用保存最起點的位置）。而連線的終點就是手指的坐標(biāo)點。這樣就可以缺點兩個節(jié)點下來了。見代碼57行開始的onTouchEvent方法，該方法里頭同時還記錄的節(jié)點唄選中的順序。這樣我們就可以在ondraw方法畫出了點和連線如128行開始。
3、畫連線，drawLine（220行）這里我沒什么要特別說的唯一要提起的就是反三角函數(shù)問題以及角度轉(zhuǎn)化問題，反三角函數(shù)我不說了大家都會只是太長時間沒用了忘了現(xiàn)在再去看一眼就行。而這個角度轉(zhuǎn)化這塊要特別注意一下我們要轉(zhuǎn)化的是canvas的角度而不是bitmap的角度以為轉(zhuǎn)化bitmap的角度的畫很不容易確定bitmap的起點坐標(biāo)因為bitmap以左上角作為起點坐標(biāo)，隨著角度的變化起點坐標(biāo)也跟著變很難去計算。所以轉(zhuǎn)換canvas的角度比較簡單，最后在畫晚線后別忘了再把角度轉(zhuǎn)回來。并保存。
4、返回密碼串getOrbitString（276行)是返回密碼串的方法，在調(diào)用者（activity）的ontouch的Action_UP中調(diào)用就可以了。
以上就是我對軌跡密碼的理解和解釋。有不足的地方多多包含。
示例下載：Android九宮格密碼Demo
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
圖片精選
