Android九宮格手勢(shì)密碼代碼設(shè)計(jì)
最近因?yàn)轫?xiàng)目需要用到九宮格密碼(也叫手勢(shì)軌跡密碼),特地去學(xué)習(xí)了一下九宮格密碼的實(shí)現(xiàn)原來(lái)??赡苡腥苏J(rèn)為九宮格密碼事例網(wǎng)上到處都有,很多甚至直接拷貝過(guò)來(lái)就可以運(yùn)行為什么還要學(xué)習(xí)呢。還特地寫(xiě)到網(wǎng)上有必要嗎?其實(shí)寫(xiě)這個(gè)目的是為了增強(qiáng)和鍛煉自己的語(yǔ)言組織能力。其實(shí)如果只是既然是學(xué)習(xí)就不光是要知道答案(完成效果)更重要的是知道他什么實(shí)現(xiàn)。
好了題外話就不多說(shuō)了,要實(shí)現(xiàn)九宮格密碼要解決的問(wèn)題有:
1、給九宮格密碼界面布局九個(gè)點(diǎn),即確定每個(gè)節(jié)點(diǎn)的位置。每個(gè)點(diǎn)到上下左右的距離都是相同的。即九個(gè)點(diǎn)剛好圍成一個(gè)正方形。所以這樣的布局界面無(wú)法用現(xiàn)有的五大布局來(lái)完成必須自定義這個(gè)控件。
2、每個(gè)節(jié)點(diǎn)只能被選擇一次,所以必須記錄每個(gè)點(diǎn)的選中狀態(tài)。
3、手勢(shì)開(kāi)始滑動(dòng)時(shí),每個(gè)節(jié)點(diǎn)如何知道手勢(shì)運(yùn)動(dòng)的軌跡經(jīng)過(guò)自己。
4、連線,連線如果步考慮效果,直接用canvas的drawline方法來(lái)畫(huà)連線時(shí)當(dāng)然是很簡(jiǎn)單的。但是如果用圖線(即聯(lián)系用用一個(gè)Bitmap)來(lái)畫(huà),如何畫(huà)。解決了這四個(gè)問(wèn)題我們就可以做九宮格密碼了。
5、記錄被選擇節(jié)點(diǎn)的順序。
帶著這是那個(gè)問(wèn)題我們開(kāi)始實(shí)現(xiàn)我們要實(shí)現(xiàn)的效果。因?yàn)榫W(wǎng)上好多事例所以我就直接拿別人的事例來(lái)消化吧。為了更好的解讀這個(gè)問(wèn)題我先把代碼貼出來(lái)后面在講解這樣我覺(jué)得我會(huì)剛好說(shuō)一些,大家也更容易理解一些
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;// 九宮格密碼是正方形所以只要知道邊長(zhǎng)就可以
private Point[] points = new Point[9];// 九宮格節(jié)點(diǎn)
private Bitmap defualtPointMap = BitmapFactory.decodeResource(getResources(), R.drawable.locus_round_original);// 正常情況下點(diǎn)的位圖
private int poitleght = defualtPointMap.getWidth();// 節(jié)點(diǎn)的邊長(zhǎng);這里值考慮正方形狀態(tài)
private Bitmap selectPointMap = BitmapFactory.decodeResource(getResources(), R.drawable.locus_round_click);// 選中情況下點(diǎn)的位圖
private Point startPoint;// 起點(diǎn)
private Point tempPoint;// 臨時(shí)存儲(chǔ)上一個(gè)節(jié)點(diǎn)
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();
// 以下四個(gè)變量是為了繪制最后一個(gè)跟手指之間的連線
private int startX;// 移動(dòng)起點(diǎn)X
private int startY;// 移動(dòng)起點(diǎn)Y
private int moveX;// 正在移動(dòng)的X
private int moveY;// 正在移動(dòng)的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ù)各個(gè)點(diǎn)到初始狀態(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);// 獲取邊長(zhǎng)
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)前活動(dòng)的線段
drawLine(startX, startY, moveX, moveY, canvas);
}
drawLinePoint(canvas);
super.onDraw(canvas);
}
/**
* 初始各節(jié)點(diǎn)
*
* @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é)點(diǎn)以及被選擇的個(gè)節(jié)點(diǎn)之間的連線軌跡
*
* @param canvas
*/
private void drawLinePoint(Canvas canvas) {
if (startPoint != null) {
drawP2POrbit(startPoint, canvas);
}
Paint paint = null;// new Paint();
// 繪制每個(gè)點(diǎn)的圖片
for (Point point : points) {
if (point.isSelected()) {// 繪制大圈
canvas.drawBitmap(selectPointMap, point.getX(), point.getY(), paint);
} else {
canvas.drawBitmap(defualtPointMap, point.getX(), point.getY(), paint);
}
}
}
/**
* 繪制點(diǎn)與點(diǎn)之間的軌跡
*
* @param canvas
*/
private void drawP2POrbit(Point point, Canvas canvas) {
if (point.getId() != point.nextID) {
// canvas.concat(matrix);
Point endPoint = null;
// 獲取目標(biāo)節(jié)點(diǎn)
for (Point point3 : points) {
if (point3.getId() == point.getNextID()) {
endPoint = point3;
break;
}
}
if (endPoint != null) {
// 畫(huà)線
drawLine(point.getCenterX(), point.getCenterY(), endPoint.getCenterX(), endPoint.getCenterY(), canvas);
// 遞歸
drawP2POrbit(endPoint, canvas);
}
}
}
/**
* 畫(huà)連線
*
* @param startX
* 起點(diǎn)X
* @param startY
* 起點(diǎn)Y
* @param stopX
* 終點(diǎn)X
* @param stopY
* 終點(diǎn)Y
* @param canvas
*/
private void drawLine(int startX, int startY, int stopX, int stopY, Canvas canvas) {
Paint paint = new Paint();
// 獲得斜邊長(zhǎng)度
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);//不能用這個(gè)matritx 來(lái)選擇角度只能用 讓canvas懶選擇
// 用matrix的話會(huì)引起圖片所表示的線條不在中心點(diǎn)上
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
* 起點(diǎn)X
* @param startY
* 起點(diǎn)Y
* @param stopX
* 終點(diǎn)X
* @param stopY
* 終點(diǎn)Y
*/
private float getDegrees(int startX, int startY, int stopX, int stopY) {
// 獲得斜邊長(zhǎng)度
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說(shuō)明角度在第三或者第四像限
rotate = 360 - rotate;
}
return rotate;
}
/**
* 軌跡順序密碼
*
* @return
*/
public String getOrbitString() {
return (passWBuffer == null ? null : passWBuffer.toString());
}
/**
* 表示一個(gè)點(diǎn)
*
* @author lanhaizhong
*
*/
class Point {
private int id;// 點(diǎn)的id
private int nextID;// 連向下一個(gè)借點(diǎn)的id
private int x;// 點(diǎn)的左上角x坐標(biāo)
private int y;// 點(diǎn)的左上角的y坐標(biāo)
private boolean isSelected;// 該節(jié)點(diǎn)是否被選中
private int width;// 點(diǎn)的長(zhǎng)度 這里只考慮正方形
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);
}
/**
* 判斷某個(gè)坐標(biāo)是否這個(gè)這個(gè)表示一個(gè)點(diǎn)的圖形區(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、布局九個(gè)節(jié)點(diǎn)。將九個(gè)節(jié)點(diǎn)布局起來(lái)首先要知道控件寬和高,這樣我們才能如何布局,在onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法中用getWidth()和getHeight(); 方法我們就可以得到高度和寬度,因?yàn)樽远x布局還有一個(gè)padding屬性,所以我們還要計(jì)算這個(gè)步驟。所以計(jì)算真正布局這九個(gè)節(jié)點(diǎn)的正方形的邊長(zhǎng)(我們這里是做正方形的九宮格)為:
int width = getWidth() - getPaddingLeft() - getPaddingRight();
int height = getHeight() - getPaddingTop() - getPaddingBottom();
length = (width < height ? width : height);// 獲取邊長(zhǎng)如果這個(gè)邊長(zhǎng)大于0我就開(kāi)始確定九個(gè)節(jié)點(diǎn)分別的坐標(biāo)位置。邊長(zhǎng)=三個(gè)節(jié)點(diǎn)的變長(zhǎng)+兩個(gè)間隙長(zhǎng)度。
那么現(xiàn)在我們可以確定每個(gè)節(jié)點(diǎn)的位置了第一個(gè)節(jié)點(diǎn)為(0,0),第二節(jié)點(diǎn)為(0+pointwidth+spacing,0), ……。但是我們現(xiàn)在要做的首先是是怎樣結(jié)論每個(gè)節(jié)點(diǎn)的位置,即定義一個(gè)節(jié)點(diǎn)的類(lèi)。根據(jù)前面列出的幾個(gè)問(wèn)題可得出該節(jié)點(diǎn)要記錄節(jié)點(diǎn)的id,起止坐標(biāo),被選中狀態(tài),節(jié)點(diǎn)的中心點(diǎn)坐標(biāo)以及節(jié)點(diǎn)所連接的下一個(gè)節(jié)點(diǎn)的左邊。根據(jù)這些性質(zhì)我們寫(xiě)出了Point 的內(nèi)部類(lèi)如上面代碼286行開(kāi)始的定義。定義完了節(jié)點(diǎn)的類(lèi)我們就開(kāi)始為他們初始化如144還看是的initPionts方法。
2、畫(huà)點(diǎn)以及畫(huà)連線drawLinePoint方法所示用一個(gè)循環(huán)就可以把所有點(diǎn)畫(huà)出來(lái)。繪制連線,現(xiàn)在有個(gè)情況要分析一下,1)點(diǎn)與點(diǎn)之間的連線即節(jié)點(diǎn)已經(jīng)確定了加一個(gè)節(jié)點(diǎn)的id。2)節(jié)點(diǎn)與手勢(shì)之間的連線,即節(jié)點(diǎn)還沒(méi)有確定下一個(gè)節(jié)點(diǎn)前節(jié)點(diǎn)到手指的連線。先拋開(kāi)畫(huà)線這個(gè)方法不說(shuō)畫(huà)線就是畫(huà)起點(diǎn)到終點(diǎn)的連線,這樣我們可以先定義一個(gè)空發(fā)方法,傳遞canvas,以及表示兩點(diǎn)坐標(biāo)的參數(shù)傳遞給drawLine這個(gè)方法(220行開(kāi)始),后面再去處理畫(huà)線。根據(jù)先易后難的原則我們可以很容易的繪制點(diǎn)與點(diǎn)之間的連線如187行drawP2POrbit方法。麻煩就在點(diǎn)到手指的連線。干根據(jù)常識(shí)我們知道這個(gè)點(diǎn)肯定是最后被選中的那個(gè)點(diǎn)。而且這個(gè)點(diǎn)不是一成不變的所以我們得定義一個(gè)臨時(shí)變量tempPoint來(lái)保存這個(gè)節(jié)點(diǎn)(不能用startPoit記錄startPoint用保存最起點(diǎn)的位置)。而連線的終點(diǎn)就是手指的坐標(biāo)點(diǎn)。這樣就可以缺點(diǎn)兩個(gè)節(jié)點(diǎn)下來(lái)了。見(jiàn)代碼57行開(kāi)始的onTouchEvent方法,該方法里頭同時(shí)還記錄的節(jié)點(diǎn)唄選中的順序。這樣我們就可以在ondraw方法畫(huà)出了點(diǎn)和連線如128行開(kāi)始。
3、畫(huà)連線,drawLine(220行)這里我沒(méi)什么要特別說(shuō)的唯一要提起的就是反三角函數(shù)問(wèn)題以及角度轉(zhuǎn)化問(wèn)題,反三角函數(shù)我不說(shuō)了大家都會(huì)只是太長(zhǎng)時(shí)間沒(méi)用了忘了現(xiàn)在再去看一眼就行。而這個(gè)角度轉(zhuǎn)化這塊要特別注意一下我們要轉(zhuǎn)化的是canvas的角度而不是bitmap的角度以為轉(zhuǎn)化bitmap的角度的畫(huà)很不容易確定bitmap的起點(diǎn)坐標(biāo)因?yàn)閎itmap以左上角作為起點(diǎn)坐標(biāo),隨著角度的變化起點(diǎn)坐標(biāo)也跟著變很難去計(jì)算。所以轉(zhuǎn)換canvas的角度比較簡(jiǎn)單,最后在畫(huà)晚線后別忘了再把角度轉(zhuǎn)回來(lái)。并保存。
4、返回密碼串getOrbitString(276行)是返回密碼串的方法,在調(diào)用者(activity)的ontouch的Action_UP中調(diào)用就可以了。
以上就是我對(duì)軌跡密碼的理解和解釋。有不足的地方多多包含。
示例下載:Android九宮格密碼Demo
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android編程實(shí)現(xiàn)滑動(dòng)按鈕功能詳解
這篇文章主要介紹了Android編程實(shí)現(xiàn)滑動(dòng)按鈕功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android實(shí)現(xiàn)滑動(dòng)按鈕的功能、布局及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-02-02
Android實(shí)現(xiàn)點(diǎn)擊切換視圖并跳轉(zhuǎn)傳值
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)點(diǎn)擊切換視圖并跳轉(zhuǎn)傳值,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01
Android實(shí)現(xiàn)EditText的富文本編輯
這篇文章主要介紹了Android實(shí)現(xiàn)EditText的富文本編輯,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
Android Studio提示inotify大小不足的解決辦法
大家在使用Android Studio導(dǎo)入AOSP源碼的時(shí)候,可能會(huì)遇到inotify大小不足的問(wèn)題,這篇文章就給大家介紹了怎么解決這個(gè)問(wèn)題的方法,有需要的朋友們可以參考借鑒。2016-09-09
Android Studio下添加assets目錄的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇Android Studio下添加assets目錄的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
Android實(shí)現(xiàn)webview實(shí)例代碼
本篇文章主要介紹了Android實(shí)現(xiàn)webview實(shí)例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
Android實(shí)現(xiàn)可復(fù)用的篩選頁(yè)面
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)可復(fù)用的篩選頁(yè)面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06

