热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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 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 &#63; 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 

1、布局九个节点。将九个节点布局起来首先要知道控件宽和高,这样我们才能如何布局,在onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法中用getWidth()和getHeight(); 方法我们就可以得到高度和宽度,因为自定义布局还有一个padding属性,所以我们还要计算这个步骤。所以计算真正布局这九个节点的正方形的边长(我们这里是做正方形的九宫格)为:
int width = getWidth() - getPaddingLeft() - getPaddingRight();
int height = getHeight() - getPaddingTop() - getPaddingBottom();
length = (width 获取边长如果这个边长大于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

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


推荐阅读
  • CSS3 @font-face 字体应用技术解析与实践
    在Web前端开发中,HTML教程和CSS3的结合使得网页设计更加多样化。长期以来,Web设计师受限于“web-safe”字体的选择。然而,CSS3中的`@font-face`规则允许从服务器端加载自定义字体,极大地丰富了网页的视觉效果。通过这一技术,设计师可以自由选择和使用各种字体,提升用户体验和页面美观度。本文将深入解析`@font-face`的实现原理,并提供实际应用案例,帮助开发者更好地掌握这一强大工具。 ... [详细]
  • 在Android应用开发中,实现与MySQL数据库的连接是一项重要的技术任务。本文详细介绍了Android连接MySQL数据库的操作流程和技术要点。首先,Android平台提供了SQLiteOpenHelper类作为数据库辅助工具,用于创建或打开数据库。开发者可以通过继承并扩展该类,实现对数据库的初始化和版本管理。此外,文章还探讨了使用第三方库如Retrofit或Volley进行网络请求,以及如何通过JSON格式交换数据,确保与MySQL服务器的高效通信。 ... [详细]
  • 初探性能优化:入门指南与实践技巧
    在编程领域,常有“尚未精通编码便急于优化”的声音。为了从性能优化的角度提升代码质量,本文将带领读者初步探索性能优化的基本概念与实践技巧。即使程序看似运行良好,数据处理效率仍有待提高,通过系统学习性能优化,能够帮助开发者编写更加高效、稳定的代码。文章不仅介绍了性能优化的基础知识,还提供了实用的调优方法和工具,帮助读者在实际项目中应用这些技术。 ... [详细]
  • 作为软件工程专业的学生,我深知课堂上教师讲解速度之快,很多时候需要课后自行消化和巩固。因此,撰写这篇Java Web开发入门教程,旨在帮助初学者更好地理解和掌握基础知识。通过详细记录学习过程,希望能为更多像我一样在基础方面还有待提升的学员提供有益的参考。 ... [详细]
  • ButterKnife 是一款用于 Android 开发的注解库,主要用于简化视图和事件绑定。本文详细介绍了 ButterKnife 的基础用法,包括如何通过注解实现字段和方法的绑定,以及在实际项目中的应用示例。此外,文章还提到了截至 2016 年 4 月 29 日,ButterKnife 的最新版本为 8.0.1,为开发者提供了最新的功能和性能优化。 ... [详细]
  • 本文详细介绍了使用 Python 进行 MySQL 和 Redis 数据库操作的实战技巧。首先,针对 MySQL 数据库,通过 `pymysql` 模块展示了如何连接和操作数据库,包括建立连接、执行查询和更新等常见操作。接着,文章深入探讨了 Redis 的基本命令和高级功能,如键值存储、列表操作和事务处理。此外,还提供了多个实际案例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 在众多市场调研公司中,如何选择一家值得信赖的合作伙伴至关重要。基于我在市场调查行业近二十年的经验,我将推荐几家国内知名的市场调研机构,供您参考:1. 开元研究——专注于零售报刊发行研究、媒体广告价值评估及网络营销分析等领域,以其专业性和准确性赢得了广泛认可。 ... [详细]
  • 在Android开发中,实现多点触控功能需要使用`OnTouchListener`监听器来捕获触摸事件,并在`onTouch`方法中进行详细的事件处理。为了优化多点触控的交互体验,开发者可以通过识别不同的触摸手势(如缩放、旋转等)并进行相应的逻辑处理。此外,还可以结合`MotionEvent`类提供的方法,如`getPointerCount()`和`getPointerId()`,来精确控制每个触点的行为,从而提升用户操作的流畅性和响应性。 ... [详细]
  • 在 CentOS 6.5 系统上部署 VNC 服务器的详细步骤与配置指南
    在 CentOS 6.5 系统上部署 VNC 服务器时,首先需要确认 VNC 服务是否已安装。通常情况下,VNC 服务默认未安装。可以通过运行特定的查询命令来检查其安装状态。如果查询结果为空,则表明 VNC 服务尚未安装,需进行手动安装。此外,建议在安装前确保系统的软件包管理器已更新至最新版本,以避免兼容性问题。 ... [详细]
  • POJ3669题目解析:基于广度优先搜索的详细解答
    POJ3669(http://poj.org/problem?id=3669)是一道典型的广度优先搜索(BFS)问题。由于陨石的降落具有时间属性,导致地图状态会随时间动态变化。因此,可以利用结构体来记录每个陨石的降落时间和位置,从而有效地进行状态更新和路径搜索。 ... [详细]
  • 如何高效地安装并配置 PostgreSQL 数据库系统?本文将详细介绍从下载到安装、配置环境变量、初始化数据库、以及优化性能的全过程,帮助读者快速掌握 PostgreSQL 的核心操作与最佳实践。文章还涵盖了常见问题的解决方案,确保用户在部署过程中能够顺利解决遇到的各种挑战。 ... [详细]
  • C# .NET 4.1 版本大型信息化系统集成平台中的主从表事务处理标准示例
    在C# .NET 4.1版本的大型信息化系统集成平台中,本文详细介绍了主从表事务处理的标准示例。通过确保所有操作要么全部成功,要么全部失败,实现主表和关联子表的同步插入。主表插入时会返回当前生成的主键,该主键随后用于子表插入时的关联。以下是一个示例代码片段,展示了如何在一个数据库事务中同时添加角色和相关用户。 ... [详细]
  • 手指触控|Android电容屏幕驱动调试指南
    手指触控|Android电容屏幕驱动调试指南 ... [详细]
  • 今天我开始学习Flutter,并在Android Studio 3.5.3中创建了一个新的Flutter项目。然而,在首次尝试运行时遇到了问题,Gradle任务 `assembleDebug` 执行失败,退出状态码为1。经过初步排查,发现可能是由于依赖项配置不当或Gradle版本不兼容导致的。为了解决这个问题,我计划检查项目的 `build.gradle` 文件,确保所有依赖项和插件版本都符合要求,并尝试更新Gradle版本。此外,还将验证环境变量配置是否正确,以确保开发环境的稳定性。 ... [详细]
  • iOS 设备唯一标识获取的高效解决方案与实践
    在iOS 7中,苹果公司再次禁止了对MAC地址的访问,使得开发者无法直接获取设备的物理地址。为了在开发过程中实现设备的唯一标识,苹果推荐使用Keychain服务来存储和管理唯一的标识符。此外,还可以结合其他技术手段,如UUID和广告标识符(IDFA),以确保设备的唯一性和安全性。这些方法不仅能够满足应用的需求,还能保护用户的隐私。 ... [详细]
author-avatar
buxin81588_416
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有