欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android实现九宫格解锁的实例代码

程序员文章站 2023-11-17 22:11:10
当年感觉九宫格解锁很是高大上,一脸懵逼,今天正好要做解锁这一块业务,回头来看九宫格,这特么简单啊 首先理清一下逻辑,我们要做nxn的九宫格 下图是3x3的简单图例...

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

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

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

Android实现九宫格解锁的实例代码

我们就把九宫格分解成

外圆 、内圆、连线三部分

外圆半径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功能了。敬请期待···

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