我要评论当年感觉九宫格解锁很是高大上，一脸懵逼，今天正好要做解锁这一块业务，回头来看九宫格，这特么简单啊
首先理清一下逻辑，我们要做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功能了。敬请期待···
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论