自定义 View 之实现九宫格锁屏效果

博主声明：

转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主 威威喵 原创，请多支持与指教。

本文首发于此 博主：威威喵 | 博客主页：https://blog.csdn.net/smile_running

Android 锁屏功能是我们最常用的、最经常接触的一个软件之一了吧，因为我个人也是使用的 Android 手机，虽然手机不怎么好，但是也有锁屏这个功能。虽然现在的手机都是指纹解锁，但是我的手机解锁功能，它被我设置了一种模式，就是当我离开手机超过一定时间，或者说手机很长一段时间处于没有使用状态时，它就会自动给你锁上，而且这个锁只能靠屏幕设定的九宫格锁来解除这个模式，不能通过指纹来解锁。

说了这么多，当然并不是做这个功能，我个人认为它的实现肯定是利用了手机的传感器来判断你的手机是否处在被你使用的状态，至于怎么实现的，还需进一步考虑。不过呢，我们今天要实现的肯定也和上面我提到的东西有关，那就是 Android 的九宫格锁屏功能，不仅是 Android 的手机，苹果的也都有这样的功能。

首先，这个功能的实用程度不用我多说了吧，虽然现在都是指纹识别的，或者更高级的人脸识别，但是九宫格毕竟是经典中的经典，虽然之前还有数字按钮的解锁功能，但是九宫格看起来档次就高了一些。

好吧，我们直接来看看如何实现下面这样的一个九宫格解锁效果。

image

我们首要做的第一步就是把这九个点给绘制出来，这个应该很简单吧，一个循环计算一下每排点的坐标，然后绘制三排即可。然后还需要绘制一个文字的提示文本，关键代码如下：

    /**
     * 添加 9 个点
     */
    private void addNinePoints() {
        mPoints.clear();
        for (int i = 1; i <= 3; i++) {
            // 第一排 第 2 个点
            float x1 = mCircleX;
            float y = mCircleY / 2 * i;// 每一排 y 坐标都是一个样的
            mPoint = new PointF(x1, y);
            mPoints.add(mPoint);

            // 第一排 第 1 个点
            float x2 = mCircleX / 3;
            mPoint = new PointF(x2, y);
            mPoints.add(mPoint);

            // 第一排 第 3 个点
            float x3 = mWidth - mCircleX / 3;
            mPoint = new PointF(x3, y);
            mPoints.add(mPoint);

        }
    }

    private void drawCircles(Canvas canvas) {
        canvas.drawText("请输入解锁图案", mWidth / 2 - mPaint.getTextSize() * 3.5f, mHeight / 9, mPaint);

        for (PointF point : mPoints) {
            canvas.drawCircle(point.x, point.y, mCircleRadius, mPaint);
        }
    }

你会看到如下的效果

image

那么到了这一步，就算是成功了一小步了。接着我们应该去添加手势识别的事件，可以根据我们的手指滑动去绘制一条解锁的路径。这一步比较关键，首先我们得判断手指是否真的碰到了小圆，这里就要做一下碰撞检测的逻辑，没触碰到，当然就不会画路径了。

那么怎么才算触碰到圆呢，这个还是比较简单的。因为圆一周的距离都是一样的，我们去判断触摸点有没有在圆内部，就是判断触摸点与圆心的距离是否小于半径了，如下如：

image

代码就是计算两个点的距离

    private boolean isInsideCircle(float downX, float downY, float circleX, float circleY) {
        return mCircleRadius > Math.sqrt(Math.pow(downX - circleX, 2) + Math.pow(downY - circleY, 2));
    }

好了，现在我们有了可以判断触摸点可以在圆内的逻辑，可以开始写手势识别的事件了。首先，我们要搞清楚两个状态，一个是正常状态的圆，全部画粉红色，另一个是被按下的圆，我们画其他颜色。

第二个关键思路，我们在手指按下且继续移动的时候，不同颜色的点必定也会随之增加，我这里采取了遍历的做法，因为我们每一个圆的圆心坐标都是唯一的，这里采用不能有重复的 Set 集合来保存被按下的点。我们在 MOVE 事件里面，通过遍历固定圆点和手指触摸点进行判断是否包含在圆内，是就添加到 Set 集合，然后在 onDraw 里面把被按下的集合点全部绘制出来。那么，代码如下：

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float downX = event.getX();
        float downY = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                for (PointF point : mPoints) {
                    // 取出每一个圆的圆心坐标
                    mStatus = MOVE;
                    float circleX = point.x;
                    float circleY = point.y;
                    if (isInsideCircle(downX, downY, circleX, circleY)) {
                        mSelectedPoints.add(point);
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                mStatus = NORMAL;
                mSelectedPoints.clear();
                break;
        }
        invalidate();
        return true;
    }

这里的 DOWN 事件其实可以不用处理，与 MOVE 事件做一样的操作就行。然后是绘制代码

    @Override
    protected void onDraw(Canvas canvas) {
        switch (mStatus) {
            case NORMAL:
                drawCircles(canvas);
                break;
            case MOVE:
                drawCircles(canvas);
                if (mSelectedPoints.size() > 0) {
                    for (PointF point : mSelectedPoints)
                        canvas.drawCircle(point.x, point.y, mCircleRadius, mSelectedPaint);
                }
                break;
        }
    }

当手指 Up 的时候，我们状态就变为正常，绘制的就是正常的圆了。好了，一起看一下效果吧

image

还行吧，至少效果达到了，样子虽然难看了一点点，不过我们后面可以用图片来替换掉。现在我们来绘制路径的效果，绘制路径这里非常坑啊，我用循环遍历来绘制 Path 的时候，会出现线乱连的效果，就是这个样子的

image

起初还想着为什么会这样呢，可能是我的 for 循环把 path.lineTo 搞乱了吗，不应该啊。后来写我们的序号的时候，也就是按下的圆点的号码，它也是乱的，我立马反应过来，原来是我傻了，用了一个 ArraySet 去保存，难怪会乱序，我靠，搞了我好久，这里一定要记住这个坑啊，不细心的话，还真不知道哪里写错了，后来我用了 LinkedHashSet 就正常了。代码如下：

                    if (mHasPath) {
                        mPath.reset();
                        moveFirst = 0;
                        for (NumberPoint point : mPasswordSet) {
                            if ((++moveFirst) == 1)
                                mPath.moveTo(point.x, point.y);
                            else
                                mPath.lineTo(point.x, point.y);
                        }
                        //如果需要绘制路径
                        canvas.drawPath(mPath, mPathPaint);
                    }

代码还是比较简单的，如果是第一个点的话，要 moveTo 一下即可，看效果吧

image

好了，这样就可以了。我们刚刚改了一下代码，为每一个点标上了数字，顺序是 123... ，这个大家都懂的。这里做标记是为了能够提供九宫格锁的验证效果，我们把点连起来就是一串数字，然后我们去匹配已经设置的密码就好了。

我这里设置默认密码为 2 4 8 6，这四个数字相连。我们来试试效果吧

image

最后，本案例的完整代码如下：

package nd.no.xww.qqmessagedragview;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.os.Build;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.util.ArraySet;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import java.util.ArrayList;
import java.util.LinkedHashSet;
import java.util.List;
import java.util.Set;

/**
 * @author xww
 * @desciption :
 * @date 2019/8/4
 * @time 14:28
 * 博主：威威喵
 * 博客：https://blog.csdn.net/smile_Running
 */
@RequiresApi(api = Build.VERSION_CODES.M)
public class UnlockView extends View {

    // 默认九宫格图像解锁密码
    private final String DEF_PASSWORD = "2486";

    private boolean unlock = false;

    private Paint mNormalPaint;
    private Paint mSelectedPaint;
    private Paint mPathPaint;

    private float mWidth;
    private float mHeight;

    private float mCircleX;
    private float mCircleY;
    private float mCircleRadius;

    // 储存不被按下的圆
    private List<NumberPoint> mNormalPoints;
    //储存在手指移动后被按下的圆
    private Set<NumberPoint> mSelectedPoints;

    private int mPreSize;

    private Path mPath;
    private int moveFirst;

    //是否绘制路径
    private boolean mHasPath;

    private final int NORMAL = 1;
    private final int MOVE = 3;
    private int mStatus = NORMAL;

    private int mDwonStartX;
    private int mDwonStartY;

    private Set<NumberPoint> mPasswordSet;

    private void init() {
        mNormalPaint = getPaint(Color.parseColor("#f81B60"));
        mSelectedPaint = getPaint(Color.parseColor("#aaaaff"));
        mPathPaint = getPaint(Color.parseColor("#aaaaff"));
        mPathPaint.setStyle(Paint.Style.STROKE);
        mPathPaint.setStrokeWidth(15f);

        mNormalPoints = new ArrayList<>();
        mSelectedPoints = new ArraySet<>();
        mPasswordSet = new LinkedHashSet<>();

        mWidth = getResources().getDisplayMetrics().widthPixels;
        mHeight = getResources().getDisplayMetrics().heightPixels;

        mCircleX = mWidth / 2;
        mCircleY = mHeight / 2;

        mCircleRadius = mCircleX / 5;

        mPath = new Path();
        mPath.setFillType(Path.FillType.EVEN_ODD);
        addNinePoints();// 初始化 9 个点

        setDrawPath(true);
    }

    private Paint getPaint(int color) {
        Paint paint = new Paint();
        paint.setDither(true);
        paint.setAntiAlias(true);
        paint.setTextSize(70f);
        paint.setColor(color);
        return paint;
    }

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

    public UnlockView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public UnlockView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    /**
     * 添加 9 个点
     */
    private void addNinePoints() {
        mNormalPoints.clear();
        NumberPoint mPoint = null;

        for (int i = 1; i <= 3; i++) {
            // 第一排 第 1 个点
            float x2 = mCircleX / 3;
            float y = mCircleY / 2 * i;// 每一排 y 坐标都是一个样的
            mPoint = new NumberPoint(1 + (i - 1) * 3);
            mPoint.set(x2, y);
            mNormalPoints.add(mPoint);

            // 第一排 第 2 个点
            float x1 = mCircleX;
            mPoint = new NumberPoint(2 + (i - 1) * 3);
            mPoint.set(x1, y);
            mNormalPoints.add(mPoint);

            // 第一排 第 3 个点
            float x3 = mWidth - mCircleX / 3;
            mPoint = new NumberPoint(3 + (i - 1) * 3);
            mPoint.set(x3, y);
            mNormalPoints.add(mPoint);
        }
    }

    public void setDrawPath(boolean hasPath) {
        this.mHasPath = hasPath;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        switch (mStatus) {
            case NORMAL:
                drawCircles(canvas);

                break;
            case MOVE:
                drawCircles(canvas);

                if (mSelectedPoints.size() > 0) {
                    for (NumberPoint point : mSelectedPoints) {
                        canvas.drawCircle(point.x, point.y, mCircleRadius, mSelectedPaint);

                        mPasswordSet.add(point);
                    }

                    if (mHasPath) {
                        mPath.reset();
                        moveFirst = 0;
                        for (NumberPoint point : mPasswordSet) {
                            if ((++moveFirst) == 1)
                                mPath.moveTo(point.x, point.y);
                            else
                                mPath.lineTo(point.x, point.y);

                        }
                        //如果需要绘制路径
                        canvas.drawPath(mPath, mPathPaint);
                    }
                }
                break;
        }
    }

    private void drawCircles(Canvas canvas) {
        if (unlock) {
            mNormalPaint.setColor(Color.parseColor("#00ff00"));
            canvas.drawText("解锁成功", mWidth / 2 - mNormalPaint.getTextSize() * 2f, mHeight / 9, mNormalPaint);
        } else {
            mNormalPaint.setColor(Color.parseColor("#ff0000"));
            canvas.drawText("请输入解锁图案", mWidth / 2 - mNormalPaint.getTextSize() * 3.5f, mHeight / 9, mNormalPaint);
        }

        for (NumberPoint point : mNormalPoints) {
            canvas.drawCircle(point.x, point.y, mCircleRadius, mNormalPaint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float downX = event.getX();
        float downY = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                for (NumberPoint point : mNormalPoints) {
                    // 取出每一个圆的圆心坐标
                    unlock = false;
                    mStatus = MOVE;
                    float circleX = point.x;
                    float circleY = point.y;
                    if (isInsideCircle(downX, downY, circleX, circleY)) {
                        mSelectedPoints.add(point);
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                mStatus = NORMAL;

                StringBuffer password = new StringBuffer();
                for (NumberPoint point : mPasswordSet) {
                    password.append(point.getNumber());
                }

                Log.i("========", "password: " + password);
                if (DEF_PASSWORD.equals(password.toString())) {
                    unlock = true;
                }

                mPasswordSet.clear();
                mSelectedPoints.clear();
                mPath.reset();
                moveFirst = 0;
                break;
        }
        invalidate();
        return true;
    }

    private boolean isInsideCircle(float downX, float downY, float circleX, float circleY) {
        return mCircleRadius > Math.sqrt(Math.pow(downX - circleX, 2) + Math.pow(downY - circleY, 2));
    }

    public class NumberPoint extends PointF {
        private int number;

        public NumberPoint(int number) {
            this.number = number;
        }

        public int getNumber() {
            return number;
        }

    }
}

好吧，赶紧试试运行效果吧。不过我这个案例还有一个问题没有解决，就比如我们从 4 开始然后上面或下面一点绕过 5 直接连 6也可以，我通过对比了一下我的真实手机上的九宫格锁屏，它的做法是当我们想要从 4 绕过 5 去连 6 时，会直接把 5 给一起连上，我这个案例里面没有去实现它，有需要的话自己去搜索看看，如何写代码。因为我案例中用到了 Path 路径的方式，我后来想一想，还是用 Line 更直接，用 drawLine 可以很好的解决这个问题。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,332评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,508评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,812评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,607评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,728评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,919评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,071评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,802评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,256评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,389评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,032评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2赞 350

推荐阅读更多精彩内容