自定义View----Android九宫格手势密码解锁

最新推荐文章于 2024-08-14 15:17:32 发布
最新推荐文章于 2024-08-14 15:17:32 发布
阅读量1.2w 收藏 11
点赞数 3
分类专栏： Android开发 文章标签： android 自定义
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abren32/article/details/48683625
版权

好久没更新blog了，最近公司比较忙，旧的项目上线时间赶。加上新的项目又来了，于是导致都好久没去鸿洋的群里扯蛋了，做了一个不称职的管理员。说了好多遍的自定义萌系进度条都没有分享出来，在这给群里的各位说声抱歉，这次依然没有分享这个自定义的进度条。（你特么来打我呀~~）

由于公司新的项目需要用到九宫格手势密码解锁的功能，于是觉得自己写一个。废话不多说，直接上效果图：
这里写图片描述

首选我们来分析下实现的思路：
1. 绘制出相对于这个View的居中的九个点，作为默认状态的点
2. 点击屏幕的时候是否点击在这九个点上
3. 在屏幕上滑动的时候，绘制两个点之间的线条，以及选中状态的点
4. 手指离开屏幕的时候判断手势密码是否正确，如若错误这把错误状态下的点和线绘制出来。

具体实现：
首先我们得绘制出默认正常状态下的九个点：
这里写图片描述


/**
 * 点的bean
 * Created by Administrator on 2015/9/21.
 */
public class Point {

    // 正常状态
    public static final int STATE_NORMAL = 1;
    // 按下状态
    public static final int STATE_PRESS = 2;
    // 错误状态
    public static final int STATE_ERROR = 3;

    float x;
    float y;
    int state = STATE_NORMAL;

    public Point(float x, float y){
        this.x = x;
        this.y = y;
    }

    /**
     * 计算两点间的距离
     * @param a 另外一个点
     * @return
     */
    public float getInstance(Point a){
       return (float) Math.sqrt((x-a.x)*(x-a.x) + (y-a.y)*(y-a.y));
    }
}

可以看到，给一个点定义了x、y值以及这个点的状态有三种，默认的初始状态是正常的状态。

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    init();// 初始化正常状态下的九个点，以及三种状态所需要用到的图片资源
}

private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPressPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mErrorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        // 按下状态的画笔
        mPressPaint.setColor(Color.parseColor("#00B7EE"));
        mPressPaint.setStrokeWidth(7);
        // 错误状态的画笔
        mErrorPaint.setColor(Color.parseColor("#FB0C13"));
        mErrorPaint.setStrokeWidth(7);

        // 加载三种状态图片
        mNormalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.lock_point_normal);
        mPressBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.lock_point_press);
        mErrorBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.lock_point_error);
        mPointRadius = mNormalBitmap.getWidth() / 2;

        // 当前视图的大小
        int width = getWidth();
        int height = getHeight();
        // 九宫格点的偏移量
        int offSet = Math.abs(width - height) / 2;
        // x、y轴上的偏移量
        int offSetX = 0, offSetY = 0;
        int pointItemWidth = 0; // 每个点所占用方格的宽度
        if (width > height){ // 横屏的时候
            offSetX = offSet;
            offSetY = 0;
            pointItemWidth = height / 4;
        }
        if (width < height){ // 竖屏的时候
            offSetX = 0;
            offSetY = offSet;
            pointItemWidth = width / 4;
        }

        // 初始化九个点
        mPoints[0][0] = new Point(offSetX + pointItemWidth, offSetY + pointItemWidth);
        mPoints[0][1] = new Point(offSetX + pointItemWidth * 2, offSetY + pointItemWidth);
        mPoints[0][2] = new Point(offSetX + pointItemWidth * 3, offSetY + pointItemWidth);

        mPoints[1][0] = new Point(offSetX + pointItemWidth, offSetY + pointItemWidth * 2);
        mPoints[1][1] = new Point(offSetX + pointItemWidth * 2, offSetY + pointItemWidth * 2);
        mPoints[1][2] = new Point(offSetX + pointItemWidth * 3, offSetY + pointItemWidth * 2);

        mPoints[2][0] = new Point(offSetX + pointItemWidth, offSetY + pointItemWidth * 3);
        mPoints[2][1] = new Point(offSetX + pointItemWidth * 2, offSetY + pointItemWidth * 3);
        mPoints[2][2] = new Point(offSetX + pointItemWidth * 3, offSetY + pointItemWidth * 3);
    }

这段代码要注意的是横竖屏的偏移量，横屏的时候计算X轴的偏移量，竖屏的时候计算Y轴的偏移量。计算出x y的偏移量后，来初始化九个点的位置。我们要让九宫格的点绘制的位置在 当前这个自定义视图View的正中间，那么如上图显示，第一个点的起始点就是x = x轴的偏移量 + 格子宽度， y = y轴的偏移量 + 格子宽度。以此可见第二列的点的x值 = 两个格子的宽度 + x轴的偏移量，同理第二行的点的y值 = 两个格子的宽度 + y周的偏移量。以此类推初始化九个点的位置。
九个点的位置初始化后，我们需要来绘制九个点，这里我用了三种状态的图片来作为顶点。在init()方法中，初始化了三种bitmap图片对象。以及计算了点的半径也就是图片的一半，当然我这里的三张图片大小是一样的。如果不一样，还是要重新计算过。
接下来就在onDraw方法里绘制出九个点：


@Override
    protected void onDraw(Canvas canvas) {

        // 绘制点
        drawPoints(canvas);

        // 绘制连线
        drawLines(canvas);
    }

   /**
     * 绘制所有的点
     * @param canvas
     */
    private void drawPoints(Canvas canvas){
        for (int i = 0; i < mPoints.length; i++){
            for (int j = 0; j < mPoints[i].length; j++){
                Point point = mPoints[i][j];
                // 不同状态绘制点
                switch (point.state){
                    case Point.STATE_NORMAL:
                        canvas.drawBitmap(mNormalBitmap, point.x - mPointRadius, point.y - mPointRadius, mPaint);
                        break;
                    case Point.STATE_PRESS:
                        canvas.drawBitmap(mPressBitmap, point.x - mPointRadius, point.y - mPointRadius, mPaint);
                        break;
                    case Point.STATE_ERROR:
                        canvas.drawBitmap(mErrorBitmap, point.x - mPointRadius, point.y - mPointRadius, mPaint);
                        break;
                }
            }
        }
    }

我们变量初始化好的九个点对象的状态，不同状态绘制不同的图片。这里绘制的时候要注意初始化点的时候的x、y值是包括了点圆的半径的，而绘制图片又是从左上角开始的，所以在绘制的时候需要减去图片本身的半径。

绘制后默认的九个点后，我们接下来处理手势滑动，覆写onTouchEvent方法：

    /**
     * 获取选择的点的位置
     * @return
     */
    private int[] getSelectedPointPosition(){
        Point point = new Point(mX, mY);
        for (int i = 0; i < mPoints.length; i++) {
            for (int j = 0; j < mPoints[i].length; j++) {
                // 判断触摸的点和遍历的当前点的距离是否小于当个点的半径
                if(mPoints[i][j].getInstance(point) < mPointRadius){
                    // 小于则获取作为被选中，并返回选中点的位置
                    int[] result = new int[2];
                    result[0] = i;
                    result[1] = j;
                    return result;
                }
            }
        }
        return null;
    }

首先我们要判断手指点击的位置是否是在点上，获取屏幕触摸的点的位置mX、mY，初始化一个点，然后遍历所有的点与触摸点的距离 是否 小于 一个点的图片的半径，如果小于表示触摸的位置在这九个点中的一个上。getInstance(point)是计算两点之间的距离的方法。公式是：distance = Math.sqrt((x1 - x2)(x1 - x2) + (y1 - y2) (y1 - y2))。如果是触摸的位置在点上，那就返回这个点的在九宫格数组中的下标位置。

我们来看onTouchEvent方法：


@Override
    public boolean onTouchEvent(MotionEvent event) {
        // 获取手指触摸的xy位置
        mX = event.getX();
        mY = event.getY();
        int[] position;
        int i, j;
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                // 重置所有的点
                resetPoints();
                // 获取选择的点的位置
                position = getSelectedPointPosition();
                if (position != null){
                    isDraw = true; // 标记为绘制状态
                    i = position[0];
                    j = position[1];
                    mPoints[i][j].state = Point.STATE_PRESS;
                    // 被选择的点存入一个集合中
                    mSelectedPoints.add(mPoints[i][j]);
                    mPassPositions.add(i * 3 + j); // 把选中的点的路径转换成一位数组存储起来
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if (isDraw){
                    position = getSelectedPointPosition();
                    if (position != null){
                        i = position[0];
                        j = position[1];
                        if (!mSelectedPoints.contains(mPoints[i][j])){
                            mPoints[i][j].state = Point.STATE_PRESS;
                            mSelectedPoints.add(mPoints[i][j]);
                            mPassPositions.add(i * 3 + j);
                        }
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                // 标记为不在绘制
                isDraw = false;
                break;
        }
        // 更新绘制视图
        invalidate();
        return true;
    }

按下的时候坚持到触摸的位置就在点上的时候，就把这个点的状态改成被按下的状态，同时存入到mSelectedPoints被选中点的集合中。并标记现在是绘制的状态下。同样在移动手指的时候也是把检测到的点存储起来，修改状态为按下。当手指离开屏幕的时候，把标记改为不在绘制。然后通过invalidate()方法更新视图（会去调用onDraw方法绘制）。
通过上面的步骤，我们把选中的点都收集了起来，接下来就是绘制两个点连接线：

    /**
     * 绘制两点之间的线
     * @param canvas
     * @param a
     * @param b
     */
    private void drawLine(Canvas canvas, Point a, Point b){
        if (a.state == Point.STATE_PRESS){
            canvas.drawLine(a.x, a.y, b.x, b.y, mPressPaint);
        }
        if (a.state == Point.STATE_ERROR){
            canvas.drawLine(a.x, a.y, b.x, b.y, mErrorPaint);
        }
    }

绘制两点的连接线比较简单，我们只绘制按下和错误时候的连线。这是绘制单条连接线的。而我们的手势密码路径是有多条的，继续看：

    /**
     * 绘制所有的线
     * @param canvas
     */
    private void drawLines(Canvas canvas){
        if (mSelectedPoints.size() > 0){
            // 从第一个被选中的点开始绘制
            Point a = mSelectedPoints.get(0);
            for (int i = 1; i < mSelectedPoints.size(); i++){
                Point b = mSelectedPoints.get(i);
                drawLine(canvas, a, b); // 连接两个点
                a = b; // 把下一个点作为下一次绘制的第一个点
            }
            if (isDraw){// 如果还在绘制状态，那就继续绘制连接线
                drawLine(canvas, a, new Point(mX, mY));
            }
        }
    }

如果被选中点的集合不是空的，那我们选择从第一个被选中点开始绘制连接线，遍历所有被选中点的时候就要从第二个点开始也就是index为1的时候，绘制完一个点，就要把下一次绘制连接线的起点改为这一次的连接线的终点，也是 a=b；这句的作用。所有被选中的点绘制完后，如果当前还处在绘制状态（手机没有离开屏幕），那我们就new一个手指触摸位置作为连接线的终点。好了所有的线都绘制完了，那我们只要在onDraw调用就好了：

@Override
    protected void onDraw(Canvas canvas) {

        // 绘制点
        drawPoints(canvas);

        // 绘制连线
        drawLines(canvas);
    }

这样绘制的工作基本就完成了，接下来我们需要做一个用来监听手势滑动完后的接口：

public interface OnDrawFinishedListener{
    boolean onDrawFinished(List<Integer> passPositions);
}

回调的方法里的passPositions是手势滑动的时候存储的九宫格的路径，对于九宫格路径的定义如图：
这里写图片描述

在onTouchEvent中，当Action动作是Up的时候（手指离开屏幕）：就会触发手势密码绘制完成的接口：

case MotionEvent.ACTION_UP:
                boolean valid = false;
                if (mListener != null && isDraw){
                    // 获取绘制路径是否正确
                    valid = mListener.onDrawFinished(mPassPositions);
                }
                if (!valid){// 判断绘制路径不正确的所有被选中的点的状态改为出错
                    for (Point p: mSelectedPoints){
                        p.state = Point.STATE_ERROR;
                    }
                }
                isDraw = false;
                break;

当设置了监听接口，并且还处于绘制状态的时候，回调接口把路径传出去给实现这个接口的使用者，然后在实现这个接口方法的地方判断和之前设置存储的手势密码是否一致，如果不一致返回为false。然后去修改所有的被选中的点的状态为错误的。然后invalidate()去更新视图。
路径给出去了，在最初设定的时候可以用md5等不可逆的加密方式存储在手机中。在需要解锁的时候，拿到这个md5值和解锁时候绘制的路径的md5值做比较就可以了：

// 这个自定义视图的使用方法：
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.jerry.testproject.ui.ScreenLockActivity">

    <com.jerry.testproject.widget.lockview.LockView
        android:id="@+id/lockView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#2B2B2B"
        />

</FrameLayout>

LockView lockView = (LockView) findViewById(R.id.lockView);
        lockView.setOnDrawFinishedListener(new LockView.OnDrawFinishedListener() {
            @Override
            public boolean onDrawFinished(List<Integer> passPositions) {
                StringBuilder sb = new StringBuilder();
                for (Integer i :
                        passPositions) {
                    sb.append(i.intValue());
                }
                // 把字符串md5
                String md5Str = MD5Utils.getMD5String(sb.toString());
                // 比较路径是否一致
                boolean valid = comparePath(sb.toString());
                if (valid){
                    Toast.makeText(ScreenLockActivity.this, "手势密码正确！", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(ScreenLockActivity.this, "手势密码错误，请重试！", Toast.LENGTH_SHORT).show();
                }

                return valid;
            }
        });

至此自定义九宫格手势密码View介绍就结束了。

下面附上控件的源码和所用到的资源：
http://download.csdn.net/detail/abren32/9134049

JerryloveEmily
关注
专栏目录
Android自定义九宫格手势解锁组件
renzhongrui的博客
02-19 1880
本文主要介绍Java版本九宫格手势解锁组件的使用和实现原理。
Android自定义View——手把手教你九宫格手势解锁
lmq121210的博客
11-03 1096
最近写了个九宫格手势解锁，先附上效果图吧？ 上面是效果图，再附上代码？行。 Github 戳我 这篇博客讲述一下实现这个效果的思路。我觉得知道了这个思路，并且顺着这个思路走，每个人都可以自己写一个出来。但是写出来的代码健壮否，就看个人功底了。 创建GestureView继承自View 在这个代码里你只需要做两件事 实现onDraw方法 实现onTouchEvent方法 记下来我们肢解一下...
uni-app 使用九宫格（uni-grid）布局组件
最新发布
u013948083的专栏
08-14 763
uni-app 的 uni-grid 组件引入和开发步骤
Android九宫格手势解锁
xxb52306的博客
01-22 887
最上面是获取日期显示使用的Time()获取到当前的时间，我们得到日期对其赋值 九宫格解锁有两个模式：CREATE_MODE  CHECK_MODE两种模式，一种是用来设置密码的模式，一种是输入密码的模式。验证登录密码会有三次机会，三次都输入错误会退出项目，忘记密码了也可以进行重新设置密码，非常的方便。重新设置手势密码这块没有进行验证，有兴趣的朋友可以用推送实现一个短信验证的效果。
Android 自定义手势解锁View
z18374453733的博客
11-04 415
实现一个手势解锁控件
自己定义九宫格手势解锁
weixin_34062469的博客
08-10 118
项目中用到手势解锁，然而没有在GitHub上找到想要的样式= =，仅仅好自己来定义了。以下来看代码~~ 基本上非常多应用的手势解锁全都是九宫格的，内部内就是九个小圈圈而已。那么我们就先来自己定义这个小圈圈吧~ 圈圈的颜色选择状态有大致有三种状态。所以我定义了一个枚举来区分 package com.juzisang.com.library; /** * Create...
android自定义手势解锁
zjm0518的博客
05-26 746
一个手势解锁的view(仿照支付宝手势解锁的样式)，可以改变手势解锁的颜色、样式（目前只有两种样式）、大小等等。
Android自定义View九宫格手势密码解锁
08-27
总的来说，实现一个Android自定义View的九宫格手势密码解锁功能，需要熟练掌握自定义View的绘制流程，理解触摸事件的处理，以及灵活运用数学知识来计算点的位置和距离。通过这种方式，我们可以构建出符合业务需求的...
Android-GestureLockView九宫格手势解锁控件
08-13
总之，GestureLockView是一个实用的Android自定义控件，通过它我们可以轻松地在应用中实现九宫格手势解锁功能。理解其工作原理并进行适当的自定义，可以帮助我们创建更具有个性和安全性的用户体验。
Android-手势密码九宫格密码支付密码
08-12
在Android平台上，手势密码（Gesture Password）是一种常见的用户身份验证机制，它允许用户通过在九宫格上绘制自定义的图案来解锁设备或授权敏感操作，例如支付。手势密码提供了比传统数字密码更为直观和快速的用户...
android 自定义view实现九宫格手势解锁
06-29
本项目“android 自定义view实现九宫格手势解锁”旨在教你如何利用自定义View来构建一个类似手机中常见的九宫格手势解锁功能。这种功能广泛应用于各种应用程序，以提供安全且便捷的用户验证方式。 首先，我们需要...
Android九宫格解锁（完美封装）
04-22
Android九宫格解锁（完美封装）
Android自定义九宫格图案解锁
weixin_30783629的博客
01-06 80
转自: http://blog.csdn.net/shineflowers/article/details/50408350 转载于:https://www.cnblogs.com/zhangminghan/p/6256637.html
【Android】自定义控件实现九宫格解锁
Lankton
06-30 2140
~转载请注明来源：http://blog.csdn.net/u013015161/article/details/46689011介绍这两天写了一个九宫格锁屏的控件，实现了九宫格锁屏的设置和解锁。该控件没有使用任何图片资源，显示的内容（包括点、圆、线等）全部由画笔绘制，所以可以自由复用。 使用效果图： 实现先上代码吧。 自定义九宫格控件：LocusPassViewpackage com.exa
android 九宫格图案解锁
weixin_41191134的博客
12-11 1661
项目可能的需要，自己尝试写了一个九宫格解锁，在此记录，以作笔记。 先上效果图                     关于项目的分析，见下图 width 九宫格控件的宽度，height 九宫格的控件的高度，offsetX是x轴的偏移量，offsetY是y轴的偏移量（实际编写的时候一般根据宽高的数值取小的居中显示，所以 offsetX与offsetY 根据宽高有一个数值会为 0 ）...
Android实现九宫格图案解锁
tracy的博客
09-21 936
Android实现九宫格图案解锁前言：自定义了一个九宫格的VIew来绘制九宫格图案，实现了绘制图案解锁的功能。
android自定义view之九宫格解锁
Smaug的专栏
05-31 1475
android自定义view之九宫格解锁更多细节请看源码 https://github.com/que123567/lockview 1. 定义一个类作为九宫格的格子包含坐标和索引（用来记录密码） point含三种状态分别对应三种不同情况下点的图片样式 package lockview;/** * Created by smaug on 2017/5/11. */public class P
Android九宫格解锁自定义控件（附源码）
weixin_30686845的博客
06-05 117
九宫格解锁大家应该经常用到，比如支付宝里，就用到这个。我借鉴了一些大神的作品，并在基础在进行了一些优化修改封装，做到了高内聚低耦合，使用也极其简单方便。先放上几张截图吧（包括图片也直接借用大神的） 这个控件的宽度和高度相等，都为屏幕的宽度。因此，这个控件可以根据需要调整所在屏幕的位置。也可以在布局文件中设置控件的宽度，结果就是这个控件是一个正方形，并且限制在正方形内做手势动作。我们追求的就是...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值