iOS九宫格密码解锁(图文并茂)

简介

GesturePasswordView是一个非常方便使用的Gesture Lock控件只需要简单的几步便可以在你的app中实现如安卓那样的手势解锁的效果。其实之前并不看好这种解锁的方式,不过上次发现支付宝iOS新版app中使用了这样的形式来进行功能的解锁,觉得也还方便

效果图

九宫格解锁.gif

分析实现原理

1.首先要自定义一个view(也就是GesturePasswordView),因为要监听手指在View上的移动,最后必须重写:
touchesBegan
touchesMoved
touchesEnded
2.界面的实现【9宫格按钮】
3.创建一个类,自定义View,取名叫GesturePasswordView,然后创建9个按钮
4.监听手指的移动,准确来说是当手指移动到按钮的范围内,触发按钮,让按钮变亮具体细节如下

1.重写touchesBegan的方法
获取当前触摸的点。
循环判断当前触摸的点在哪个按钮的范围之内, 找到对一个的按钮之后, 把这个按钮的selected = YES。
2.重写touchesmoved方法
获取当前触摸的点。
循环判断当前触摸的点在哪个按钮的范围之内, 找到对一个的 按钮之后, 把这个按钮的selected = YES。
重绘,把选中的按钮链接起来调用[self setNeedsDisplay],重写- (void)drawRect:(CGRect)rect 方法
3.重写touchesEnded方法
获得用户绘制的密码,并实现操作代码的业务

具体代码细节展示

1.九宫格实现原理

界面是一个九宫格的布局.九宫格实现思路.
1.先确定有多少列 cloum = 3;
2.计算出每列之间的距离
2.1计算为: CGFloat margin = (当前View的宽度 - 列数 * 按钮的宽度) / (总列数 - 1)
3.每一列的X的值与它当前所在的列有关
3.1列号:curColum = i % cloum
4.每一行的Y的值与它当前所在的行有关
4.1行号:curRow = i / cloum
5.每一个按钮的X值为, margin + 当前所在的列 * (按钮的宽度+ 每个按钮之间的间距)
6.每一个按钮的Y值为 当前所在的行 * (按钮的宽度 + 每个按钮之间的距离)

2.选中按钮连线的原理

 //把选中的按钮绘制起来
//重写drawRect方法,调用self setNeedsDisplay]会触发
//判断选中的按钮是否为空
  if (self.selectedButtons.count == 0) return;
//创建贝塞尔曲线
UIBezierPath *path = [[UIBezierPath alloc] init];

//循环获取每个按钮的中心点,然后连线
    for (int i = 0; i < self.selectedButtons.count; i++) {
        UIButton *button = self.selectedButtons[i];
        if (i == 0) {
            //如果是第一个按钮, 那么就把这个按钮的中心点作为起点
            [path moveToPoint:button.center];
        } else {
            [path addLineToPoint:button.center];
        }
    }

// 把最后手指的位置和最后一个按钮的中心点连起来
    [path addLineToPoint:self.currentPoint];
    // 设置线条颜色
    [self.lineColor set];
     //  渲染
    [path stroke];

GesturePasswordView具体代码展示

GesturePasswordView.h

//
//  GesturePasswordView.h
//  GesturePasswordDemo
//
//  Created by 白石洲霍华德 on 2017/7/31.
//  Copyright © 2017年 景文浩. All rights reserved.
//

#import <UIKit/UIKit.h>



@class GesturePasswordView;
@protocol GesturePasswordViewDelegate <NSObject>



- (void)submitPsd:(NSString *)toast;//验证密码成功

//那边控制器得到参数,比较完后,然后通过代理返回过来
-(BOOL)GesturePasswordView:(GesturePasswordView *)gesturePasswordView
              withPassword:(NSString *)password;


@end



@interface GesturePasswordView : UIView



@property (nonatomic, weak)id<GesturePasswordViewDelegate>  delegate;


@end

GesturePasswordView.m

//
//  GesturePasswordView.m
//  GesturePasswordDemo
//
//  Created by 白石洲霍华德 on 2017/7/31.
//  Copyright © 2017年 景文浩. All rights reserved.
//

#import "GesturePasswordView.h"
#import "UIView+Extension.h"
#import "NSUserDefaultTools.h"

#define SteveZLineColor [UIColor colorWithRed:0.0 green:170/255.0 blue:255/255.0 alpha:1.0]




@interface GesturePasswordView ()


// 所有的按钮
@property (nonatomic, strong) NSArray* buttons;


// 所有选中的按钮
@property (nonatomic, strong) NSMutableArray* selectedButtons;


// 定义一个线的颜色
@property (nonatomic, strong) UIColor *lineColor;


// 记录最后用户触摸的点
@property (nonatomic, assign) CGPoint currentPoint;


@end






@implementation GesturePasswordView



//连起来的颜色
- (UIColor *)lineColor
{
    if (_lineColor == nil) {
        _lineColor = SteveZLineColor;
    }
    return _lineColor;
}


//被选中的按钮
- (NSMutableArray*)selectedButtons
{
    if (_selectedButtons == nil) {
        _selectedButtons = [NSMutableArray array];
    }
    return _selectedButtons;
}





- (void)layoutSubviews
{
    [super layoutSubviews];
 
    
     self.backgroundColor=[UIColor clearColor];
     [self SetButtonFrame];
    
}

//初始化所有的按钮
- (NSArray*)buttons
{
    if (_buttons == nil) {
        // 创建9个按钮
        NSMutableArray* arrayM = [NSMutableArray array];
        
        for (int i = 0; i < 9; i++) {
            UIButton *button=[[UIButton alloc]init];
            button.tag = i;
            
            button.userInteractionEnabled = NO;
            
            // 设置按钮的背景图片
            [button setBackgroundImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];
            [button setBackgroundImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];
            [button setBackgroundImage:[UIImage imageNamed:@"gesture_node_error"] forState:UIControlStateDisabled];
            [self addSubview:button];
            [arrayM addObject:button];
        }
        _buttons = arrayM;
    }
    return _buttons;
}



-(void)SetButtonFrame
{
    // 设置每个按钮的frame
    CGFloat w = 74;
    CGFloat h = 74;
    // 列(和行)的个数
    int columns = 3;
    // 计算水平方向和垂直方向的间距
    CGFloat marginX = (self.frame.size.width - columns * w) / (columns + 1);
    CGFloat marginY = (self.frame.size.height - columns * h) / (columns + 1);
    
    // 计算每个按钮的x 和 y
    for (int i = 0; i < self.buttons.count; i++) {
        UIButton* button = self.buttons[i];
        
        // 计算当前按钮所在的行号
        int row = i / columns;
        // 计算当前按钮所在的列索引
        int col = i % columns;
        
        CGFloat x = marginX + col * (w + marginX);
        CGFloat y = marginY + row * (h + marginY);
        
        button.frame = CGRectMake(x, y, w, h);
    }
}


//手势解锁的过程
- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
    // 1. 获取当前触摸的点
    UITouch* touch = touches.anyObject;
    CGPoint loc = [touch locationInView:touch.view];
    
    // 2. 循环判断当前触摸的点在哪个按钮的范围之内, 找到对一个的按钮之后, 把这个按钮的selected = YES
    for (int i = 0; i < self.buttons.count; i++) {
        UIButton* button = self.buttons[i];
        if (CGRectContainsPoint(button.frame, loc) && !button.selected) {
            button.selected = YES;
            [self.selectedButtons addObject:button];
            break;
        }
    }
    
}


- (void)touchesMoved:(NSSet*)touches withEvent:(UIEvent*)event
{
    // 1. 获取当前触摸的点
    UITouch* touch = touches.anyObject;
    CGPoint loc = [touch locationInView:touch.view];
    
    self.currentPoint = loc;
    
    // 2. 循环判断当前触摸的点在哪个按钮的范围之内, 找到对一个的按钮之后, 把这个按钮的selected = YES
    for (int i = 0; i < self.buttons.count; i++) {
        UIButton* button = self.buttons[i];
        if (CGRectContainsPoint(button.frame, loc) && !button.selected) {
            button.selected = YES;
            [self.selectedButtons addObject:button];
            break;
        }
    }
    
    // 3. 重绘
    [self setNeedsDisplay];
}

// 手指抬起事件
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 1. 获取用户绘制的密码
    NSMutableString *password = [NSMutableString string];
    for (UIButton *button in self.selectedButtons) {
        [password appendFormat:@"%@", @(button.tag)];
    }
    
    NSLog(@"======%@",password);
    //获取本地的密码,第一个要确认的密码,一个每次都验证的密码
    

     NSString *Psd  = [NSUserDefaultTools getStringValueWithKey:@"Psd"];//第一次设置密码,需要验证的密码
     NSString *SavePsd  = [NSUserDefaultTools getStringValueWithKey:@"SavePsd"];//第二次设置密码
    
    
    if (Psd==nil) {//判断 有没有设置密码(这里存在输入第一次密码)
        
        //保存用户第一次绘制的密码
        [NSUserDefaultTools setStringValueWithKey:password key:@"Psd"];
        
        if ([self.delegate respondsToSelector:@selector(submitPsd:)]) {
            [self.delegate submitPsd:@"请设置第二次密码"];
        }
        [self clearPassd];
        
    }
    else{//第二次密码输入确定
        
        if ([password  isEqualToString:Psd] && SavePsd==nil) {//判断第二次输入的密码,和第一次是否相同,做第二次确定判断
            
            [NSUserDefaultTools setStringValueWithKey:password key:@"SavePsd"];
            
            
            if ([self.delegate respondsToSelector:@selector(submitPsd:)]) {
                [self.delegate submitPsd:@"手势解锁"];
            }
            [self clearPassd];
            
        }
        else{
            
            [self confirmPassWord:password];
            
            
        }
        
    }

    

    
}

//把选中的按钮绘制起来
- (void)drawRect:(CGRect)rect
{
    //    if (self.selectedButtons.count > 0) {
    //        // 需要绘图
    //    }
    
    if (self.selectedButtons.count == 0) return;
    
    UIBezierPath *path = [[UIBezierPath alloc] init];
    
    // 循环获取每个按钮的中心点,然后连线
    for (int i = 0; i < self.selectedButtons.count; i++) {
        UIButton *button = self.selectedButtons[i];
        if (i == 0) {
            // 如果是第一个按钮, 那么就把这个按钮的中心点作为起点
            [path moveToPoint:button.center];
        } else {
            [path addLineToPoint:button.center];
        }
    }
    
    // 把最后手指的位置和最后一个按钮的中心点连起来
    [path addLineToPoint:self.currentPoint];
    
    // 设置线条颜色
    [self.lineColor set];
    
    
    // 渲染
    [path stroke];
    
}


//清楚密码
- (void)clearPassd
{
    // 先将所有selectedButtons中的按钮的selected 设置为NO
    for (UIButton *button in self.selectedButtons) {
        button.selected = NO;
        button.enabled = YES;
    }
    self.lineColor = SteveZLineColor;
    
    // 移除所有的按钮
    [self.selectedButtons removeAllObjects];
    
    
    // 重绘
    [self setNeedsDisplay];
}



//那边控制器得到参数,比较完后,然后通过代理返回过来
- (void)confirmPassWord:(NSString *)password{
    // 2. 通过代理, 把密码传递给控制器, 在控制器中判断密码是否正确
    if ([self.delegate respondsToSelector:@selector(GesturePasswordView:withPassword:)]) {
        // 判断密码是否正确
        if ([self.delegate GesturePasswordView:self withPassword:password]) {
            // 密码正确
            [self clearPassd];
        } else {
            // 密码不正确
            // 1. 重绘成红色效果
            // 1.1 把selectedButtons中的每个按钮的selected = NO, enabled = NO
            for (UIButton *button in self.selectedButtons) {
                button.selected = NO;
                button.enabled = NO;
            }
            
            // 1.2 设置线段颜色为红色
            self.lineColor = [UIColor redColor];
            
            // 1.3 重绘
            [self setNeedsDisplay];
            
            
            // 禁用与用户的交互
            self.userInteractionEnabled = NO;
            
            
            // 2. 等待0.5秒中, 然后再清空
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                [self clearPassd];
                self.userInteractionEnabled = YES;
            });
        }
    } else {
        [self clearPassd];
    }
    
    
    
    
    
    
    
}



@end

本文借鉴了不少的简书作者的操作,希望能帮到大家,一起快乐学习(千言万语这么多,不如给个GitHub链接)

哈哈.png

传送门

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

推荐阅读更多精彩内容