Android九宫格解锁

图片 10

图片 1

Demo 地址
https://git.oschina.net/19941225/CoreLock.git

从网上找了个,是图上上边的,九宫格以及线条都是图片,,可怜我的需求没人给弄图,只好想办法自己解决了

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

我们只关心你关心的事,不信,我们聊聊

1、引入头文件

就两个类,第一个是坐标点存储类

首先理清一下逻辑,我们要做NxN的九宫格 下图是3×3的简单图例
// -(–)-(–)-(–)-
// -(–)-(–)-(–)-
// -(–)-(–)-(–)-

 

#import "CLLockVC.h"

public class PointLock {

public static int BITMAP_NORMAL=0;//正常

public static int BITMAP_ERROR=1;//错误

public static int BITMAP_PRESS=2;//按下

//九宫格中的点的下标(即每个点代表一个值)

private String index;

//点的状态

private int state;

//点的坐标

private float x;

private float y;

public PointLock() {

super();

}

public PointLock(int x, int y) {

this.x= x;

this.y= y;

}

public String getIndex() {

return index;

}

public int getState() {

return state;

}

public float getX() {

return x;

}

public float getY() {

return y;

}

public void setIndex(String index) {

this.index= index;

}

public void setState(int state) {

this.state= state;

}

public void setX(float x) {

this.x= x;

}

public void setY(float y) {

this.y= y;

}

/**

*判断屏幕上的九宫格中的点能否可以进行连线

*

*@param apoint

*@param moveXtouchX

*@param moveY touchY

*@param radius点bitmap的半径

*@return布尔型

*/

public boolean isWith(PointLock a, float moveX, float moveY, float
radius) {

float result = (float) Math.sqrt((a.getX() – moveX)

* (a.getX() – moveX) + (a.getY() – moveY)

* (a.getY() – moveY));

if(result <5* radius /4) {

return true;

}

return false;

}

}

图片 2

 个人代言九宫格成功解锁,王源新成就已达成 

2、集成相对应的功能

第二个就是自定义view类了。

Image 2.png

  6月11日,新生代偶像王源又收揽了一家代言——意大利运动品牌FILA(斐乐),这也是今年他继巴黎欧莱雅、萧邦、H&M等多个个人代言后的第九个个人代言。

#pragma mark -- 设置密码
- (IBAction)setPwd:(id)sender
{
    BOOL hasPwd = [CLLockVC hasPwd];
    hasPwd = NO;
    if(hasPwd){

        NSLog(@"已经设置过密码了,你可以验证或者修改密码");
    }else{

        [CLLockVC showSettingLockVCInVC:self successBlock:^(CLLockVC *lockVC, NSString *pwd) {

            NSLog(@"密码设置成功");
            [lockVC dismiss:1.0f];
        }];
    }
}

#pragma mark -- 验证密码
- (IBAction)verifyPwd:(id)sender
{
    BOOL hasPwd = [CLLockVC hasPwd];

    if(!hasPwd){

        NSLog(@"你还没有设置密码,请先设置密码");
    }else {

        [CLLockVC showVerifyLockVCInVC:self forgetPwdBlock:^{
            NSLog(@"忘记密码");
        } successBlock:^(CLLockVC *lockVC, NSString *pwd) {
            NSLog(@"密码正确");
            [lockVC dismiss:1.0f];
        }];
    }
}

#pragma mark -- 修改密码
- (IBAction)modifyPwd:(id)sender
{
    BOOL hasPwd = [CLLockVC hasPwd];

    if(!hasPwd){

        NSLog(@"你还没有设置密码,请先设置密码");

    }else {

        [CLLockVC showModifyLockVCInVC:self successBlock:^(CLLockVC *lockVC, NSString *pwd) {

            [lockVC dismiss:.5f];
        }];
    }
}

我们就把九宫格分解成
外圆 、内圆、连线三部分
外圆半径Radius,内圆半径dp(5)
建立一个集合来放置 外圆的圆心( 内圆的圆心也一样)

     
 除歌手及演员的身份外,王源在时尚界也获得了极高的认可度:他曾登上6本时尚杂志封面,并成为《时尚芭莎》最年轻单人封面人物。不仅如此,王源被美国《时代》周刊评为全球最具影响力的30名青少年之一。此次与FILA合作,期待王源的精彩表现。

    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);
            }
        }

  >>点击阅读原文[王源牵手FILA斩获个人第九个代言]

这样我们就初始化好了内外圆的位置point集合
我们draw一下看一下效果

图片 3

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);
        }

  评:“源力少年”不愧是行走的代言收割机。——Modi

效果图就是上图了 (哈哈一样的)

 

主结构已经画完了,接下来就是如何绘制点与点之间的连线了,有人会觉得没思路,其实很简单了,以3X3
为例子哈

 苹果CEO现身时装周看秀,是为新iPhone寻灵感吗? 

我们可以给这九个棋子编号1–9号,把他存入LinkedHashSet中,着重介绍这个LinkedHashSet有顺序不重复这个真的在合适不过了。
这样就不会有重复的事情了。这个和解锁时候的密码也很契合。所以选对了存储方式会事半功倍。

  当地时间6月14日,米兰男装周的Roberto Cavalli秀场迎来了一位稀客——苹果
CEO Tim Cook,这位科技界大佬出现在时装周可是头一回。

还有一个问题,就是点击边界问题,这个好解决,我们把每一个棋子都花矩形,通过圆来控制边界,(其实也可以通过矩形来控制边界,这个也很简单,原理是差不多的,有兴趣的同学可以下去试试)
同样也是用集合。和上边的圆是一样一样的。

       库克身着一身笔挺西装,精致的剪裁就像iPhone
X外形一样考究,他一向高举设计、剪裁大旗,此次的看秀look也是低调而保守,当然好处是不会出错。他在秀场接受采访称自己确实不经常参加时尚活动,但是还是非常关注时尚圈的。

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);
            }
        }

>>点击阅读原文[苹果CEO库克现身男装周观秀]

好边界也有了,我们来计算边界返回编号

图片 4

/**
     * 点和圆形碰撞检测
     *
     * @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;
    }

       评:不知道FaceBook的扎克伯格什么时候也来看秀,给自己物色几件新T恤。——
Ozzie

几个关键点都写到了接下来就是具体的细节了。我把代码都贴上来,注释的很详细。当然加入了一个手指触控点,更加好看一些。

 

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;
    }
}

 人总是失去了才懂得珍惜 

  数据显示,Kate
Spade骤然离世带动品牌商品销售额大幅增长,一些二手单品的价格成倍上涨,需求量竟有800%的涨幅,之前仅卖50美元的手袋在6月5日以300美元成交。

       这可能跟Kate
Spade定价亲民性有关,几百美元的价格让很多消费者觉得更容易接受。Kate
Spade于上周二在自己的纽约公寓自杀身亡,享年55岁。

>>点击阅读原文[Kate
Spade销售额在设计师去世后大幅增长]

图片 5

  评:如果是通过这种方式来拉动销售,我们宁可不要。在一味追求金钱社会的现在,关于人心灵世界的贫乏一直被忽视,争取做个粗茶淡饭但内心丰盈、健康的人吧。——Jeremy

 

 Supreme太红被联名,到底是国产品牌作妖or上当 

  近日国产品牌OXN宣布与
“Supreme”达成战略合作关系,还煞有其事地公开出联名系列服款。但在双方总裁握手签字环节中,现场的Supreme老板竟然变成了一位黑人!众所周知Supreme真正的主理人James
Jebbia是一位白人。

     
 许多外国网友怀疑黑人老哥假扮Supreme的老板,骗取了签约合作的100万美金,这才闹出了这一巨大的乌龙事件。而在中国,大众舆论更多认为OXN才是幕后的主使。所以说这次的Supreme
x OXN联名并不是官方的合作,真正的Supreme甚至可以按照法律起诉其盗用商标。

>>点击阅读原文[国产潮品与假Supreme合作]

图片 6

  评:无知盲目害死人,在信息如此发达的时代还能做出这么自欺欺人的事,真是捧腹大笑!不知道是想做一只把头扎在土里的鸵鸟,还是一只骄傲而不知好歹的公鸡。——Jeremy

 

 Virigil
Abloh又被“碰瓷”,到底是抄袭还是借鉴 

  日常更新疑似抄袭设计对比图的Instagram账号Diet
Prada把矛头再次指向了Virgil
Abloh,称他近期在Instagram上发布的“挑战了剪裁方法”的卫衣设计,与日本品牌ANREALAGE早前推出的一件单品高度相似,并放出了对比图。

       此前,Diet Prada还称Virigil
Abloh与宜家合作推出的一把椅子抄袭了本世纪中期设计大师Paul McCobb的旧作。

  >>点击阅读原文[Virgil
Abloh又被指责抄袭]

图片 7

  评:人红就是是非多!——Jeremy

 

 精彩17年,终从BV完美谢幕 

  Tomas Maier宣布辞去奢侈品品牌Botegga
Veneta创意总监职位,继任者Daniel
Lee自2018年7月1日起将接替其职位。2001年,Tomas受Tom
Ford的邀请担任Bottega
Veneta的创意总监。在Tomas的带领下,BV曾一度成为开云集团旗下增速最快的品牌。

      不过最近Bottega
Veneta的日子并不好过,根据2017年开云集团的财报显示,BV的销售额为11.76亿欧元,是集团唯一营业利润出现下滑的品牌,不知道是不是因为这个原因,所以Tomas
Maier选择离开。

  >>点击阅读原文[Daniel Lee接替Tomas
Maier出任BV创意总监]

图片 8

  评:想想当年可是Tomas
Maier带着Bottega
Veneta摆脱低迷,如今眼看着集团旗下的Gucci等迅速崛起,这个曾经风光的品牌稍显失色,想必Bottega
Veneta也是备受压力,我们期待新的接班人吧。——Jeremy

 

 10元就能租Prada,奢侈品现在也玩共享 

  奢侈品让中国人如痴如醉、掏空钱包,已是老生常谈。买走全球三分之一的奢侈品还不够,他们还希望紧跟潮流、常换常新。眼下,在一些比较流行的共享奢侈品App平台上,每天花几元钱就能租到不同的名牌包,从香奈儿到普拉达,几乎涵盖市面上所有的款式。

  >>点击阅读原文[共享经济侵入奢侈品领域]

图片 9

  评:如果奢侈品的最初的设计师们要知道如今他们的作品已经被市场开创了代购和租赁需求的时候,是不是会气到诈尸还魂。——Jeremy

 

 中国队错过的世界杯门票,小龙虾拿到了 

  近日,一辆搭载着10万只湖北产小龙虾的中欧班列,从武汉启程,经满洲里出境后,预计本月中旬抵达莫斯科。这批赶在世界杯期间为众球迷献上的助兴美食,包括麻辣、蒜香、十三香等不同口味。

     
 小龙虾抵达莫斯科后,将运送至当地餐馆和酒吧。届时,世界杯期间到俄罗斯观赛的各国球迷,也可以“吃小龙虾,喝啤酒,看足球赛”。

>>点击阅读原文[10万只小龙虾出征俄罗斯“助兴”世界杯]

图片 10

       评:果然除了国足,其他都去了。——Rachel

 

 

往期回顾

Vol.17 最懂少女心的Kate
Spade,最后却败给了没有人懂她

Vol.16 你猜,你家爱豆让多少人踏上剁手之路

Vol.15 耐克怼彪马Supreme牵手Levi’s
大牌这周都很忙啊

更多精彩请戳专题

谈资|我们只关心你关心的事

声明:新浪网登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。

发表评论

电子邮件地址不会被公开。 必填项已用*标注