Android九宫格手势密码代码设计
最近因为项目需要用到九宫格密码（也叫手势轨迹密码），特地去学习了一下九宫格密码的实现原来。可能有人认为九宫格密码事例网上到处都有，很多甚至直接拷贝过来就可以运行为什么还要学习呢。还特地写到网上有必要吗？其实写这个目的是为了增强和锻炼自己的语言组织能力。其实如果只是既然是学习就不光是要知道答案（完成效果）更重要的是知道他什么实现。
好了题外话就不多说了，要实现九宫格密码要解决的问题有：
1、给九宫格密码界面布局九个点，即确定每个节点的位置。每个点到上下左右的距离都是相同的。即九个点刚好围成一个正方形。所以这样的布局界面无法用现有的五大布局来完成必须自定义这个控件。
2、每个节点只能被选择一次，所以必须记录每个点的选中状态。
3、手势开始滑动时，每个节点如何知道手势运动的轨迹经过自己。
4、连线，连线如果步考虑效果，直接用canvas的drawline方法来画连线时当然是很简单的。但是如果用图线（即联系用用一个Bitmap）来画，如何画。解决了这四个问题我们就可以做九宫格密码了。
5、记录被选择节点的顺序。
带着这是那个问题我们开始实现我们要实现的效果。因为网上好多事例所以我就直接拿别人的事例来消化吧。为了更好的解读这个问题我先把代码贴出来后面在讲解这样我觉得我会刚好说一些，大家也更容易理解一些
packageorg.demo.custon_view;
importandroid.content.Context;
importandroid.graphics.Bitmap;
importandroid.graphics.BitmapFactory;
importandroid.graphics.Canvas;
importandroid.graphics.Matrix;
importandroid.graphics.Paint;
importandroid.util.AttributeSet;
importandroid.view.MotionEvent;
importandroid.view.View;
importandroid.widget.ImageView;
/**
*@Title:SquaredPassWord.java
*@Description:九宫格密码
*@authorlhz
*@date2013年9月16日下午3:48:10
*@versionV1.0Copyright(c)2013Company,Inc.AllRightsReserved.
*
*/
publicclassSquaredPassWordextendsView{
ImageViewi;
privateintlength;//九宫格密码是正方形所以只要知道边长就可以
privatePoint[]points=newPoint[9];//九宫格节点
privateBitmapdefualtPointMap=BitmapFactory.decodeResource(getResources(),R.drawable.locus_round_original);//正常情况下点的位图
privateintpoitleght=defualtPointMap.getWidth();//节点的边长；这里值考虑正方形状态
privateBitmapselectPointMap=BitmapFactory.decodeResource(getResources(),R.drawable.locus_round_click);//选中情况下点的位图
privatePointstartPoint;//起点
privatePointtempPoint;//临时存储上一个节点
privateStringBufferpassWBuffer=newStringBuffer();//保存轨迹顺序的密码
privateBitmaplineBitmap=BitmapFactory.decodeResource(getResources(),R.drawable.locus_line);
privateintlineBitmapheight=lineBitmap.getHeight();
privatedoublelineBitmapWidth=lineBitmap.getWidth();
//以下四个变量是为了绘制最后一个跟手指之间的连线
privateintstartX;//移动起点X
privateintstartY;//移动起点Y
privateintmoveX;//正在移动的X
privateintmoveY;//正在移动的Y
publicSquaredPassWord(Contextcontext){
super(context);
}
publicSquaredPassWord(Contextcontext,AttributeSetattrs){
super(context,attrs);
}
publicSquaredPassWord(Contextcontext,AttributeSetattrs,intdefStyle){
super(context,attrs,defStyle);
}
@Override
publicbooleanonTouchEvent(MotionEventevent){
booleanflag=true;
switch(event.getAction()){
caseMotionEvent.ACTION_DOWN:
passWBuffer.delete(0,passWBuffer.length());
intx=(int)event.getX();
inty=(int)event.getY();
for(Pointpoint:points){
if(point.isInMyArea(x,y)){
point.setSelected(true);
tempPoint=startPoint=point;
startX=startPoint.getCenterX();
startY=startPoint.getCenterY();
passWBuffer.append(startPoint.getId());
}
}
invalidate();
break;
caseMotionEvent.ACTION_MOVE:
moveX=(int)event.getX();
moveY=(int)event.getY();
for(Pointpoint: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;
caseMotionEvent.ACTION_UP:
reSetData();
startX=startY=moveX=moveY=0;
invalidate();
flag=false;
break;
default:
break;
}
returnflag;
}
/**
*回复各个点到初始状态
*/
privatevoidreSetData(){
for(Pointpoint:points){
point.setSelected(false);
point.setNextID(point.getId());
}
}
@Override
protectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){
//TODOAuto-generatedmethodstub
intwidth=getWidth()-getPaddingLeft()-getPaddingRight();
intheight=getHeight()-getPaddingTop()-getPaddingBottom();
length=(width0)){
}
System.out.println(length);
initPionts(points);
super.onMeasure(widthMeasureSpec,heightMeasureSpec);
}
@Override
protectedvoidonDraw(Canvascanvas){
//TODOAuto-generatedmethodstub
if(moveX!=0&&moveY!=0&&startX!=0&&startY!=0){
//绘制当前活动的线段
drawLine(startX,startY,moveX,moveY,canvas);
}
drawLinePoint(canvas);
super.onDraw(canvas);
}
/**
*初始各节点
*
*@parampionts
*/
@SuppressWarnings("null")
privatevoidinitPionts(Point[]points){
intspacing=(length-poitleght*3)/2;
if(points==null&&points.length!=9){//只做九宫格的处理
return;
}else{
for(inti=0;i<9;i++){
introw=i/3;//行数
intcolumn=i%3;//列数；求整取余
intx=(poitleght+spacing)*column+getPaddingLeft();//x坐标
inty=(poitleght+spacing)*row+getPaddingTop();//y坐标
Pointpoint=newPoint((i+1),x,y,poitleght);
points[i]=point;
}
}
}
/**
*绘制各节点以及被选择的个节点之间的连线轨迹
*
*@paramcanvas
*/
privatevoiddrawLinePoint(Canvascanvas){
if(startPoint!=null){
drawP2POrbit(startPoint,canvas);
}
Paintpaint=null;//newPaint();
//绘制每个点的图片
for(Pointpoint:points){
if(point.isSelected()){//绘制大圈
canvas.drawBitmap(selectPointMap,point.getX(),point.getY(),paint);
}else{
canvas.drawBitmap(defualtPointMap,point.getX(),point.getY(),paint);
}
}
}
/**
*绘制点与点之间的轨迹
*
*@paramcanvas
*/
privatevoiddrawP2POrbit(Pointpoint,Canvascanvas){
if(point.getId()!=point.nextID){
//canvas.concat(matrix);
PointendPoint=null;
//获取目标节点
for(Pointpoint3: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);
}
}
}
/**
*画连线
*
*@paramstartX
*起点X
*@paramstartY
*起点Y
*@paramstopX
*终点X
*@paramstopY
*终点Y
*@paramcanvas
*/
privatevoiddrawLine(intstartX,intstartY,intstopX,intstopY,Canvascanvas){
Paintpaint=newPaint();
//获得斜边长度
doublehypotenuse=Math.hypot((stopX-startX),(stopY-startY));
//doubleside=stopX-startX;//邻边
//doublepiAngle=Math.acos(side/hypotenuse);//pi角度
//floatrotate=(float)(180/Math.PI*piAngle);//转换的角度
floatrotate=getDegrees(startX,startY,stopX,stopY);
Matrixmatrix=newMatrix();
//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();
//Paintpaint1=newPaint();
//paint1.setColor(Color.BLACK);
//paint1.setStrokeWidth(8);//粗细
//paint1.setFlags(Paint.ANTI_ALIAS_FLAG);
//canvas.drawLine(startX,startY,stopX,stopY,paint1);
}
/**
*获取角度
*
*@paramstartX
*起点X
*@paramstartY
*起点Y
*@paramstopX
*终点X
*@paramstopY
*终点Y
*/
privatefloatgetDegrees(intstartX,intstartY,intstopX,intstopY){
//获得斜边长度
doublehypotenuse=Math.hypot((stopX-startX),(stopY-startY));
doubleside=stopX-startX;//邻边
doublepiAngle=Math.acos(side/hypotenuse);//pi角度
floatrotate=(float)(180/Math.PI*piAngle);//转换的角度（0--180);
if(stopY-startY<0){//如果Y愁小于0说明角度在第三或者第四像限
rotate=360-rotate;
}
returnrotate;
}
/**
*轨迹顺序密码
*
*@return
*/
publicStringgetOrbitString(){
return(passWBuffer==null?null:passWBuffer.toString());
}
/**
*表示一个点
*
*@authorlanhaizhong
*
*/
classPoint{
privateintid;//点的id
privateintnextID;//连向下一个借点的id
privateintx;//点的左上角x坐标
privateinty;//点的左上角的y坐标
privatebooleanisSelected;//该节点是否被选中
privateintwidth;//点的长度这里只考虑正方形
publicPoint(){
super();
//TODOAuto-generatedconstructorstub
}
publicintgetId(){
returnid;
}
publicvoidsetId(intid){
this.id=id;
}
publicintgetNextID(){
returnnextID;
}
publicvoidsetNextID(intnextID){
this.nextID=nextID;
}
publicintgetX(){
returnx;
}
publicvoidsetX(intx){
this.x=x;
}
publicintgetY(){
returny;
}
publicvoidsetY(inty){
this.y=y;
}
publicbooleanisSelected(){
returnisSelected;
}
publicvoidsetSelected(booleanisSelected){
this.isSelected=isSelected;
}
publicintgetWidth(){
returnwidth;
}
publicvoidsetWidth(intwidth){
this.width=width;
}
publicPoint(intid,intx,inty,intwidth){
super();
this.id=id;
this.x=x;
this.y=y;
this.nextID=id;
this.isSelected=false;
this.width=width;
}
publicintgetCenterX(){
returnx+(width/2);
}
privateintgetCenterY(){
returny+(width/2);
}
/**
*判断某个坐标是否这个这个表示一个点的图形区域内
*
*@paramx
*@paramy
*@return
*/
publicbooleanisInMyArea(intx,inty){
//return(this.x
1、布局九个节点。将九个节点布局起来首先要知道控件宽和高，这样我们才能如何布局，在onMeasure(intwidthMeasureSpec,intheightMeasureSpec)方法中用getWidth()和getHeight();方法我们就可以得到高度和宽度，因为自定义布局还有一个padding属性，所以我们还要计算这个步骤。所以计算真正布局这九个节点的正方形的边长（我们这里是做正方形的九宫格）为：
intwidth=getWidth()-getPaddingLeft()-getPaddingRight();
intheight=getHeight()-getPaddingTop()-getPaddingBottom();
length=(width
那么现在我们可以确定每个节点的位置了第一个节点为（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九宫格密码Demo
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。