当年感觉九宫格解锁很是高大上，一脸懵逼，今天正好要做解锁这一块业务，回头来看九宫格，这特么简单啊

首先理清一下逻辑，我们要做NxN的九宫格 下图是3x3的简单图例

// -(--)-(--)-(--)-
// -(--)-(--)-(--)-
// -(--)-(--)-(--)-

我们就把九宫格分解成

外圆 、内圆、连线三部分

外圆半径Radius，内圆半径dp（5）

建立一个集合来放置 外圆的圆心（ 内圆的圆心也一样）

 private ArrayList<Point> mListCircle;//外圆的圆心

 for (int i = 0; i < mCount; i++) {
      for (int j = 0; j < mCount; j++) {
        Point point = new Point((3 * i + 2) * (int) mRadius, (3 * j + 2) * (int) mRadius);
        mListCircle.add(point);
      }
    }

这样我们就初始化好了内外圆的位置point集合

我们draw一下看一下效果

void drawAll_Cicle(Canvas canvas) {
    for (int i = 0; i < mListCircle.size(); i++) {
      Point point = mListCircle.get(i);
        canvas.drawCircle(point.x, point.y, mRadius, mPaint);
        canvas.drawCircle(point.x, point.y, mMinRadius, miniPaint);
    }

效果图就是上图了 （哈哈一样的）

主结构已经画完了，接下来就是如何绘制点与点之间的连线了，有人会觉得没思路，其实很简单了，以3X3 为例子哈
我们可以给这九个棋子编号1--9号，把他存入LinkedHashSet中，着重介绍这个LinkedHashSet有顺序不重复这个真的在合适不过了。

这样就不会有重复的事情了。这个和解锁时候的密码也很契合。所以选对了存储方式会事半功倍。

还有一个问题，就是点击边界问题，这个好解决，我们把每一个棋子都花矩形，通过圆来控制边界，（其实也可以通过矩形来控制边界，这个也很简单，原理是差不多的，有兴趣的同学可以下去试试）

同样也是用集合。和上边的圆是一样一样的。

ArrayList<RectF> mListRectFs;
for (int i = 0; i < mCount; i++) {
      for (int j = 0; j < mCount; j++) {
        RectF rectF = new RectF((3 * i + 1) * mRadius, (3 * j + 1) * mRadius, (3 * i + 3) * mRadius, (3 * j + 3) * mRadius);
        mListRectFs.add(rectF)；
      }
    }

好边界也有了，我们来计算边界返回编号

/**
   * 点和圆形碰撞检测
   *
   * @param x1   手指接触点
   * @param y1   手指接触点
   * @param x2   外圆
   * @param y2   外圆
   * @param radius 半径
   * @return
   */
  private boolean isCollision(float x1, float y1, float x2, float y2, float radius) {
    if (Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) <= radius) {
      // 如果点和圆心距离小于或等于半径则认为发生碰撞
      return true;
    }
    return false;
  }


/**
   * 判断触摸点在哪个item上
   *
   * @param x
   * @param y
   * @return
   */
  private int touchIndex(float x, float y) {
    for (int i = 0; i < mListCircle.size(); i++) {
      Point p = mListCircle.get(i);
      if (isCollision(x, y, p.x, p.y, mRadius)) {
        return i;
      }
    }

    return -1;
  }

几个关键点都写到了接下来就是具体的细节了。我把代码都贴上来，注释的很详细。当然加入了一个手指触控点，更加好看一些。

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.HapticFeedbackConstants;
import android.view.MotionEvent;
import android.view.View;

import java.util.ArrayList;
import java.util.LinkedHashMap;
import java.util.LinkedHashSet;

/**
 * Created by ld on 2017/7/25.
 */

public class NineGridLockView extends View {
  private Context context;
  int index_point = 0;
  private float mDensity;
  private int mCount = 3;
  private ArrayList<RectF> mListRectFs;//圆的外形矩形
  private ArrayList<Point> mListCircle;//外圆的圆心
  private LinkedHashSet<Integer> mSetPoints;//记录需要连线的外圆圆心点在mListCircle中的索引值，LinkedHashSet线性不可重复 集合，FIFO
  private Paint mPaint, miniPaint;//画笔
  private float mRadius;//外圆半径
  private float mMinRadius;//内圆半径
  private float mStrokeWidth = 10; //绘制时的画笔宽度
  private Point mMovePoint; //记录手指移动时的点

  public NineGridLockView(Context context) {
    this(context, null);
  }

  public NineGridLockView(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.context = context;
    mDensity = getContext().getResources().getDisplayMetrics().density;
    mListRectFs = new ArrayList<>();
    mListCircle = new ArrayList<>();
    mPaint = new Paint();
    mPaint.setStrokeWidth(5);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setAntiAlias(true);
    mPaint.setColor(Color.BLUE);

    miniPaint = new Paint();
    miniPaint.setColor(Color.BLACK);
    miniPaint.setAntiAlias(true);
    miniPaint.setStyle(Paint.Style.STROKE);
    miniPaint.setStrokeWidth(5);
    mMinRadius = dp(5);
    mSetPoints = new LinkedHashSet<>();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    drawAll_Cicle(canvas);
    draw_line(canvas);
  }

  private int dp(int dp) {
    return (int) (dp * mDensity + 0.5f);
  }

  //绘制 连接线
  void draw_line(Canvas canvas) {
    Point p1 = null;
    Point p2 = null;
    //从结合中获取 move过的点
    for (int index : mSetPoints) {
      //当第一个点为null的时候 给第一个点赋值
      if (p1 == null) {
        p1 = mListCircle.get(index);
        //然后 给第二个点赋值 两点一条线
      } else if (p2 == null) {
        p2 = mListCircle.get(index);
        canvas.drawLine(p1.x, p1.y, p2.x, p2.y, mPaint);
        //p1 挪到p2
        p1 = p2;
        //接下来就是第三个点了 乃至更多点
      } else {
        //p2重新赋值 两点一条线
        p2 = mListCircle.get(index);
        canvas.drawLine(p1.x, p1.y, p2.x, p2.y, mPaint);
        //p1 挪到p2
        p1 = p2;
      }

    }

    //绘制实时连线
    if (mMovePoint != null && p1 != null) {
      canvas.drawLine(p1.x, p1.y, mMovePoint.x, mMovePoint.y, mPaint);
    }
  }

  //绘制 外圆 内圆
  void drawAll_Cicle(Canvas canvas) {
    for (int i = 0; i < mListRectFs.size(); i++) {
      Point point = mListCircle.get(i);
      //如果move过的 就换颜色
      if (mSetPoints.contains(i)) {
        canvas.drawCircle(point.x, point.y, mRadius, miniPaint);
        canvas.drawCircle(point.x, point.y, mMinRadius, mPaint);

      } else {

        canvas.drawCircle(point.x, point.y, mRadius, mPaint);
        canvas.drawCircle(point.x, point.y, mMinRadius, miniPaint);
      }

    }

  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    float w = Math.min(getMeasuredWidth(), getMeasuredHeight());
    //   -(--)-(--)-(--)-
    //   -(--)-(--)-(--)-
    //   -(--)-(--)-(--)-
    mRadius = getMeasuredWidth() * 1.00f / (mCount * 3 + 1);

    float rectWH = mRadius * 2;
    mListRectFs.clear();
    mListCircle.clear();
    for (int i = 0; i < mCount; i++) {
      for (int j = 0; j < mCount; j++) {
        RectF rectF = new RectF((3 * i + 1) * mRadius, (3 * j + 1) * mRadius, (3 * i + 3) * mRadius, (3 * j + 3) * mRadius);
        mListRectFs.add(rectF);
        Point point = new Point((3 * i + 2) * (int) mRadius, (3 * j + 2) * (int) mRadius);


        mListCircle.add(point);
      }
    }

  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    float point_x = event.getX();
    float point_y = event.getY();

    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:


        break;
      case MotionEvent.ACTION_UP:
        mMovePoint = null;
        mSetPoints.clear();
        invalidate();
        break;
      case MotionEvent.ACTION_MOVE:

        int index = touchIndex(point_x, point_y);
        if (mMovePoint == null) {
          mMovePoint = new Point((int) point_x, (int) point_y);
        } else {
          mMovePoint.set((int) point_x, (int) point_y);
        }

        if (index != -1) {
          mSetPoints.add(index);
          if (index_point != mSetPoints.size()) {
            index_point = mSetPoints.size();
            performHapticFeedback(HapticFeedbackConstants.LONG_PRESS);
          }
        }
        invalidate();
        break;
    }

    return true;
  }


  /**
   * 判断触摸点在哪个item上
   *
   * @param x
   * @param y
   * @return
   */
  private int touchIndex(float x, float y) {
    for (int i = 0; i < mListCircle.size(); i++) {
      Point p = mListCircle.get(i);
      if (isCollision(x, y, p.x, p.y, mRadius)) {
        return i;
      }
    }

    return -1;
  }

  /**
   * 点和圆形碰撞检测
   *
   * @param x1   手指接触点
   * @param y1   手指接触点
   * @param x2   外圆
   * @param y2   外圆
   * @param radius 半径
   * @return
   */
  private boolean isCollision(float x1, float y1, float x2, float y2, float radius) {
    if (Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) <= radius) {
      // 如果点和圆心距离小于或等于半径则认为发生碰撞
      return true;
    }
    return false;
  }
}

下一篇会把把应用锁和这个结合起来，就是appLock功能了。敬请期待···

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

# Android九宫格解锁  # Android实现解锁九宫格  # android 九宫格滑动解锁开机实例源码学习  # 轻松实现Android自定义九宫格图案解锁  # Android实现九宫格解锁  # 轻松实现安卓(Android)九宫格解锁  # 使用Android自定义控件实现滑动解锁九宫格  # Android 仿小米锁屏实现九宫格解锁功能(无需图片资源)  # Android自定义控件实现九宫格解锁功能  # Android自定义View九宫格手势密码解锁  # Android实现九宫格手势解锁  # Android自定义控件实现九宫格解锁  # 九宫格  # 第一个  # 解锁  # 也很  # 要做  # 一条线  # 两点  # 多点  # 几个  # 这一  # 好了  # 过了  # 把他  # 一脸  # 我把  # 我们可以  # 点了  # 可以通过  # 就把  # 第二个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何在阿里云ECS服务器部署织梦CMS网站？  Mybatis 中的insertOrUpdate操作  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  奇安信“盘古石”团队突破 iOS 26.1 提权  再谈Python中的字符串与字符编码（推荐）  Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  html5源代码发行怎么设置权限_访问权限控制方法与实践【指南】  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  什么是javascript作用域_全局和局部作用域有什么区别？  如何使用 jQuery 正确渲染 Instagram 风格的标签列表  C语言设计一个闪闪的圣诞树  Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  Edge浏览器提示“由你的组织管理”怎么解决_去除浏览器托管提示【修复】  Laravel如何实现全文搜索功能？（Scout和Algolia示例）  网站建设整体流程解析，建站其实很容易！  详解Android——蓝牙技术 带你实现终端间数据传输  Laravel怎么在Controller之外的地方验证数据  php后缀怎么变mp4格式错误_修改扩展名提示格式不对怎么办【技巧】  利用vue写todolist单页应用  Linux网络带宽限制_tc配置实践解析【教程】  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  如何用wdcp快速搭建高效网站？  Windows Hello人脸识别突然无法使用  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  如何快速生成ASP一键建站模板并优化安全性？  如何快速搭建安全的FTP站点？  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  Laravel表单请求验证类怎么用_Laravel Form Request分离验证逻辑教程  免费视频制作网站,更新又快又好的免费电影网站？  Laravel如何实现API版本控制_Laravel版本化API设计方案  Laravel中的withCount方法怎么高效统计关联模型数量  *服务器网站为何频现安全漏洞？  PythonWeb开发入门教程_Flask快速构建Web应用  php打包exe后无法访问网络共享_共享权限设置方法【教程】  千问怎样用提示词获取健康建议_千问健康类提示词注意事项【指南】  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  如何在阿里云域名上完成建站全流程？  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  Laravel中Service Container是做什么的_Laravel服务容器与依赖注入核心概念解析  ,南京靠谱的征婚网站？  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  如何在 React 中条件性地遍历数组并渲染元素  Laravel如何记录自定义日志？（Log频道配置）  如何在橙子建站上传落地页？操作指南详解  Python文件异常处理策略_健壮性说明【指导】  手机网站制作与建设方案,手机网站如何建设？  微信小程序 五星评分(包括半颗星评分)实例代码  怎么用AI帮你设计一套个性化的手机App图标？  微信h5制作网站有哪些,免费微信H5页面制作工具？