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

顺亿

2026-09-24 • 👁 0人浏览过

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

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

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

我们就把九宫格分解成

外圆、内圆、连线三部分

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

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

private ArrayList 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 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 mListRectFs;//圆的外形矩形private ArrayList mListCircle;//外圆的圆心private LinkedHashSet 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自定义View九宫格手势密码解锁Android实现九宫格手势解锁Android自定义控件实现九宫格解锁

相关文章