自定义view-九宫格-手势解锁

1.先看效果：

九空格手势解锁.gif

2.分析

2.1 建立三个画笔，一个用于绘制外圆，一个绘制内圆，一个是绘制直线

private void initPaint() {

        mLinePaint = new Paint();
        mLinePaint.setAntiAlias(true);
        mLinePaint.setColor(mPressedColor);
        mLinePaint.setStyle(Paint.Style.STROKE);
        mLinePaint.setStrokeWidth(6);

        mOuterPaint = new Paint();
        mOuterPaint.setAntiAlias(true);
        mOuterPaint.setColor(mNormalColor);
        mOuterPaint.setStyle(Paint.Style.STROKE);
        mOuterPaint.setStrokeWidth(6);

        mInnerPaint = new Paint();
        mInnerPaint.setAntiAlias(true);
        mInnerPaint.setColor(mNormalColor);
        mInnerPaint.setStyle(Paint.Style.FILL);

    }

2.2 设定圆圈座标
一定要熟悉三角形的勾股定理算法，#勾股定理 Math.abs()取绝对值 Math.pow(a,b)取a的b次方 Math.sqrt()开平方。

 private void initPoint() {

        mPointList.clear();

        int width = getWidth();
        int height = getHeight();

        float offsetY = 0.0f;
        float offsetX = 0.0f;

        float circleWidth;

        //兼容横竖屏
        if(width > height){
            offsetX = ( width - height ) / 2;
            circleWidth = height / 3 ;
        }else {
            offsetY = ( height - width ) / 2;
            circleWidth = width / 3 ;
        }

        mPointList.add(new Point(offsetX + circleWidth / 2 ,  offsetY + circleWidth / 2 ,mLockNormalValue[0]));
        mPointList.add(new Point(offsetX + 3 * circleWidth / 2 , offsetY + circleWidth / 2 ,mLockNormalValue[1]));
        mPointList.add(new Point(offsetX + 5 * circleWidth / 2 , offsetY + circleWidth / 2 ,mLockNormalValue[2]));

        mPointList.add(new Point(offsetX + circleWidth / 2 , offsetY + 3 * circleWidth / 2 ,mLockNormalValue[3]));
        mPointList.add(new Point(offsetX + 3 * circleWidth / 2 , offsetY + 3 * circleWidth / 2 ,mLockNormalValue[4]));
        mPointList.add(new Point(offsetX + 5 * circleWidth / 2 , offsetY + 3 * circleWidth / 2 ,mLockNormalValue[5]));

        mPointList.add(new Point(offsetX + circleWidth / 2 ,  offsetY + 5 * circleWidth / 2 ,mLockNormalValue[6]));
        mPointList.add(new Point(offsetX + 3 * circleWidth / 2 , offsetY + 5 * circleWidth / 2 ,mLockNormalValue[7]));
        mPointList.add(new Point(offsetX + 5 * circleWidth / 2 , offsetY + 5 * circleWidth / 2 ,mLockNormalValue[8]));

    }

3. onDraw() 绘制画圆圈

for(Point point : mPointList){
            //根据不同的状态 设置不同的画笔颜色
            if(point.status == STATUS_PRESSED){
                mOuterPaint.setColor(mPressedColor);
                mInnerPaint.setColor(mPressedColor);
            }else if(point.status == STATUS_DEFAULT){
                mOuterPaint.setColor(mNormalColor);
                mInnerPaint.setColor(mNormalColor);
            }else if(point.status == STATUS_ERROR){
                mOuterPaint.setColor(mErrorColor);
                mInnerPaint.setColor(mErrorColor);
            }else if(point.status == STATUS_CORRECT){
                mOuterPaint.setColor(mCorrectColor);
                mInnerPaint.setColor(mCorrectColor);
            }
            //画外圆
            canvas.drawCircle(point.centerX, point.centerY, mRadius, mOuterPaint);
            //画内圆
            canvas.drawCircle(point.centerX, point.centerY, mRadius / 6, mInnerPaint);
        }
}

4. onDraw() 绘制直线

注意：mMoveX 和 mMoveY 在手势抬起的时候，要判断一下是否等于 0 ，防止绘制多余的线。在onTouchEvent中的UP事件中把这两个值置为0

//画线
        if(mPressedPointList.size() > 0){
            Point point = mPressedPointList.get(mPressedPointList.size() - 1);
            //抬起的时候不需要再画多出来的直线
            if( mMoveX != 0.0f && mMoveY != 0.0f) {
                canvas.drawLine(point.centerX, point.centerY,
                        mMoveX, mMoveY, mLinePaint);
            }
            for(int i = 0 ; i < mPressedPointList.size()-1 ; i ++ ){
                canvas.drawLine(mPressedPointList.get(i).centerX,mPressedPointList.get(i).centerY,
                        mPressedPointList.get(i+1).centerX,mPressedPointList.get(i+1).centerY,mLinePaint);
            }
        }

5. onTouchEvent() 手势监听

每个需求的逻辑可能不一样，可自行修改，我这里是如果连接的两个点中包含某一个点，会把这个点连接上。两个座标点的中点点座标为 两端座标的座标之和的一半。判断是否按下点是根据 按下点的做和座标点之间的距离是否小于半径，小于则是按下某一个点，或是触摸到了某一个点。

  @Override
    public boolean onTouchEvent(MotionEvent event) {
        Point point = null;
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                mMoveX = event.getX();
                mMoveY = event.getY();
                //按下的点和圆心的距离是否大于半径
                point = judgeInCircle(mMoveX, mMoveY);
                if(point!=null){
                    mPressedPointList.add(point);
                }
                break;
            case MotionEvent.ACTION_MOVE:
                mMoveX = event.getX();
                mMoveY = event.getY();
                //按下的点和圆心的距离是否大于半径
                point = judgeInCircle(mMoveX,mMoveY);
                if(point!=null) {
                    Point lastPoint = mPressedPointList.get(mPressedPointList.size() - 1);
                    float centerX1 = Math.abs(lastPoint.centerX + point.centerX) / 2;
                    float centerY1 = Math.abs(lastPoint.centerY + point.centerY) / 2;
                    Point centerPoint = judgeInCircle(centerX1, centerY1);
                    if(centerPoint!=null) {
                        mPressedPointList.add(centerPoint);
                    }
                    mPressedPointList.add(point);
                }
                break;
            case MotionEvent.ACTION_UP:
                mMoveX = 0.0f;
                mMoveY = 0.0f;
                showResult();
                break;
        }
        invalidate();
        return true;
    }
 /**
     * 恢复数据
     */
    private void recoverStatus(){
        mPressedPointList.clear();
        for(Point point : mPointList){
            point.status = STATUS_DEFAULT;
        }
        mLinePaint.setColor(mPressedColor);
        invalidate();
    }

/**
     * 判断划过的点是否是圆点
     */
    private Point judgeInCircle(float centerX,float centerY){
        for(Point point : mPointList){
            //勾股定理 Math.abs()取绝对值 Math.pow(a,b)取a的b次方 Math.sqrt()开平方
            double x2 = Math.pow(Math.abs(centerX - point.centerX), 2);
            double y2 = Math.pow(Math.abs(centerY - point.centerY), 2);
            double r = Math.sqrt( x2 + y2);
            if(r < mRadius){
                if(!mPressedPointList.contains(point)) {
                    point.status = STATUS_PRESSED;
                    return point;
                }
            }
        }
        return null;
    }

6. 结果比较和回调

/**
     * 显示结果
     */
    private void showResult(){
        int status;
        String result = "";
        for(Point point : mPressedPointList){
            result += point.psw;
        }
        if(result.equals(mNormalPassword)){
            status = 1;
            mLinePaint.setColor(mCorrectColor);
        }else {
            status = 2;
            mLinePaint.setColor(mErrorColor);
        }
        if(this.lockValueCallBack!=null){
            this.lockValueCallBack.valueCallBack(result);
        }
        for(Point point : mPointList){
            if(point.status == STATUS_PRESSED) {
                if (status == 1) {
                    point.status = STATUS_CORRECT;
                } else if (status == 2) {
                    point.status = STATUS_ERROR;
                }
            }
        }
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                recoverStatus();
            }
        },500);
    }
 /**
     * 设置正确密码
     * @param correctValue
     */
    public void setCorrectValue(String correctValue){
        this.mNormalPassword = correctValue;
    }
    private LockValueCallBack lockValueCallBack;
    protected void setLockValueCallBack(LockValueCallBack lockValueCallBack){
        this.lockValueCallBack = lockValueCallBack;
    }
    protected interface LockValueCallBack{
        void valueCallBack(String value);
    }
    static class Point{
        private float centerX;
        private float centerY;
        private String psw;
        private int status;

        public Point(float centerX, float centerY, String psw){
            this.centerX = centerX;
            this.centerY = centerY;
            this.psw = psw;
            this.status = STATUS_DEFAULT;
        }
        public String toString(){
            return "centerX="+centerX+" centerY="+centerY + " psw="+psw +" status="+ this.status;
        }
    }

7. 自定义属性

  public GestureLockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.GestureLockView);
        mNormalColor = typedArray.getColor(R.styleable.GestureLockView_defaultColor,mNormalColor);
        mPressedColor = typedArray.getColor(R.styleable.GestureLockView_pressedColor,mPressedColor);
        mErrorColor = typedArray.getColor(R.styleable.GestureLockView_errorColor,mErrorColor);
        mCorrectColor = typedArray.getColor(R.styleable.GestureLockView_correctColor,mCorrectColor);
        mRadius = (int) typedArray.getDimension(R.styleable.GestureLockView_radius,mRadius);
        typedArray.recycle();
    }

8. attrs.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="GestureLockView">
        <attr name="pressedColor" format="color"/>
        <attr name="defaultColor" format="color"/>
        <attr name="errorColor" format="color"/>
        <attr name="correctColor" format="color"/>
        <attr name="radius" format="dimension"/>
    </declare-styleable>
</resources>

9. 源码地址

https://github.com/panshimu/GestureLockView

有问题随时留言，看到会马上回复的，欢迎讨论！！！
QQ 362976241

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