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九宫格密码Demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android实现九宫格(GridView中各项平分空间)的方法

    本文实例讲述了Android实现九宫格(GridView中各项平分空间)的方法.分享给大家供大家参考.具体如下: 项目需要做一个九宫格(也不一定是9的,4宫格.16宫格.4x3宫格...),封了 一个宫格,它能够根据为它分配的空间来自动的调节宫中各项的尺寸. 从TableLayout集成来的,因此如果你直接在设计器上使用该封装的话需要把它自动加进去的那几个TableRow删除一下. 类名为AdvancedGridView,代码如下: import android.content.Context;

  • Android打造流畅九宫格抽奖活动效果

    因为company项目中需要做九宫格抽奖活动,以前都没有做过类似的功能,虽然之前在浏览大神们的博客中,无意中也看到了好多关于抽奖的项目,但因为项目中没有需要,一直都没有点击进去看.这次不去看估计不行.直到公司计划要做抽奖功能,才迫不得已上网查找demo 网上找了大半天,好不容易找到了几个demo,下载下来,解压缩包发现竟然里面空空如也,只有几张九宫格的图片,害我白白浪费了几个CSDN积分.后面在eoe网站那发现了一个demo,于是好开心,下载下来后马上导入到工程中,运行看了效果,九宫格是出来了,

  • Android九宫格程序设计代码

    本文介绍九宫格程序的设计代码. 一.相关介绍 (一)效果显示 1.程序刚运行时的效果: 2.在页面上点击选择并滑动时的画面 3.选择密码之后的显示 (二)功能介绍 1.点击某圆圈后,在该圆圈的中心添加一个实行的小圆. 2.页面滑动出现一条跟随的线. 3.滑动到另一个圆圈时,产生一条连接的直线. 4.选择的圆圈点数大于等于4个后,手指抬起,就会保存密码. 4.选择的圆圈的数是最大值后,马上保存密码. (三)涉及到的知识点 本示例使用的是自定义的View来绘制九宫格,并保存图像,这里的九个点分别代表

  • 轻松实现Android自定义九宫格图案解锁

    Android实现九宫格图案解锁,自带将图案转化成数字密码的功能,代码如下: LockPatternView.java package com.jackie.lockpattern; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Point; import android.text.TextUtils; i

  • 使用Android自定义控件实现滑动解锁九宫格

    本文概述:  滑动解锁九宫格的分析: 1.需要自定义控件: 2.需要重写事件onTouchEvent(); 3.需要给九个点设置序号和坐标,这里用Map类就行: 4.需要判断是否到滑到过九点之一,并存储滑到过的点的序号,而且需要一个方法可以返回它们,这里用List类就行: 滑动解锁当前还是比较流行的,今天写了个简单的滑动解锁九宫格的例程,分享出来让初学者看看. 我的是这样的: Demo 首先,自定义一个View /** * 九宫格 */ public class NineGridView ext

  • android 九宫格滑动解锁开机实例源码学习

    效果图由于网站占时不能上传,以后补上. NinePointLineView.java 复制代码 代码如下: package org.demo.custon_view; import org.demo.utils.MLog; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; imp

  • Android实现九宫格解锁的方法

    相信大家都有使用九宫格解锁,比如在设置手机安全项目中,可以使用九宫格解锁,提高安全性,以及在使用支付功能的时候,为了提高安全使用九宫锁,今天就为大家介绍Android实现九宫格的方法,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas

  • Android开发之实现GridView支付宝九宫格

    先给大家展示下关于仿支付宝钱包首页中带有分割线的gridview,俗称九宫格 的效果图,怎么样是不是和你想象的一样啊.在你的预料之中就继续访问以下代码内容吧. 我们都知道ListView设置分割线是非常容易的,设置ListView的分割线颜色和宽度,只需要在布局中定义android:divider和android:dividerHeight属性即可.而GridView并没有这样的属性和方法,那我们改如何来做呢? 我们小编在做这个效果之前,也参考了其他的一些方案,比如说定义一个自定义的GridVi

  • Android编程之九宫格实现方法实例分析

    本文实例讲述了Android编程之九宫格实现方法.分享给大家供大家参考,具体如下: 显示九宫格需要用GridView , 要显示每个格子中的视图有两种方式,第一种方式是做成xml文件,再将xml文件做成视图.第二种方式就是在代码中构建出这样一种布局,这里采用第一种方式来实现: GridView: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="ht

  • Android 九宫格的实现方法

    1.xml代码: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"       android:orientation="vertical"      android:layout_width="fill

  • Android编程简单实现九宫格示例

    本文实例讲述了Android编程简单实现九宫格.分享给大家供大家参考,具体如下: 实现的步骤 1. 一个整体的容器部分.就是上图中包括整个图片项个各个部分,这里我们使用gridView(表格布局)来实现 2.整个界面里需要注意的是 "重复的部分",就是 各个图片项和,图片下方显示的文字了.那么我们需要描述这个部分.在描述时,要说明图片位于上方,文字位于下方. 3.迭代,或者说重复的将各项 插入(放入)到容器内. 需要添加/修改3个文件:main.xml.meunitem.xml.act

随机推荐