手势解锁,就这么简单

作者: 朱凯奇 | 来源:发表于2016-08-26 14:19 被阅读1448次

    先上个图


    手势解锁.gif

    很久没有写文章了,今天讲下手势解锁,虽然现在用的不是很多,但是有的需求还是需要.手势解锁这样的例子网上很多,也有多种方式可以实现,今天就带大家一步步分析,并且实现下.只是一个引导,具体要做到什么程度还得根据需求而定.


    一.分析

    1)分析本质
    • 手势解锁,其本质就是根据绘制的路径,记录连线的按扭,从而生成手势密码.所以我们要做的手势密码,起始就是给button连线.
    2)分析控件
    • 每一个圆圈都是个按扭,后面是背景图片,9个按扭添加在一个View上,View是透明的而已
    Snip20160826_1.png
    3)分析如何实现
    • 当手指点击到按钮上时,按扭被选中.当手指移动时,经过的按扭被选中且连线.当手指离开屏幕时,按扭恢复正常状态且连线消失.那么我想到了三个需要实现的方法:
    • (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent **)event
    • (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent **)event
    • (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent **)event

    实现这三个方法基本就能达到我们的需求了


    二.开始做

    1)搭建界面
    • 搭建界面,这里偷个懒,直接在Storyboard里拖拽的
    • 创建一个类,继承UIView,我这里起名叫LockView
    Snip20160826_2.png
    2)子控件布局
    • 首先创建9个按扭
    - (void)initButton {
    
        
        for (int  i = 0; i< 9; i++) {
            
            UIButton *bt = [UIButton buttonWithType:UIButtonTypeCustom];
            
            [bt setImage:[UIImage imageNamed:@"normal"] forState:UIControlStateNormal];
            
            [bt setImage:[UIImage imageNamed:@"select"] forState:UIControlStateSelected];
         
            //关闭button的交互,防止移动过程中拦截事件
            bt.userInteractionEnabled = NO;
            //给个tag值,用于记录密码
            bt.tag = i+1000;
            
            [self addSubview:bt];
        }
    
    
    }
    
    • 对子控件进行重新布局
    - (void)layoutSubviews {
    
        [super layoutSubviews];
        
        CGFloat btW = 60; //bt宽
        
        CGFloat btH = btW; //等高
        
        CGFloat marginX = (self.frame.size.width - 3*btW)/4; //水平间距
        
        CGFloat marginY = marginX; //垂直间距等于水平间距
        
      //遍历进行布局
        for (int i= 0; i<self.subviews.count; i++) {
            
            NSInteger row = i/3;//行数
            
            NSInteger column = i%3;//列数
            
            UIButton *bt = self.subviews[i];
    
            bt.frame = CGRectMake(marginX+column*(marginX+btW), marginY+row*(marginY+btH), btW, btH); //每一个button对应的位置
        }
    }
    
    • 加载视图上的控件
    - (void)awakeFromNib {
    
        [self initButton];
    
    }
    
    

    运行看下效果,这里把view背景色去掉吧

    Snip20160826_3.png
    3)业务实现

    前面由于关闭的bt的交互,是为了不让它拦截view的事件,那么现在需要判断当前触摸的点是否在bt上,如果是就选中bt. 如何实现? 这里我封装了当前触摸点和返回触摸点在bt上的方法

    • CGRectContainsPoint(CGRect rect, CGPoint point) 这个方法用来判断当前的点是否在某个控件的frame上
    /**
     *  获取当前触摸点
     *
     *  @param touches
     *
     *  @return 当前触摸点
     */
    - (CGPoint )fetchCurrentTouchPointWith:(NSSet<UITouch *> *)touches {
    
    
         UITouch *touch = touches.anyObject;
        
         return [touch locationInView:self];
    
    }
    
    /**
     *  获取bt,如果当前触摸点在bt上就返回bt
     *
     *  @param point 当前触摸点
     *
     *  @return bt
     */
    - (UIButton *)fetchButtonContainsWith:(CGPoint)point {
        
         for (UIButton *bt in self.subviews) {
            
             //是否包含触摸点 如果包含返回bt
            if (CGRectContainsPoint(bt.frame, point)) {
                
                return bt;
            }
            
        }
        
        return nil;
        
    }
    
    /**
     *  改变bt的选中状态
     *
     *  @param touches 触摸集合
     */
    
    - (void)changeBtSelectedStateWith:(NSSet <UITouch *> *)touches{
    
        CGPoint point = [self fetchCurrentTouchPointWith:touches];
        
        UIButton *bt = [self fetchButtonContainsWith:point];
        
      //bt存在且未被选中时,改变状态,并且加入到数组中
        if (bt&&bt.selected==NO) {
            
            bt.selected = YES;
            
            [self.selectedBtArray addObject:bt]; //用来存储选中的按扭
        }
        
    
    }
    
      1. 实现点击屏幕时实现的方法
    //点击时
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
        
        [self changeBtSelectedStateWith:touches];
        
        
    }
    

    运行看效果

    点击时.gif
    • 2.实现手指移动时实现的方法
    • 我们想想,手指移动时,移动到按扭上时,未选中的按扭,要被选中.另外还要绘制一条线连接这些选中的按扭,如何做,我想到了UIBezierPath 然后需要实现这个方法
    • -(void)drawRect:(CGRect)rect ;
    //移动时
    - (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
        
        [self changeBtSelectedStateWith:touches];
        
        //这个属性用来记录当前手指的位置     
        self.fingerPoint = [self fetchCurrentTouchPointWith:touches];
        
        //重绘
        [self setNeedsDisplay]; //调用这个方法,目的自动调用(void)drawRect:(CGRect)rect
    
    }
    
    //绘制
    - (void)drawRect:(CGRect)rect {
    
        //有bt时才绘制
        if (self.selectedBtArray.count) {
            
            UIBezierPath *path = [UIBezierPath bezierPath];
            
            for (int i = 0; i<self.selectedBtArray.count; i++) {
                
                
                UIButton *bt = self.selectedBtArray[i];
                
                //是第一个点
                if (i == 0) {
                    //设置成路径的起点
                    [path moveToPoint:bt.center];
                }
                else{
                   // 不是第一个点画线
                    [path addLineToPoint:bt.center];
                }
                
            }
            
            //给手指添加一条线,目的就是根据手指移动
            [path addLineToPoint:self.fingerPoint];
            
            //线宽
             path.lineWidth = 6;
            
            //颜色
            [[UIColor whiteColor] set];
            
            //终点处理
            path.lineJoinStyle = kCGLineJoinRound;
            
            //连线
            [path stroke];
            
        }
        
    }
    

    运行看下效果

    移动时.gif
    • 3.实现手指离开屏幕时时实现的方法
    • 手指离开屏幕时需要 需要消除绘制的线,并且按扭要恢复到原有状态,并且把值存起来
      我这里存到了本地
    //离开时
    - (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    
        NSString *str = @"";
        //1取消按扭的选中状态
        for (UIButton *bt in self.selectedBtArray) {
            
              bt.selected = NO;
           
             //2存储选中按扭的值
           str = [str stringByAppendingString:[NSString stringWithFormat:@"%ld",bt.tag-  1000]];
        }
        
       //从本地读取手势密码
        NSString *GPWD = [[NSUserDefaults standardUserDefaults] objectForKey:@"GPWD"];
        
        if (GPWD) { //密码存在就判断正确性
            
             NSString *message = @"";
            if ([GPWD isEqualToString:str]) {
                
                message = @"密码正确";
            }
            else {
            
                message = @"密码错误";
    
            
            }
            UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示" message:message delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
            
            [alert show];
            
        }
        else { //密码不存在就写入到本地
            
          [[NSUserDefaults standardUserDefaults] setObject:str forKey:@"GPWD"];
        }
        
       
        //3.清除线
        [self.selectedBtArray removeAllObjects];
        
         [self setNeedsDisplay];
    
    
    }
    

    效果如下:

    手势解锁.gif

    三.总结

    以上的实现还有很多缺陷,当然实现的方式也不止这一种.特别是最后的业务判断,大家可以继续完善.如有问题欢迎大家指出,相互交流.
    请大家关注专题iOS菜鸟到大神有很多技术贴,欢迎大家投稿

    demo地址:https://git.oschina.net/zhukaiqi/GestureDemo.git

    相关文章

      网友评论

      本文标题:手势解锁,就这么简单

      本文链接:https://www.haomeiwen.com/subject/dgczsttx.html